You can the use One Identity Visual Studio Code extension to create your HTML applications and link them into the existing system.

Follow these steps to create your HTML application:

  1. Create the new HTML application.

  2. Import the source files into the database.

  3. Add the HTML application to the database.

To create a new HTML application

  1. Install the One Identity Visual Studio Code extension (see Installing the One Identity Visual Studio Code extension).

  2. Set up the work environment with the help of the One Identity Visual studio Code extension (see Setting up working environment),

  3. Add a new CCC folder to your work environment.

  4. Ensure that you are using the correct version of Angular (6.9.2):

    1. Open a command line prompt.

    2. In the CCC folder, run the ng version command.

    3. Check the version number returned. The version must be 6.2.9.

      TIP: If nothing is returned it means that Angular is not installed locally or globally.

      To install Angular globally, run the command: npm install -g @angular/cli@6.2.9.

      To install Angular locally, run the command: npm install @angular/cli@6.2.9.

  5. In the CCC folder, run the command: ng new <your HTML application name>

  6. In the QBM/OpsWeb folder, copy the imx-plugin-config.json file and add it to the CCC/<your HTML application name> folder.

  7. In the CCC/<your HTML application name> folder, edit the (freshly copied) imx-plugin-config.json file:

    • Remove all apart common and shared.

  8. In the CCC/<your HTML application name> folder, edit the package.json file:

    1. In the scripts section, add "build:debug": "ng build --prod --source-map".

    2. In the dependencies section, add dependencies to imx-api, imx-qbm-components, and imx-qbm-dbts.

    3. In the dependencies | rxjs section, change the version to ^6.3.3.

  9. In the CCC/<your HTML application name> folder, edit the angular.json file:

    • In the projects | <your HTML application name> | architect | build | options subsection, add "outputPath": "dist".

    • In the projects | <your HTML application name> | architect | build | options subsection, add "preserveSymlinks": true.

  10. In the CCC/<your HTML application name>/src folder, edit the index.html file:

    • In the head section, add <base href=".">.

  11. In the CCC/<your HTML application name>/src folder, edit the environment.<your domain name>.ts and environment.ts files:

    • Enter one entry for each client URL:

      For environment.<you domain name>.ts: clientUrl: ''

      For environment.ts: clientUrl: 'http://localhost:8182'

  12. In the CCC/<your HTML application name> folder, edit the tsconfig.json file:

    • In the compilerOptions | paths subsection, add "@shared/*": [ "src/imx-plugins/QBM/shared/*"].

  13. Use the One Identity Visual Studio Code extension to make sure that you are not using complication branches (see Selecting a compilation branch).

  14. Use the One Identity Visual Studio Code extension to compile your HTML application (see Compile HTML applications and save to database).

  15. Open your compiled HTML application over the URL: $<App server URL>/html/<your HTML application name>/.

    NOTE: Here you must use the same name for the HTML application as stored in the package.json file.

To import source files in to the database

  1. Go to your work environment.

  2. Start the Software Loader program.

  3. Click Import into database.

  4. Click Next.

  5. On the Connect to database page, select a database and enter the user credentials.

  6. Click Next.

  7. Select your work environment.

  8. Mark all the files in the CCC/<your HTML application name> folder but exclude the following folders:

    • node_modules

    • dist

    • .git

    • src/assets

    • src/imx-modules

  9. Click Next.

  10. Confirm the prompt with Yes.

  11. On the Assign machine roles page, mark all the file and enable the HTML Development machine role.

  12. Click Next.

  13. On the Select change label page, perform the following actions:

    • To not use a change label, click Do not assign the files to a change label.

    • To use a change label, click Assign files to following change label. Then click ... and select the desired changed labels.

  14. Click Next.

  15. On the Transferring files page, once the files have been successfully transferred to the database, click Next.

  16. On the Wizard complete page, click Finish.

To add the HTML application to the database

  1. Start the Designer program.

  2. Navigate to Base data | Security settings | HTML applications.

  3. Select the Object | New menu item to add a new item.

  4. Enter a display name and the CCC/<your HTML application name> path.

Related topics