Several Extensibility example applications are included in the Web Client 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. For example, the JavaScript example is preference
based and can be used by developers experienced with that type of setup. The Angular
masterclass example is an extension of the basic Angular sample that follows.
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:
-
Ensure that the database is installed with the latest model and that the WebClientExtensibility client API is in the database.
-
Ensure that the Web Client has an API entry point that is configured for areas.
-
Create a new feature set, such as External Application.
-
Create a new method. The following are examples of the values 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.
-
-
Configure the user access for the new method.
-
Relate the new method to the new feature set.
-
Create a second new method.
The following are examples of the values you can provide for the properties for the second method:
-
Name - AreasFromActionMenu
-
DisplayAs - Areas from Action Menu
-
Client API - WebClientExtensibility
-
URL to custom page - http://localhost:4200/#/area-example.
-
-
Configure user access for the new method.
-
Relate the new method to the interface definition for an area.
-
Copy the ClientExtension directory to a location you can access. For this example, C:\test.
-
Open a command prompt, navigate to the directory C:\test\ClientExtensibility, and run the command npm install.
This command installs all dependencies for the project. Refer to the npm website
for any troubleshooting information (https://docs.npmjs.com).
-
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 Web Client 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 Web Client to which the extensibility application communicates. It must be appended with /api. For example, https://sdx.com/serversite1/api.
-
-
Open a command prompt, navigate to the directory C:\test\ClientExtensibility, and run the command npm start.
This command compiles the sample and runs a local development server on localhost
port 4200.
-
Open the Web Client from your browser.
If configured correctly, you now see your new feature set with a new function tile, such as the External Application feature set with the Areas from the Feature Set function.
-
Click the new function to launch the external application embedded in the Web Client.
-
From the custom view, click on the Actions menu button, and select the new method. Another custom view is also available with the sample data.
-
-
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 Web Client domain in which the Extensibility application is hosted.