Importing Assets from Agora Marketplace

Overview

Agora is a common marketplace which allows frontend developers to find and import the assets such as Apps, Public Blocks, and Blueprints to the various projects or blueprints. You can import and reuse the assets in your project and blueprint instead of re-creating it from scratch.

How To

A user can,

Viewing the Assets in the Agora Marketplace

You can view the existing assets such as apps, public blocks, and blueprints.

To view the assets in the Agora Marketplace,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Select the Agora option from the dropdown list.
  3. Click the Asset Type dropdown and select the required asset type.
  4. Click the Category dropdown list and select the required option to filter the asset type based on the Category.

    Note: The category-based filtering is applicable only for the Apps and Public Blocks assets.
  1. Click the Subcategory dropdown list and select the required option based on which you need to filter the public block.

    Note: The category and subcategory-based filtering are applicable only for the Public-Blocks asset.

Importing an App from Agora Marketplace to a Project and Blueprint

You can associate an app from Agora Marketplace with a project and/or blueprint.

From the Import page, you can import the app from the Agora Marketplace:

  • to a blueprint, which imports the app to the blueprint dashboard.
  • to a project, which imports the app to the app compatibility page of that project.

To import an app from Agora Marketplace to a Project or Blueprint,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Click the AGORA option in the dropdown list.
  3. In the AGORA dashboard, click the Asset dropdown and select Apps.

    The Apps view displays the existing apps.
  4. Click on the required app. For example, Braintree.

The selected app’s detail page appears.

The following table describes the fields of an app:

Field Description
KEY FEATURES
  • Description section: displays the selected app’s key features and description which are defined in the App specifications page. Refer to Creating Metadata for a App.
  • Preview section: displays the live preview of the app.
  • Click  to view the elements used to view the various blocks used in the app.
  • Select the required pixel value based on which the preview of the app is displayed:
DEVELOPER NOTES Displays the list of App Block Name and App Block ID of the app.
INSTALLATION WIZARD Displays the preview of the Installation wizard form and the theme configurations that are configured during the app creation.
Note: This tab appears only if the installation wizard is configured for the app. For more information, see Configuring an Installation Wizard for an App.
  1. Click the IMPORT button.

    The Import Braintree pop-up screen appears:
  1. In the above Import Braintree pop-up screen, you can view the version of the app.
  2. Select any one of the following:
    • Project – to import this app into a project. This is the default option.
      1. In the Select Project field, click the dropdown list and select the required project.
      2. Click the IMPORT INTO PROJECT button.
    • BluePrint – to import this app into a blueprint.
      1. In the Select Blueprint field, click the dropdown list and select the required blueprint.
      2. Click the IMPORT INTO BLUEPRINT button.
  1. In the Activation Wizard page, click the COMPLETE INSTALLATION button to install the application onto the selected project or blueprint.

Note:

    • To skip the installation, click SKIP.
      Note: In the case of SIMBA, clicking the SKIP option installs the app in the SIMBA platform. But the activation details need to be updated on the backend (SIMBA) side.
    • To cancel importing the APP, click the CANCEL button.
  1. In the Import Completed page, click the GO TO PROJECT/BLUEPRINT button to directly navigate to the installed project/blueprint.

    Note: For a project/blueprint, you can view the imported app on the App Compatibility page from where you can map the imported app to a target block within the project/blueprint. For more information, refer to Mapping an App from Agora to a Target Block.

Importing a Public Block from Agora Marketplace to a Project or Blueprint

You can import a public block from an Agora marketplace to a project and/or blueprint so that you can use these blocks for your project instead of creating it from scratch.

To import a public block from Agora to a project or blueprint:

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Click the Agora option in the dropdown list.
  3. In the Agora dashboard, click the Asset dropdown list and select Public Blocks.

    A list of public blocks appears:
  4. Click on the required public block.

The selected block’s detail page appears.

The following table describes the public block tabs:

Tab Description
KEY FEATURES
  • Description Section: displays the selected public block’s key features and description which are defined in the Block specifications page. Refer to Creating Metadata for a Public Block.
  • Preview section: displays the live preview of the public block.
  • Click to view the elements used to view the various blocks used in the public block.
  • Select the required pixel value based on which the preview of the public block is displayed:
SPECIFICATIONS Displays the elements of the public block.
  1. Click the IMPORT button.

    A pop-up screen appears:

Note: In the pop-up, you can view the version of the public block.

  1. Select any one of the following:
    • Project – to import the public block into a project. This is the default option.
      1. In the Select Project field, click the dropdown list and select the required project.
      2. Click the IMPORT INTO PROJECT button.
    • BluePrint – to import the public block into a blueprint.
      1. In the Select Blueprint field, click the dropdown list and select the required blueprint.
      2. Click the IMPORT INTO BLUEPRINT button.

The configuration wizard of the public block appears:

The following table describes the configuration wizard of a public block:

Feature Description
Click the CANCEL button to cancel the importing of the public block.
Click the SKIP button to skip the configurations in the wizard.
Click the DONE button to Import the public block.
The Import Public Block with Easy Config feature is selected by default. When selected, you can configure the public block in the easy config tab. For example,

Note: If this feature is deselected, you need to configure the public block by expanding all the elements. For example,
Viewing Data Source and Preview
  • – to display the data source and preview sections side-by-side in the wizard.
  • – to display the data source and preview sections top and bottom in the wizard.
  • – to display ONLY the data source section in the wizard.
  • – to display ONLY the preview section in the wizard.
Data Source Select a data source for the wizard variables. You can preview the values of the variables in the preview section. This avoids UI breakup issues.  For example,

Note:  In a project or blueprint, you need to create the required data points before importing a public block to a project or blueprint.
Preview Section To preview the selected public block.
  1. Click DONE.
    The Import completed pop-up appears:

    Note: To directly navigate to the project or blueprint where the public block is imported, click the GO TO PROJECT or GO TO BLUEPRINT button.

Importing a Blueprint Template from Agora Marketplace to the Blueprint Dashboard

You can import a blueprint template from the Agora marketplace to the Blueprint dashboard so that you can avoid the repetition of creating similar templates in the Blueprint dashboard which saves time and effort.

To import a blueprint template from the Agora marketplace to the Blueprint dashboard,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Click the Agora option in the dropdown list.
  3. In the Agora dashboard, click the Asset dropdown and select Blueprints.
  4. In the Blueprint view, click on the required blueprint.

The selected blueprint’s detail page appears.

The following table describes the fields in the blueprint template:

Field Description
KEY FEATURES
  • Description section: displays the selected blueprint’s key features and description that are mentioned on the blueprint specifications page. For more information, refer to Creating Metadata for a Blueprint.
  • Preview section: displays the live preview of the blueprint.
  • Click  to view the elements used to view the various pages within the blueprint template.
  • Click the numerical values to display the preview view in various pixels.
DEVELOPER NOTES Displays the preview view of a blueprint.
  1. Click the IMPORT button.
  2. In the Import Blueprint pop-up, enter a name for the blueprint and click the IMPORT button.

    The Import completed page appears.
  3. Navigate to the Blueprint Dashboard to view the imported blueprint.

    Note: The blueprint is imported with the Draft status. For details on updating the blueprint, refer to Blueprints.

Revision History 

Date   Description  Created By  Peer-Reviewed By  Approved By 
2023/06/22  Page created and content added.  SW JP Suganya