Customizing next-generation Sterling Order Management (OMS) UIs can feel daunting -- especially if you're new to the Angular + SCSS stack or you're primarily a backend developer. But what if you could go from mock-up to working UI code in minutes?

With IBM Bob, you can.

Bob translates UI mock-ups directly into ready-to-run Angular UI components, letting you focus on business logic instead of boilerplate UI code.

This guide shows you how quickly you can bring a new Customer Identity section into the Call Center order creation page -- with almost no UI expertise required.

The task

Your goal:

Add a Customer Identity header on the Call Center order creation screen so a CSR always has instant customer context.

You're handed an UX mock-up (as shown below) and asked to implement it using the Call Center's new UI extension model.

Did you know?

The next-generation OMS UIs -- including Call Center -- ship with UI Extension Hooks at the top and bottom of every component providing plenty of customization areas.

These are:

• A way to customize UI
• Similar to backend APIs user exits
• Designed to keep your custom code separate from out of the box code
• The foundation for low-TCO upgrades and long-term maintainability

To view these UI extension hooks in the application, press CTRL + D on any Call Center page. You can do restore normal screen mode by pressing SHIFT + CTRL +D.

Step 1 - Create an empty component for the UI extension hook

Note: As a pre-requisite to this section, you are required to know how to extract the Call Center source code and setup the create order page for code customizations by following the documentation steps.

The Call Center customization documentation provides the steps to add code in any of these UI extension hooks. By following those steps, this is what is instructed to perform:

• Under the following directory /call-center-order/packages/create-order/src-custom/app, create this folder structure "features/custom/customer-identity".
• Under the new folder, create this file customer-identity.component.html, and add this content:

<p>Customer identity component code goes here</p>

• Under the new folder, create this file customer-identity.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'customer-identity',
  templateUrl: './customer-identity.component.html',
  styleUrls: ['./customer-identity.component.scss']
})
export class CustomerIdentityComponent {

  ngOnInit(): void {
    
  }
}

• Under the new folder, create this file customer-identity.component.scss, an empty file is fine.
• Under the new folder, create this file customer-identity.service.ts, add this content which is exactly as in the documentation:

import { Injectable, OnDestroy } from "@angular/core";
import { BucNotificationModel, BucNotificationService } from '@buc/common-components';
import { ExtensionService } from "@buc/common-components";

@Injectable()

export class CustomerIdentityService extends ExtensionService {

    userInputs = { name: ''}

    constructor(  public bucNotificationService: BucNotificationService) {
        super();
    }

    createInput() {
        // check only the necessary properties for update
        if (this.parentContext.name !== this.userInputs.name) {
            this.userInputs.name = this.parentContext.name;
        }
        this.userInputObs$.next(this.userInputs);
    }

    handleOutput() {
        this.userOutputs = {
            changesEmitted: this.onChangesEmitted.bind(this)
        }
        this.userOutputObs$.next(this.userOutputs);
    }

    onChangesEmitted(event: any) {
        this.bucNotificationService.send([
            new BucNotificationModel({
                statusType: 'success',
                statusContent: `Message emitted from dynamic component: ${event.message}`
            })
        ]);
    }

}

• Edit the /call-center-order/packages/create-order/src-custom/app/app-customization.impl.ts to be like below:

import { CustomerIdentityComponent } from "./features/custom/customer-identity/customer-identity.component";
import { CustomerIdentityService } from "./features/custom/customer-identity/customer-identity.service";
import { ExtensionModule } from "@buc/common-components";

export class AppCustomizationImpl {
    static readonly components = [CustomerIdentityComponent];

    static readonly providers = [ CustomerIdentityService ];

    static readonly imports = [
        ExtensionModule.forRoot( [{
            id: 'create_order_co_top',
            component: CustomerIdentityComponent,
            service: CustomerIdentityService
        }])
    ];

}

At the end of the steps, you have effectively defined the custom component placeholder, and should see this screen:

Step 2 - Bring the Component to Life with IBM Bob

This is where the magic happens.

1. Open IBM Bob.
2. Drag and drop the UX mock-up into the prompt area while holding Shift key.
3. Use a simple instruction like: "Generate the CustomerIdentityComponent based on this mock-up".
4. Bob will automatically create a list of tasks such as:
   • Interpret the mock-up's layout
   • Generate the Angular HTML template
   • Produce component logic in the .ts file
   • Build scss styles aligned with the UX spec
5. Review and Accept each change as prompted by Bob

Reload the page...and your new UI is live.

I have also included a short video for the entire step 2 for you to see IBM Bob in action.

Conclusion

Bob removes the need for UI boilerplate by automatically translating visual designs into clean Angular code, allowing developers to move from idea to working UI in just minutes—turning what is typically a four‑hour task into less than ten minutes of work. This lets you focus on business logic instead of layout, CSS, spacing, or markup, while extension hooks ensure your custom code stays isolated and upgrade‑safe, reducing long‑term effort and TCO. Best of all, Bob is friendly for backend developers, enabling anyone—even without deep Angular or SCSS expertise—to build UI with confidence.