Industrial Internet Application Development

Adding more UI components to the created web application

In this example, we will add the px-gauge component of GE's Predix Design System. To accomplish this task, proceed as follows:

1. Install the px-gauge dependency:

 bower install -S px-gauge

2. Add the px-gauge dependency to the index.html file:

<link rel="import" href="bower_components/px-gauge/px-gauge.html"/>

3. Replace the basic text value in the device-card.html file with the following code:

<px-gauge value="{{value}}"></px-gauge>

4. Redeploy the application:

cf push

5. To open the deployed application, insert the https://ui-bleeding-blue.run.aws-usw02-pr.ice.predix.io link into a browser line:

UI of the deployed web app with the px-gauge component

For more UI components, explore the ...