Using the Extensibility example application - HxGN SDx - Update 68 - Administration & Configuration - Hexagon

HxGN SDx Extensibility
ft:locale
en-US
Product
HxGN SDx
Search by Category
Administration & Configuration

Several Extensibility example applications are included in the SDx Extensibility folder available from Smart Community. For more information, see Find sample data on Smart Community.

The samples include a pure javascript/css/html example, which can be used for basic scenarios. They also include some sophisticated Angular examples for scenarios that require a richer application experience. There is no known limit regarding which front end technology you wish to work with to implement an Extensibility application.

Due to the varying schema, some examples may require further configuration changes to accommodate any differences. The Angular masterclass example is an extension of the basic Angular sample and is only there for reference.

Extensibility Example

The next steps describe how you can create the API entry point, create the required model, and set up the local development server to run the example Extensibility application for the recommended architecture using Angular:

  1. Ensure that the database is installed with the latest model and that both the WebClientExtensibility and the WebClientExtensibilityMultiple client APIs are in the database.

  2. Ensure that the SDx Web Client has an API entry point that is configured for areas.

  3. Create a feature set. For example, named External Application.

  4. Create a method.

    The following example shows how you can create a new method to configure SDx Extensibility to display directly from a feature set. This example uses the following values that you can provide for the properties of the new method:

    • Name - AreasFromFeatureSet

    • DisplayAs - Areas from Feature Set

    • Client API - WebClientExtensibility

    • URL to custom page - http://localhost:4200/#/feature-set-home-example.

    The local server (http://localhost:4200) is for use in a development environment only. Alternatively, you can test changes by using the production method, which is particularly useful when testing a https site as it does not require installing a local certificate and can be hosted as a secure site in IIS.

    1. Configure the user access for the method.

    2. Relate the AreasFromFeatureSet method to the External Application feature set.

  5. Create a second method.

    The second new method example shows how to configure an Extensibility method for a single object. This example uses the following values that you can provide for the properties for the second new method:

    • Name - AreasFromActionMenu

    • DisplayAs - Area from Action Menu

    • Client API - WebClientExtensibility

    • URL to custom page - http://localhost:4200/#/area-example.

    1. Configure user access for the method.

    2. Relate the AreasFromActionMenu method to the interface definition for an area.

  6. Create a third method.

    The third new method example shows how to configure an Extensibility method for a multiple objects. This example uses the following values that you can provide for the properties for the third new method:

    • Name - AreasFromActionMenuMultiple

    • DisplayAs - Multiple Areas from Action Menu

    • Client API - WebClientExtensibilityMultiple

    • URL to custom page - http://localhost:4200/#/multiple-objects.

    1. Configure user access for the new method.

    2. Relate the Multiple Areas from Action Menu method to the interface definition for an area.

  7. Copy the ClientExtension directory to a location you can access. For this example, C:\test.

  8. Open a command prompt, navigate to the directory C:\test\ClientExtensibility, and run the command npm install.

    SHARED Tip This command installs all dependencies for the project. Refer to the npm website for any troubleshooting information (https://docs.npmjs.com).

  9. In an editor, open the C:\test\ClientExtensibility\src\settings.json file, and change the client and server URLs to match your configuration.

    • The clientUrl value must include the domain of the SDx to which the extensibility application communicates. For example, https://sdx.com/site1.

    • The serverUrl value must include the domain and site of the server that is hosting the SDx to which the extensibility application communicates. It must be appended with /api. For example, https://sdx.com/serversite1/api.

  10. Open a command prompt, navigate to the directory C:\test\ClientExtensibility, and run the command npm start.

    SHARED Tip This command compiles the sample and runs a local development server on localhost port 4200.

  11. Open the SDx from your browser.

If configured correctly, you should now see the External Application feature set with the Areas from the Feature Set function tile and be able to:

  1. Select the new function tile to launch the external application embedded in a custom view in the SDx.

  2. Open the Actions menu, and select the Area from Action Menu method to see the area.

  3. Go back to the Areas from the Feature Set function, and to view and select several objects as required.

  4. Open the Actions menu, and select the Multiple Areas from Action Menu method to see multiple areas as required.

  • You may need to configure the OData web services to handle any CORS requests.

  • You may need to close the command prompt after installing the prerequisite software to ensure that the environment variables are updated.

  • You can view the browser console for any errors, such as the page has not loaded.

  • When you encounter an error on opening an Extensibility application, ensure that the settings.json file is set to the correct SDx domain in which the Extensibility application is hosted.