Step by step to create OBN button which navigates from standard UI to custom UI

[JerryWang]

My series of Cloud Application Studio Blogs

• How to detect EditMode in an Embedded Component


• Step by step to enable your custom BO with attachment upload functionality


• Step by step to create an Adobe Print form in Cloud application Studio


• How to render PDF which displays picture from the image attachment of your custom BO


• How to get current logged on business user’s employee information and assigned organization unit via...


• How to implement dynamic access control based on custom BO using OWL


• How to make Code List Restriction work when control field and restricted field are not on the same B...


• How to implement custom number range using custom business object


• Two approaches to create Code List in Cloud Studio


• Create Dynamic Code List via Custom Business Object Association


• Step by step to develop Thing Type based navigation and BO Object based navigation


• Put Extension field into embedded component and make it visible in Standard UI


• One possible cause that embedded component fails to display in UI


• Step by step to create HTML Mashup and make it visible in UI


• Step by step to enable Text Collection for your custom BO


• Automatically send an Email notification to line manager via Workflow in Account application


• Step by step to create Object Value Selector in Cloud Application Studio


• Two approaches to fill an UI field with dedicated logic implemented in Cloud Application Studio


• How to execute BO action on multiple selected BO instances in AdvancedListPane


• How to add custom validation logic on mobile phone field in Contact TI


• An example about how I analyze why some OBN button does not work


• Step by step to create OBN button which navigates from standard UI to custom UI

Requirement

Create a new OBN button in the toolbar of a standard UI, for example the item table of Service Request TI.

Once this button is clicked, a new custom QC view will be displayed. In this new QC view, the original Service Request ID will be passed during navigation and displayed. See below example, I press the button in TI page of Service Request 3629, and this ID is also displayed in my custom QC page.

Here below are detail steps:

1. Create a new Port Type Package with below parameter:

2. Create a new custom QC page view:

Create a new unbound data field "TicketHeaderNodeID" to hold the Service Request node ID passed from Standard Service Request TI.

Create a new event handler to read the Service Request BO instance data by using "TicketHeaderNodeID" as parameter:

Create a new OBN inport by following the settings below:

Assign the created event handler to the "OnFire" property of this inport:

3. In Service Request TI, create a new OBN button in extensibility explorer:

Since in previous step I have already assigned a custom operation "JerryOBN" to BO Service Request, so now it is available to use from drop down list of "Select Operation":

Bind the nodeid attribute to /Root/UUID, so in the runtime, the current Service Request node ID will be passed to my custom QC view with the help of Port Type Package created in first step.

Apply the OBN setting and now you can see the generated change transaction where OBN button is ready to use.

4. Create a new Work center and a new work center view, assign the QC to that new work center view:

And assign the work center view to test user:

After that the OBN navigation from Service Request TI to custom QC view works as expected.