Writing UI Extensions

In WSO2 IoTS each device type has it's own UI that lists the device specific details. Therefore, when writing your own device type you need to write the UI units mentioned below for the device specific details to be listed in the WSO2 IoTS Jaggery application pages.

Device type view Jaggery application page

The device type UI is written using the  cdmf.unit.device.type.<DEVICE_TYPE_NAME>.type-view unit. This unit is fetched when you click on a specific device type from the device-type-listings page.

The main .hbs file of this unit includes all the information of a specific device type such as:

• Explain the device type and its functionality. 

• The steps to register an instance of the device.

• Links to download a device-agent (if available), other supporting documentation and APIs

Device details Jaggery application page

The device details UI is written using the cdmf.unit.device.type.<DEVICE_TYPE_NAME>.device-view unit. This unit is fetched when you click on a specific instance of a device type that is already created.

• The main .hbs file of this unit includes all the information related to a specific instance of a device type. The author can retrieve and initialize the deviceType and deviceId, which are specific to the device instance  from the request/uri parameters inside the javascript file. Therefore, if any API call needs to be made, you can include the deviceType and deviceId variables inside the .hbs file.
  Further to generate the real-time data gathered from the device, you need to write the Real-time data Jaggery application unit.

• Include the device-operations unit in a zone for the available operations of the device to be listed. The listing happens according to the @Operation annotation used in the device-type API.

Real-time data Jaggery application page

The policy wizard UI is written using the cdmf.unit.device.type.<DEVICE_TYPE_NAME>.realtime.analytics-view unit. This unit is fetched when you click on a specific instance of a device type that is already created. 

You need to configure the graphs to define what axis represents the data gathered from the device sensors.

Historical data Jaggery application page

The policy wizard UI is written using the cdmf.unit.device.type.<DEVICE_TYPE_NAME>.analytics-view unit. This unit is fetched when you click View Device Analytics that is under the real time graph of the device page. You need to configure the graphs to define what axis represents the data gathered from the device sensors.

Policy wizard Jaggery application page

The policy wizard UI is written using the cdmf.unit.device.type.<DEVICE_TYPE_NAME>.policy-wizard unit. The unit is fetched when you click ADD POLICY in the Policy Management page. This unit can be configured to inherit the parent policy wizard unit (iot.unit.policy.wizard) of the devicemgt Jaggery Application. 

Adding a policy Jaggery application page

Adding a policy UI is written using the cdmf.unit.device.type.<DEVICE_TYPE_NAME>.policy-view  unit. The unit is fetched when you click view on a policy that's already created. This unit can be configured to inherit the parent policy view unit ( iot.unit.policy.view ) of the  devicemgt  jaggery application.

Editing a policy Jaggery application page

Editing a policy UI is written using the cdmf.unit.device.type.<DEVICE_TYPE_NAME>.policy-edit unit. This unit is fetched when you click edit on a policy that's already created. This unit can be configured to inherit the parent policy-edit unit (iot.unit.policy.edit) of the devicemgt Jaggery Application.