1. Getting Started User Guide
  2. UI Extensions – Web Component
  3. Maintenance Detail and Summary

4.4 Maintenance Detail and Summary

This topic describes the process of creating the Maintenance Detail and Summary component using OBX.

Here we must remember that we will be generating two web components one will be detail component and another one for summary component.
Following are the steps needed to be followed:
  1. Navigate to extension_home folder from cmder.
  2. Use the command obx ui –mnsm.
  3. Once this command is executed, this will take you to next section where it will prompt other set of questions. Answer them accordingly to your setup and requirement.

    Figure 4-15 OBX UI


    Description of Figure 4-15 follows
    Description of "Figure 4-15 OBX UI"

  4. It will automatically generate the libraries for the components.
  5. At this point of time go to browser and navigate to http://localhost:8002. You will be able to component server home page like:

    Figure 4-16 OBX Component Server


    Description of Figure 4-16 follows
    Description of "Figure 4-16 OBX Component Server"

  6. Select the component which you want to reuse in your extension and paste it in module.exports = []; inside the metadata.js file.

    Figure 4-17 OBX sd amount


    Description of Figure 4-17 follows
    Description of "Figure 4-17 OBX sd amount"

  7. Once done come back to main tab in cmder where is waiting with question Please modify the Metadata.js file before proceeding. Once done press y to proceed?
  8. On completing the above process, it will automatically generate the source folder for maintenance details screen and same process will followed for summary screen as well.
  9. For this case we will be not able to see the component running locally as we have to 2 components generated.
  10. To start the component, one needs to go inside the component are run it manually.

Parent topic: UI Extensions – Web Component