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 ABSL

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 BO

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

Recently one partner asked me about this question. Suppose I have a custom BO with one Date field “CloseDate”, and one indicator field “IsOverDue”.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cT0qtTZZ-1598527168411)(https://upload-images.jianshu.io/upload_images/2085791-5a9459410cb7f3f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

There is an action “OverDueCheckMass” defined with the simple logic that if current date < Close Date, then I consider the order as Overdue and vice versa.

The source code of this action implementation:

This action is marked as Mass-enabled.

Requirement is: in the table implemented by AdvancedListPane in UI Designer, if several rows are selected by Ctrl+Click ( Or Shift + Click ), once the button “Overdue check” is pressed, the action must be performed on those selected rows.

Take the below screenshot as example, the first and fourth row are selected, it is expected that after OverDue check is executed, IsOverDue indicator for the first row is determined as Yes.

Here below is details step how this requirement could be fulfilled.

(1) Specify the List SelectOption property as “multiSelectWithLeadSelection”.

Create a Data List in DataModel tab:

(2) Create an event handler with type BOAction. For instance Binding attribute, bind it to the Data List created in previous step. Choose “multiple” as Action Type and bind this event handler to BO Action OverDueCheckMass.

By default when you create a new event handler, Action Type is always set as single by default. Don’t worry, once you bind this action to the Instance Binding which points to a Data List in your Data Model and the BO action implementation is Mass-Enabled, once you click bind button, this Action Type will change into multiple automatically.

After these two steps are done, select the first and fourth row and press the OverDue check button – it works as expected

How it works under the hood

Suppose you have first pressed Ctrl key and then select the first and fourth row, how UI5 framework reacts to this event?

Set a breakpoint on function OnClick of file TablePointerExtension.js, and there is one attribute ctrlKey in the native HTML event object which indicates whether the Ctrl key is pressed in current event.

With this indicator, UI5 framework could react accordingly:

Since I have selected the SelectOption of my list as multiSelect, so UI5 uses an array to store the selected rows’ indexes:

Now when you click Overdue Check button with the state that first and fourth rows are selected, the breakpoint set in method SendAsyncPostRequest in file Request.js will be triggered. Check what exactly the data will be sent to backend by inspecting variable mParameters: