Skip to content

Use Components

You can simplify and accelerate the development of digital applications by using a variety of existing components as building blocks, allowing you to create sophisticated digital applications without having to write all the code yourself. You can download a variety of components from HCL Forge and import them into your projects, or import reusable components that you create yourself.

For example, you can download the following free components developed by the HCL Forge Assets team, and drag and drop them into your applications:

  • Sliding Menu: Lets you hide the navigation beyond the edge of the screen, and reveal it only after a user’s action.
  • Login: Provides a standard log-in interface with the ability to enforce a minimum password and minimum user ID length, and local password encryption.
  • Place Locator: Provides a powerful map interface that allows you to search for points of interest near a specified location.
  • Floating Action: Represents and promotes the primary action in an application.
  • Employee Directory: Provides standard features associated with an employee directory.

You can also import masters created in an earlier version of Volt MX Iris into a Free Form JavaScript project. You can continue to use the masters in your applications, or make them available as reusable components that can be published to HCL Forge by converting them to components. A master is similar to a component without a contract, except that a component includes a controller module.

For information about creating components, see Creating a Component. For information on the types of projects, you can create, see Types of Projects.

The following topics provide additional information about using components:

Download a Component from HCL Forge

HCL Forge gives you access to a rich assortment of components. You can download a component, and then import it into your project.

Check the Video to learn more about HCL Forge and how to download one to use it in your application.

To download a component from HCL Forge:

  1. Select Browse from the HCL Forge menu, or navigate to the HCL Forge website in your web browser. If you are not already logged into Volt MX Cloud from the Iris, a login window appears. Enter the Volt MX Cloud account credentials.

  2. Select the component you want to download to open a web page that describes the component.

From Asset Version, select the version of the component to download. Once you are done selecting the asset version, scroll down.

  1. Click the Login to Download button to log in to your Volt MX account and download the component.

  2. From Select Destination list, select one of the options
    • Select Collection Library to add the component to your library in Iris
    • Select Local Drive to download the component to your local drive. You can import this component later in your Iris project.

Import a Component into Your Project

You can import components to your Volt MX Iris project and reuse them at necessary places in the application. Components can be imported from the following sources:

  • Components that you download from HCL Forge.
  • Components that you create and export to your computer, network, or the cloud.
  • Components that others create and export to your computer, network, or the cloud.

To import a component to your project, follow these steps:

  1. In the Project Explorer, click the Templates tab.

  2. Right-click Components, and then select Import Component. The Import Component dialog box appears.

  3. Click Browse to navigate to the location of the component, select the component, and then click Import. The component and its associated widgets and modules are added to your project.

Once you have imported a component to your project, you can easily add the component to a form. For more information, refer Add a Component to a Form.

You can also save the component to a collection. For more information, refer Add a Component to a Collection.

Import Different Versions of an Existing Component

  • When you import an older version of an existing component, Volt MX Iris displays a message for permission to save the imported component as a new copy of the component. Click OK to import the component as a new copy. Click Cancel to stop the import process.
  • When you import a newer version of an existing component, by default, the component is saved as a new copy.

Instances of existing components are not automatically upgraded when you import a newer version of the component. To upgrade a component instance in a form, follow these steps:

  1. From the Project Explorer of Volt MX Iris, navigate to the Form in which the component is present.
  2. Right-click the component, and select the Replace Component option.
    A list of available components appears.
  3. Select the required version of the component.

The component is replaced with the selected version.

Note: When you replace a component with another version, the elements (child widgets and nested components) of the component are replaced with the elements of the new component. However, the data, properties, and events of the elements are retained if the data type and widget type match.

Update a Component Instance

The Update Component Instance feature enables you to update the existing versions of components in a Volt MX Iris project to higher versions of the same component. You can view the higher versions that are available and choose the version you want to update to.

You can update a component instance in three different ways.

  • You can update a specific component instance in a project.
  • You can update a specific component on the canvas.
  • You can update a multiple component instance in the Template.

Note: If a higher version is not available on the selected component, then the Update Component option is disabled.

Update a Component In a Project

To update a specific component in your project, follow these steps:

  1. In the Project Explorer, click Project tab.
  2. Select Form.
  3. Right-click the component and select Update Component.
    You can view the higher versions of the component.
  4. Select the version you want to update to.
    The selected component is updated to the selected version.

Update a Component on the Canvas

To update a specific component on your canvas, follow these steps:

  1. In the Project Explorer, locate and open the form in which you want to update the component.

  2. On the canvas, right-click the form and select Update Component Instance.
    You can view the higher versions of the component.

    Note:  When you update a component instance on the canvas, if there are no updates available for the component, the Update Component option does not appear.

  3. Select the version you want to update to.
    The selected component is updated to the selected version.

    Note: By using this method, you can only update a single component instance in one go. If you want to update multiple instances of the same component, follow the instructions available at Update a multiple components instance in the Template.

Update Multiple Component Instances from Template

To update multiple component instances from a template, follow these steps:

  1. In the Project Explorer, click Templates.

  2. Expand the component node and select the components.

  3. Right-click the component and select Update Component Instance.
    The Update Component Instance dialog appears with the list of higher versions of the component where added.

    Note: The Select Version drop-down displays all the higher versions of the component.

  4. Select the components you want to update.

  5. Click Update
    A confirmation window appears with the Success alert.

Add a Component to a Collection

To help you organize your components, you can group them in a collection within the Library Explorer. You can organize related components, or organize them however you like, in multiple collections within a library. You can then easily drag and drop the component from the Collections pane of Library Explorer onto a form in any of your digital application projects.

From Volt MX Iris V9 SP2 GA onwards, you can add multiple versions of components from the Templates tab into My Libraries. When you import or add the same version or lower version of an existing component to the My Libraries section, Volt MX Iris displays a message stating that a same version of the component exists. Click OK to add the component. If a higher version of the component is added, Volt MX Iris directly adds the component into My libraries.

Add Components to My Libraries

When you add a component, the create new Library Component dialog box appears. The Library Component dialog box contains the following options:

  • Display Name: The name of the Component is pre-populated with the existing name. Users can change the name, if required.

Note: If a component with this name already exists then an alert icon appears to change the display name.

  • Component Name: The name of the component for user reference. This field is in the read-only format.

  • Version: Displays the version number of the component in a read-only format.

  • Description: Add the description for the Component, if required.

Click OK to add the component to a collection and the version tag is added to the component.

To add a component to a collection, follow these steps:

  1. Click the Templates tab in either the Project Explorer or the Library Explorer.
  2. If it is not expanded already, expand the Components node.
  3. Click the context menu arrow of the component you want to add to a collection, and hover over Add to Collection. Then hover over the library that contains the collection, and click the collection where you want to save the component. If the library or collection does not exist, you can create the library or collection.

If the component uses any Volt MX Foundry services, Volt Iris prompts you to select the services that you want to include with the component. Volt MX Iris creates a trial Volt MX Foundry account and includes any required services.

You can also add a master created in earlier versions of Volt MX Iris to a collection.

Add Dependent Assets to a Component

In Volt MX Iris, you can add skins, media assets, and images to components. In previous releases, when you create a component and export the component to the HCL Forge , associated dynamic skins, and media assets were not added to the collection automatically. These skins and media assets used to be accessed through the code that you customized within the component.

Important: When you are importing a component into a project, ensure that the component assets do not have the same name as any of the assets in the project you are importing the component. Iris does not warn you of any duplication, and you may lose some functionality.

Add Skins to a Component

To add skins to a component, do the following:

  1. In Project Explorer, click Skins.
  2. Right-click on the skin you want to add to a component. A list of options appears.
  3. Click Add to Component. The Add to Component dialog appears.
  4. Select the component to which you want to add the skin. The skin is added to the selected component.

When you add a skin to a component, a live two-way dependency map is maintained to track skins associated to a component. If you delete a skin from a project, the skin is removed from associated components.

Add Media Assets to a Component

To add media assets to a component, do the following:

  1. In Project Explorer, click Assets. The assets tab appears.
  2. Browse to the asset you want to add to a component.
  3. Right-click on the asset. A list of options appears.
  4. Click Add to Component. The Add to Component dialog appears.
  5. Select the component you to which you want to add the media asset. The asset is added to the selected component.

If you delete an asset from a project, the asset is removed from associated components.

Directly Import Images into a Component

From Volt Quantum V8 SP4 onwards, you can directly import an image from your local computer and add it to the widget in a component. Previously, to change the asscoiated image of a Login component, you had to first import the image to the Assets tab and only then you could add it to the component.

To directly import an image and add it to a component, follow these steps:

  1. Drag and drop a component to your form. For instance, the ACME Login component from the Default Library.

  2. You can perform any of the following actions:

    • On the Project Canvas, double-click the success image .
    • In the Project Explorer, go to your form > ACMELogin, right-click imgLogo, and then click Edit Image Source.

    The Select Image dialog box appears, containing the list of available imported images.

  3. Click Import. The File Explorer of your local computer appears.

  4. Select the required image, and then click Open. The Import Images dialog box appears, indicating that the image has been imported successfully. If required, Volt MX Iris automatically modifies the file name of the imported image according to the Volt MX Irisresource name specification.

    5. The imported image appears in the list of images of the Select Image dialog box. Select the image, and then click OK. The image is added to the ACMELogin component.

View Details and Documentation of a Component

Components downloaded from HCL Forge often include documentation supplied by the component creator. For example, the Rating Prompt component developed by the Volt MX team includes a summary of key details about the component, along with a more complete description of the component and how to use it.

You can view this documentation, if it exists, from within Library Explorer in the collection where you saved the component.

To view details and documentation about a component:

  1. In Library Explorer, go to the Default Library and Collection where you saved the component.

  2. Right-click the component name and select Details. Volt MX Iris opens a viewing pane and displays the documentation.

To switch between details and documentation view, click Details or Documentation.

Add a Component to a Form

You can add a component to a form in a project in virtually an