Put Extension field into embedded component and make it visible in Standard 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

Requirement

Create extension field , put it to a given embedded component and finally make it visible in standard UI.

1. Create an extension field on Opportunity root node and implement an action to calculate whether the current opportunity is over due:

The check logic for over due is simply based on the comparison between current system date and closed date maintained in opportunity header.

import ABSL;

var current = Context.GetCurrentGlobalDateTime( ).GetDate();

var close = this.SalesForecast.ExpectedProcessingDatePeriod.EndDate;

this.IsOverDue = current.GreaterThan(close);

2. Create a new embedded component OppEC, create two data field and bind them to standard BO field ID and extension field IsOverDue.

Create a checkbox UI element in the embedded component and bind it to ID field.

Create a button in order to execute OverdueCheck action.

Switch to embedded component's controller tab, create an unbound data field OpportunityID, and use it as BOOperation Read's parameter. This unbound data filled will be filled with values passed from inport to be created soon.

Create an inport and declare the parameter bound to OpportunityID.

Assign the created event handler to OnFire attribute of this inport.

Create another event handler overDueCheck and bind the BO action OverdueCheck whose implementation is done by our ABSL code.

3. Add the embedded component to Opportunity TI overview tab,

and bind the parameter defined in standard outport to the parameter declared in my custom inport in embedded component OppEC:

Now we could test in UI: select an opportunity whose close date is yesterday, and click check button:

After that the is Overdue check box is set as selected, meantime we could observe the corresponding roundtrip from Chrome development tool which indicates the due check is done successfully with due indicator marked as X: