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

[JerryWang]

You might be interested about how to build Value Help in other SAP UI technology as well:

• How to build value help in ABAP Webdynpro


• How to build value help in CRM WebClient UI


• How to build value help using SAPUI5 Smart field

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

1. Create a new OVS based on Customer BO:

Remove the automatically generated query node in controller tab. Create a new SADL query, and select InternalID as query parameter.

Choose another field BusinessPartnerFormattedName as search parameter as well. Select "Basic Find" checkbox to enable free text search.

Now you should see these three fields in data tab which will be used to bind to search parameter field in UI later.

Manually specify this new created SADL query in all automatically generated event handler. By default those event handler uses the query node automatically created during the OVS creation, this is the reason why you have to replace with your own SADL query instead.

2. In Data tab, bind these two fields accordingly. Root/Items/InternalID will be passed back to OVS consumer.

Bind these two fields to Outport parameter as displayed below.

3. Since the work in Data tab and controller tab are done, the left task is to draw search parameter field in Designer tab.

Drag two Input field from Toolbox and bind them to the query parameter accordingly:

Finish default set mapping and FindForm modelling:

4. All development relevant on OVS component itself is done. Now it is ready to consume it in another UI component.

This is my BO which contains a field pointing to a reference customer ID:

Bind this BO field in UI and specify the UI field with DisplayType = ObjectValueSelector.

Assign the created OVS component to this field:

Test in runtime

Click F4 to open value help:

Select a given item in search result and the customer ID will be passed back to consumer UI:

You can also use search field to search by Customer Name: