Adding JavaScript files to HTML Component

Added in 25.02.

In Aurora, you can add custom JavaScript files to any HTML components in your community Git repository to enhance them with user interactivity, dynamic content, content validation, and the ability to use data from an external API.

To add the JS, HTML, and JSON files, you must have access to your community's Git repository.

Basic Steps for Adding JS Files to HTML Component

Create a component folder in your community Git repository.
Create a component.json file to add a HTML Component Descriptor file.
Create a component.html file for your HTML component.
Create .js files in the component folder alongside your .html and .json files.
Note
The .js file name must follow a specific naming convention:
1. The .js file name must be the same as the component folder.
2. For multiple JS files, add the number for the script index.
  Example: Announce1.js, Announce2.js, etc.
Push all your changes to your community Git repository.
Add the component to your page quilt.

Creating a Component Folder

Create a component folder in your GitHub repository: res/components/<ComponentFolderName>.

For our example, we use the folder “Announce” in the repository: res/components/Announce.

Example:

Announce.html is my component name
Announce.js is my first JS file
Announce1.js is my second JS file; 1 represents the index of the script
Announce2.js is the third JS file

Creating a JSON file

The content of the HTML component descriptor JSON file is given below:

Create an Announce.component.json file in the Announce component folder.
Define the ID, markup language, config, component ID, and grouping for the JSON file.
Add a scriptGroups object to indicate when the scripts load on the page load. For reference, this is used in accordance with the NextJS Script Strategy. If this is not specified in your component descriptor JSON, the default strategy for loading your JS scripts will be set to afterInteractive. The afterInteractive field activates the code after a member selects the button.

Add the below example code for the JSON file.

{
  "id": "Announce",
  "markupLanguage": "HTML",
  "defaults": {
    "config": {
      "applicablePages": [],
      "dynamicByCoreNode": false,
      "description": "",
      "fetchedContent": null
    },
    "props": []
  },
  "components": [
    {
      "id": "custom.widget.Announce"
    }
  ],
  "grouping": "TEXTHTML",
  "scriptGroups" : {
    "afterInteractive" : [ "Announce2" ],
    "lazyOnLoad" : [ "Announce3" ]
  },
  "aboutThis": null
}

Creating an HTML file

To use a .js file in an HTML component, here is an example of the “Announce.html” component. When you click this button, the text changes based on the declared JS files.

<body>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .button {
            display: block;
            margin: 10px 0;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
    <p class="lia-align-center"><span class="lia-text-color-8">This is a community-wide announcement.</span></p>

    <p>Interactive Buttons Example</p>

    <button class="button" onclick="announce()" id="changeTextBtn">Change Button Text</button>
    <button class="button" onclick="announce1()" id="bgColorBtn">Change Background Color</button>
    <button class="button" onclick="announce2()" id="showMessageBtn">Show Message</button>
    <button class="button" onclick="announce3()" id="darkModeBtn">Toggle Dark Mode</button>

</body>

On the buttons in the HTML file, we added the onclick attribute calling the function announce() for the "Change Button Text." This function is defined in the file: Announce.js

Creating JS files

To call a function with the onclick attribute in your HTML component, we need to create a JS file to create a function for the onclick attribute to call in the component folder. The functions you write in the JS files will add interactivity to your component. For example, when you click the Background color changed! button, the page color changes to blue, and if you click it again, it changes to another color.

Create an Announce.js file with the below code:

function announce() {
  const button = document.getElementById('changeTextBtn');
  button.textContent = "Clicked2!";
  console.log("Button text changed to 'Clicked2!'");
}

Create an Announce1.js file with the below code:

function announce1() {
  document.body.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
  document.body.style.color = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
  console.log("Background color changed!");
}

Create an Announce2.js file with the below code:

function announce2() {
  const message = document.createElement('p');
  message.innerText = "You clicked the button!";
  document.body.appendChild(message);
  console.log("Added child element to body!");
}

Create an Announce3.js with the below code:

function announce3() {
  document.body.style.backgroundColor = '#333333';
  document.body.style.color = '#ffffff';
  console.log("Dark mode toggled!");
}

Pushing the Changes to the GitHub Repository

Create a commit and push your changes to the working branch of your community Git repository.
Create a build in your GitHub repository to make sure that the component is loaded in your community site.

Adding the Component to a Page Quilt

To add the announce component to a page quilt, do as follows:

Sign in to your community.
See Page Templates documentation for adding an Announce component (widget) to a page.

Here is an image of the announce component in a community page before interaction:

Here are the images of the announce component on a community page after selecting the Change Button Text and Change Background Color button interaction:

Conclusion

The above is an example of adding custom buttons with .js files using HTML as a component. You can customize the .js files with different logic for your community to meet your desired outcome.

Choose files or drag and drop files

Tags:

Was this article helpful?

Yes

ATLAS
Posted
Updated

Comments

Please sign in to comment