Adding new routes to existing applications

You can customize applications by adding new routes to the applications. You use the schematics command to create the packages for each route and update the files within the application.

1. Open a terminal and go to the Order Hub code directory.
   • For cloud customers, the default location is devtoolkit_docker/orderhub-code.
2. Go to the module that you want to customize. For example, if you want to update the order module, then go to the buc-app-order folder. For example:

   cd devtoolkit_docker/orderhub-code/buc-app-order

3. Open the app-config.json that is in the module that you want to customize and add the new routes that you want to include in the application.
4. Run the following schematics command. This command creates the packages for each new route and update the necessary files within the application.

   ng g @buc/schematics:add-app-to-existing-monorepo --app-config-json app-config.json --module-short-name short-name-for-the-module --prefix selector-prefix

   The schematic supports the following options.

   --app--config-json

   This option is required. Use the existing app-config.json file in the module that you want to customize.

   --module-short-name

   The short name for the module. If the module name has dashes, then the short name is the text after the last dash. For example, if the module name is buc-app-settings, the module short name is settings.

   --prefix

   The HTML selector to use for the generated components. The default is buc.

   --is-custom-app

   Indicates whether or not the current repository is a custom application. Use true to indicate that the current repository is a custom application, or use false for an existing Order Hub application. The default is false.

   For example,

   ng g @buc/schematics:add-app-to-existing-monorepo --app-config-json app-config.json --module-short-name order --prefix buc

5. Test the customized routes locally by opening the overrides.json file in the module and modifying the object for the new route to be "use Prod":false.
   For example,

       "custom-route": {
         "useProd": false
       }

6. If needed, create a new menu. For more information, see Testing new applications or routes in Order Hub.
7. To see the changes on the local server, run yarn start-app.
8. Create the features.json file.
   1. Log in to Order Hub.
   2. Switch to the customization tenant where you tested your customizations.
   3. Go to Settings > Customization.
   4. Select the custom item that launches your route.
   5. If you want to deploy customizations to the customization tenant where you tested your customizations, ensure that you select Hosted by IBM and you clear Local development environment. Otherwise, the tenant will continue to connect to your local server.
   6. In the Relative URL field, add the relative path to your route /<module-name>/<route-name>. Start with a forward slash (/). You do not need to include a trailing slash. For example, /buc-app-order/create-order.
   7. Save all changes.
   8. Copy the JSON from the Feature json field in the UI. Paste or merge the JSON as an array element in the features.json file that is in the module's root directory. The JSON from the UI resembles the following sample.

      {
          "featureId": "custom-[Id]", // must be unique
          "state": "ACTIVE",
          "sequence": 0,
          "title": "[Title to display for the custom application]",
          "iconName": "website-20",
          "link": "/[module-name]/[path to new route]",
          "path": "/[module-name]/[path to new route]",
          "hidden": true,
          "allowedRoles": [   //the roles that can access this customization
            "Fulfillment Manager",
            "Tenant Administrator"
          ],
          "description": [
            {
              "locale": "en_US",
              "language": "en",
              "title": "Title to display for the custom feature"
            }
          ],
          "type": "IFRAME"
        }

      Depending on the contents in the features.json, you might need to surround the code with square brackets [] to add as an array element.
   9. For deployment, change the link to have the absolute path as in the following example.

      "link": https://static.omsbusinessusercontrols.ibm.com/buc-app-order/custom-route/order/home

9. Open the <order_hub_code_directory>/<module-name>/package-customization.json file. In the routes object, add every route in the module that is customized.
   For example,

   {
     "repositoryName": "buc-app-order",
     "customizationContextRoot": "/order-management-customization",
     "routes": {
       "custom-route": {
         "type": "code",
         "custom": true
       }
     }
   }
   

10. Open the ../<module-name>/packages/<route-name>/package.json file for each new customized route. Add a "build-merge" script "build-merged-<environment>": "yarn build --deploy-url=<customizationfolder>/<module-name>/<route-name>/". For example,

    "build-merged-dev": "yarn build --deploy-url=/buc-app-customization/T3R4fagafd45aadfaffasf/buc-app-order/custom-route/"