Getting started with hTWOo Framework with Angular Elements using PnP SPFx Yeoman generator

Recently @StfBauer has launched hTWOo. HTWOO UI is an open-source alternative for Microsoft’s Fluent UI Web Design system. Despite being ReactJS exclusive this project offers a style guide based on HTML and CSS to create implementations for other frameworks as well.

For more details refer to this.

Check out this to refer to controls that are available in this framework.

We can easily use this in our SPFx web part so to use refer to this.

How to use hTWOO Framework with angular elements in SPFx

In this article, we will see how to use the hTWOo framework with angular elements in SPFx. So for this, we will use the PnP SPFx Yeoman generator to use angular elements and we will use this framework in this. 

Pretty interesting topic! 😍

Let’s see step-by-step implementation. 🚀

Refer to this article to see how to  create an SPFx web part using the PnP SPFx Yeoman generator.

After successfully creation of web part you can see there will be two folders in the solution one for an angular and another for SPFx.

Now we will install the hTWOo package inside an angular folder.

So first open the project in any code editor and move to the angular project folder and execute the below command.

npm install --save-dev @n8d/htwoo-core

Basically, we will use some available controls in the project like a button or grid and etc.

After successfully package installation we will import related SCSS to use available controls.

So for that move to the styles.scss inside {angualrProjectFolder}/src.

Now add below CSS,

@import 'node_modules/@n8d/htwoo-core/lib/components/base';
@import 'node_modules/@n8d/htwoo-core/lib/sass/style';

Now we will import CSS which we need like if we want to use buttons then we have to import CSS related to button only and so on. For now, the below controls are available,

// Various types of buttons
@import 'node_modules/@n8d/htwoo-core/lib/components/button';
// Various types of cards
@import 'node_modules/@n8d/htwoo-core/lib/components/cards';
// Various types of dialogs
@import 'node_modules/@n8d/htwoo-core/lib/components/dialogs';
// Various types of forms
@import 'node_modules/@n8d/htwoo-core/lib/components/forms';
// Various types of icons controls
 @import 'node_modules/@n8d/htwoo-core/lib/components/icon';
// Various types of menus controls
@import 'node_modules/@n8d/htwoo-core/lib/components/menus';
// Various types of tables
@import 'node_modules/@n8d/htwoo-core/lib/components/table';
// Various types of typography
@import 'node_modules/@n8d/htwoo-core/lib/components/typography';
// Various types of web part utilities
@import 'node_modules/@n8d/htwoo-core/lib/components/webparts';

Move to the src/app/{webpartname-web-part}/{webpartname-web-part.componenent.html} inside the angular project folder. And add the controls from hTWOo library as below. For eg we will add a button, grid, and form as below.
<h1>
  {{description}}
</h1>
<hr>
<h3>Button</h3>
<button class="hoo-button-primary">
  <div class="hoo-button-label">Primary</div>
</button>
<hr>
<h3>Forms</h3>
<div class="hoo-radiobutton-group">
  <div>
    <input type="checkbox" name="chbg1" id="chbg1" value="" class="hoo-checkbox"><label for="chbg1">Apple</label>
  </div>
  <div>
    <input type="checkbox" name="chbg2" id="chbg2" value="" class="hoo-checkbox"><label for="chbg2">Avocado</label>
  </div>
  <div>
    <input type="checkbox" name="chbg3" id="chbg3" value="" class="hoo-checkbox"><label for="chbg3">Banana</label>
  </div>
</div>
<hr>
<h3>Grid</h3>
<div class="hoo-grid">
  <div class="demo-item">Demo Item</div>
  <div class="demo-item2">Demo Item</div>
</div>
<hr>

Execute ng serve --open  command to serve an application.

Angular App | hTWOo | Output

📝 Note:

After doing any change ins the angular side always has to run the npm run bundle command to reflect changes in SPFx.

Move to the folder with the suffix  -spfx  and move to the {webapartName}WebPart.ts file.
  • Import theming as below,
import {
ThemeProvider,
ThemeChangedEventArgs,
IReadonlyTheme,
ISemanticColors
} from '@microsoft/sp-component-base';
  • Create below methods to set themes  above the render() as below,
private _themeProvider: ThemeProvider;
  private _themeVariant: IReadonlyTheme | undefined;

  protected onInit(): Promise<void> {
    // Consume the new ThemeProvider service
    this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);

    // If it exists, get the theme variant
    this._themeVariant = this._themeProvider.tryGetTheme();

    console.log(this._themeVariant);

    // Assign theme slots
    if (this._themeVariant) {

      // transfer semanticColors into CSS variables
      this.setCSSVariables(this._themeVariant.semanticColors);

      // transfer fonts into CSS variables
      this.setCSSVariables(this._themeVariant.fonts);

      // transfer color palette into CSS variables
      this.setCSSVariables(this._themeVariant.palette);

      // transfer color palette into CSS variables
      this.setCSSVariables(this._themeVariant["effects"]);

    } else {

      // Fallback to core theme state options applicable for Single Canvas Apps and Microsoft Teams
      this.setCSSVariables(window["__themeState__"].theme)

    }


    // Register a handler to be notified if the theme variant changes
    this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);

    return super.onInit();
  }

  // Handle all theme changes
  private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
    this._themeVariant = args.theme;
  }

  /// Converts JSON Theme Slots it CSS variables
  private setCSSVariables(theming: any) {

    // request all key defined in theming
    let themingKeys = Object.keys(theming);
    // if we have the key
    if (themingKeys !== null) {
      // loop over it
      themingKeys.forEach(key => {
        // add CSS variable to style property of the web part
        this.domElement.style.setProperty(`--${key}`, theming[key])
      });
    }
  }
Using the gulp serve command you can test the web part in the workbench URL.

https://github.com/n8design/htwoo-samples/tree/main/htwoo-angular-spfx

If you like this project, mark a ⭐ on GitHub Repository

In this article, we have seen how to use the hTWOo framework with angular elements in SPFx.

I hope you like this article, share it with others. Give your valuable feedback and suggestions in the comment section below.

Sharing is Caring.
Happy Coding 🙂

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments