Act! Web Components

Act! provides development partners access to the Act! Web Component Library, a set of front-end web components built for Act! and maintained by the Act! development team. These elements and styles give your application the immediate look and feel of the Act! application.

Getting Started

Act! Web Components are provided through the popular package registry NPM. The Act! development team manages their own NPM registry for security purposes. Because of this, it is required to have a valid authentication with our NPM registry in order to pull any @act package. Once you have a valid authentication, set your registry to the one provided by the Act! team using the following command:

npm set registry http://npm.actops.com
npm login

Now you should be able to pull packages from our private NPM registry.

To pull the @act/web-components library, simply save the package as you would use any other NPM library:

npm i --save @act/web-components

Add the bundled file to your index.html to gain access to the elements within your HTML:

<script type="module" src="act-web-components.bundled.js"></script>

Note: You must correctly path to the act-web-components.bundled.js file. It can be found in the node_modules/@act/web-components/dist/act-web-components.bundled.js directory. Feel free to use a script to copy this to an assets folder of choice and path to that instead.

Now you should have access to that package within your JS code:

import { ActButtonElement } from '@act/web-components';

Do note, that since this library is a package of web components, you should not need to import the components directly unless you are calling functions off of them within your JS code. Most use cases should be provided through the setting of attributes within the HTML.

Creating an Element

The simplest way to consume the @act/web-components library is to add an element to your HTML. Here is an example of an Act! Button Element within your HTML:

<awc-button color="purple">Purple Button</awc-button>

Since, the @act/web-components library was built using as web components, you can also create components using those methods:

const button = document.createElement('awc-button');
button.color = 'purple';
document.appendChild(button);

Be sure to check out the wonderful documentation by the Mozilla Development Network on Web Components for an in depth look at web components and their functionality.

Styling Elements

All Act! Web Components have CSS variables that set certain values on the element. These can be modified by setting the CSS variable value on the root element. For example,

awc-chip {
  --awc-tooltip-size: 16px;
}

The full list of CSS variable and JS functionality can be seen on the documentation for the @act/web-components package.

You can also directly style the root element:

awc-chip {
  display: block;
  opacity: 0.5;
}

Found a Bug or Want to Contribute?

Act! hosts the @act/web-components package on Github. Be sure to check out the current issues section to see if your bug has already been submitted by another user. Act! accepts contributions and bug requests based on a specific format, so please be sure to read the documentation on Github for contributing or filing bugs. The Act! development team will do its best to resolve the issue in a timely manner.

Next Steps

It is highly recommended to use the @act/web-components library for use within your application. Act! is committed to providing a reliably robust library of front-end elements that are responsive and highly functional.