This is the final continuation of our beautification journey we started in our previous blog parts I and II.
Beautification Step 6: Adding a Visual Business Map
We navigate back to the floorplan configuration. We now want to add the map displaying supplier address. (For displaying it, the user will need a local Visual Business installation.) In the overview page schema, we select our new 50:50 section and add a "VisBiz Component".
In the attributes panel, we enter a suitable configuration ID (ideally using our namespace) which does not exist yet (hence the error message). We maintain the UIBB title as "Supplier Address". We save and enter the new configuration via the "Configure UIBB" button.
We encounter the usual prompts for creating new workbench objects and enter what is necessary. (As before, we use the "Local Objects" i.e. package "$TMP" in our example.) Next we are prompted for a feeder class which has to be "CL_FPM_SADL_CRUD_VISBIZ", and for the parameters we maintain "BOPF Business Object" as "Business Entity Source" and "/BOBF/EPM_BUSINESS_PARTNER~ADDRESS" as "Business Entity". This way we define that our map shall pick the geo-coordinates from the business partner address node, and by selecting "LONGITUDE" as "X Field" and "LATITUDE" as "Y Field" from the value help, we define from which node attributes the coordinates shall be read.
We confirm the popup with "OK" and enter "300px" as "Height" in the General Settings - this fits nicely to the neighboring form.
Then we save and go back to the floorplan configuration. Let's think: The map knows from which node (=metadata) it has to fetch the geo-coordinates - but which instance (=data)? Of course the user wants to see the address of the supplier we display and which is assigned to the product she or he is maintaining. Technically speaking, the BOPF association connecting the supplier and its address needs to be processed at runtime. And in fact the definition of the data flow is missing for the map. It was nicely created for the business partner UIBB by the wizard, but we added the Visual Business UIBB manually later. So we need to define its data flow manually as well, but this is a cool thing: It is pure configuration again. We enter the "Wire Schema" in the floorplan configuration, and there we press the "Graphical Wire Editor" button.
We confirm security popup's if necessary. Now we see a graphical visualization of the data flow! Observe that there are several connected groups of UIBBs; for the Search and Filter page and for the main page. We find our VisBiz UIBB in a repository of "Available UIBBs" on the left hand side. We drag it into the main area and drag a connection from (the outport of) the business partner form to our VisBiz UIBB.
A popup appears where we select "CL_FPM_SADL_CRUD_CONNECTOR" as "Connector Class" from the drop down list box. This class will process the association at runtime, and we happily observe that the unique association "ADDRESS" is automatically assigned - here there is simply no choice. We confirm the popup, press "Done" and return to the standard view of the configuration editor. In the very end, we want to add a maximize button for the map. This is so easy! In the toolbar schema, we select our "Supplier Address" UIBB and press "Add Toolbar Element". in the popup, we simply choose the maximize button.
Check later in the runtime how you can nicely toggle to a maximized display with it. We now save the configuration and - done! We are now ready to reap the - beautiful - fruits of our work!
Results and Summary
We restart our application - the fun starts! We have a beautiful search page which we can personalize, we can save searches, we can paste multiple values from other files, we can select multiple values from the value help, it also shows responsive design for the search groups if we change the browser window width, and, and, and...
Alternatively we can use the filter page for a powerful and user defined drill-down.
In any case we can make use of the powerful table services (sorting, filtering, aggregation, personalization,...) of the results lists. When we navigate to the object maintenance page we enjoy full transactional comfort.
We can enter edit mode and reassign the supplier which automatically processes the underlying BOPF association, and we observe in the UI how the supplier attributes are immediately refreshed - including its address on the map. We can rearrange the UIBBs on the main page by drag and drop according to our personal preferences, and this gets persisted by personalization, and also our form reacts responsive to the browser window width. (If you did not follow all steps you can also experience this with the similar FPM Application Configuration /BOBF/EPM_FPM_SADL_PD which is provided by SAP.)
All this functionality was gained by a wizard-driven UI generation plus some configurative fine-tuning afterwards. And how much code did we need for it? Not a single line! We didn't even need to speak ABAP (let alone JavaScript or something else) in order to achieve the result. In that sense we get quite a lot of functionality "for free". In fact we only touched some parts of the available functionality - if our data model is more complex, we can even furnish the maintenance UI with additional sub-overview and edit pages, and we can furnish it also with other UIBB types such as lists, trees, charts, carousels etc. - and even that in the same codeless manner, just exploiting the power of generic feeder classes and configurable wiring.
So this was a real example of development efficiency in UI development. And please note that on top of such an application, you can deploy the powerful enhancement and adaptation machinery (see e.g. here) - another big and proven strength of FPM. We hope this journey was comprehensible and enjoyable also for non-FPM-experts, and that you got an impression of some of the features and functions of the FPM.
Thanks for your interest!
- SAP Managed Tags:
