1. Getting Started User Guide
  2. UI Extensions – Web Component
  3. Virtual Page

4.3 Virtual Page

This topic describes the process of creating the virtual page 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 –vp.

    Figure 4-10 obx ui-vp


    Description of Figure 4-10 follows
    Description of "Figure 4-10 obx ui-vp"

  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-11 obx ui-vp


    Description of Figure 4-11 follows
    Description of "Figure 4-11 obx ui-vp"

  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 component server home page like:

    Figure 4-12 OBX Component Server


    Description of Figure 4-12 follows
    Description of "Figure 4-12 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-13 obx-sd-amount


    Description of Figure 4-13 follows
    Description of "Figure 4-13 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 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-14 Component


    Description of Figure 4-14 follows
    Description of "Figure 4-14 Component"

Parent topic: UI Extensions – Web Component