1. Getting Started User Guide
  2. UI Extensions – Web Component
  3. Dashboard Widget

4.6 Dashboard Widget

This topic describes the process of creating the simple standalone component using OBX.

Following are the steps needed to be followed:
  1. Navigate to extension_home folder from cmder.
  2. Use the command obx ui --wd.

    Figure 4-21 OBX UI


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

  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.
  4. It will automatically generate the libraries for the component to run locally and you will be also able to see new cmder tab opened where component server is running.
  5. At this point of time go to browser and navigate to http://localhost:8002. You will be able to see component server home page like:

    Figure 4-22 OBX Component Server


    Description of Figure 4-22 follows
    Description of "Figure 4-22 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-23 OBX sd amount extension folder


    Description of Figure 4-23 follows
    Description of "Figure 4-23 OBX sd amount extension folder"

  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 now and open a new tab on cmder where component will be running.
  9. Along with cmder tab it will automatically open a tab on default browser as well with component rendered on the screen.

    Figure 4-24 Cmder Component


    Description of Figure 4-24 follows
    Description of "Figure 4-24 Cmder Component"

Parent topic: UI Extensions – Web Component