This is the continuation of our beautification journey we started in our previous blog.
Beautification Step 4: Fine-Tuning the Attribute Filter
When we start our app we can use the toolbar button to navigate from the search page to a filter page.
This button leads us to a different kind of search page, the "Filter Page". We also find a results list here (for which we can do a similar beautification as we did for the search results list - but we won't describe this here again), but instead of the search fields we just have a list of attributes. Why is this called a "filter"? Well, now observe what happens if we start selecting some attributes from the "Attributes" list, e.g. "Product Category" and "Company Name" (which is the supplier, but we have not yet fine-tuned the configuration). We observe that the product distribution into the values of these attribute is shown, and if we select a value (e.g. product category "Software") then this selection (can also be multi-selection) is applied as filter to the succeeding attributes and the results.
If there exist more distinct values than a configured package size of retrieved values (here the package size is 9), then an info icon in the value table header appears, and below the last visible value there is a link "More lines" which can be clicked to retrieve another package. Using the column header menus, it is also possible to sort the values or counters, or to start a filter dialog.
This can be very useful if you want to analyze the structure of your data. Play around with it for a couple of minutes, and you will quickly notice how the EPM test data were generated...
What is the point of having an attribute filter as an alternative to the powerful search UIBB? Well, these two UIBBs simply address different use cases. If you know in advance what you are searching for - that is the classical search use case for a Search UIBB - just enter the relevant criteria. However, if you just want to analyze your (possibly huge) data set and look for some conspicuity, and then drill down into conspicuous areas, possibly up to individual object maintenance - then the attribute filter is the right choice. So it makes perfectly sense to offer these tow alternative entries into an object maintenance UI.
But also the attribute filter configuration needs to be fine-tuned, therefore we enter the configuration. In the "General Settings", we see row count and package size. It is nice to have the package size one less than the row count: This way the first (potential) "More lines" link will be visible without scrolling. We leave the settings as they are for the time being.
It does not make too much sense to filter by extremely fragmented values; in particular, there is little sense in filtering by (alternative) keys. So we first remove the "PRODUCT_ID" from the configuration by selecting it in the Attribute Filter Schema and pressing the "Delete" button.
Similarly, we remove duplicated supplier ID "BP_ID_BO", the language "LANGUAGE_CODE_PR", the image URL "PRODUCT_PIC_URL", and the user and time stamp fields, etc. We may rearrange the order of the attributes, and maintain suitable texts such as "Supplier" for "COMPANY_NAME_BO".
Looks nice now!
Are we done? Not yet - we would like to show you that the attribute filter can not only be used for record counters, but also for other measures. Though it does not make too much sense to calculate sums of it, we would like to use the product prices to demonstrate this. But just imagine we would build a UI for purchase orders - then it would very well make sense analyzing some total amount distributions!
Excursus: Similar to our chart measures, we can define alternative counter fields, and the most prominent use cases in business scenarios are certainly amounts with currency references. But note that the currency reference should be constant as totals are computed, and it does not make sense to calculate totals across different currencies.
Now we go back to the attribute filter configuration and we open the "General Settings" panel. Here we select the "PRICE" attribute from the value help of the aggregation count attribute, and we accept the automatically filled text. We also enlarge the table width a bit to 350px. Moreover, we uncheck the "Display in Panel" checkbox.
We would rather like to assign our own panel title "Filter Product Prices" in the enveloping OVP configuration, so we save and navigate back.
Now check, how the attribute filter looks like.
This was easily reconfigured! Now we are done.
Excursus: If you like this new FPM UIBB so that you always want to start the application with it instead of the standard search page - no problem: Just edit the application configuration and enter the page id of the filter page "FPM_SADL_FILTER" (which you meet in the navigation panel of the OVP floorplan configuration) for the parameter "FPM_START_PAGE_ID" in the "General" section of the "Application Parameters" panel.
The same could be achieved temporarily by adding "&fpm_start_page_id=FPM_SADL_FILTER" to the URL.
Beautification Step 5: Fine-Tuning the Forms
We now would like to polish the forms on the main page which we meet when we click the links in one the results lists. Though we are happy that the product ID is automatically incorporated in the page header, the first view is not so impressive.
But don't forget that the system has generated this UI purely from the business object's metadata - without knowing, which fields we like to see and how, and which we don't. Anyway, let's fix it. So we enter the configuration editor for the product header form. We open the preview and the repository as we can do most of our business by drag and drop between these areas.
We would like to rebuild the form without groups, so first we remove the entire groups: We drag the group title and drop it simply in the repository area. This is the same as marking it and pressing the delete button. If you don't believe it, you can press the "Undo" button in the FLUID header toolbar and then do it the other way. :smile:
We remove the other group as well. Then we drag the following fields from the repository and drop them, one below the other, into the "A" column of the preview area: PRODUCT_ID, NAME_PR, DESCRIPTION_PR, TYPE_CODE, CATEGORY, MEASURE_UNIT, WEIGHT_MEASURE, PRICE, WIDTH, DEPTH and HEIGHT. This way the system formats the labels by default from column "A" to "C", and the fields from "D" to "H". For the latter five fields we reshape their widths extension such they end in column "G" as we want to add the currency and quantity references. We select some of these fields again in the preview, we open the attributes panel if necessary, and there we rename some label texts: "Name", "Width", "Depth" and "Height" for NAME_PR, WIDTH, DEPTH and HEIGHT, respectively. Next we drag "WEIGHT_UNIT" from the repository into the preview and we drop it behind the "WEIGHT_MEASURE" ("Weight") fields as it is its quantity reference.
Since there is only one column space left, the system automatically skips the label of the reference field - very nice! Similarly, we put "CURRENCY_CODE" behind "PRICE" ("Product Unit Price") and three times we arrange "DIM_UNIT" behind "Width", "Depth" and "Height". Three times? Isn't it bad style, to have the same field editable multiple times on the UI, so that it might be not transparent which input finally wins? Indeed it is! And therefore we change the "Display Type" in the attributes panel for the latter two assignments to "Text View".
By the way, if you get lost with the currency and quantity references, i.e if you are not sure which reference field has to be chosen for a given amount or quantity field, there are very helpful quickviews in the repository - for both directions!
Finally we add the "SUPPLIER_ID" on the left hand side and change its "Label Text" to "Supplier ID". After all, our UI should enable the user to reassign the product's supplier! We keep the supplier ID selected and as "FPM Event ID onEnter" we select "FPM_REFRESH" from the drop-down list box on the very bottom of the attributes panel.
This makes sure that changing the supplier can be immediately flushed to the server, and this will have some effect to the supplier UIBBs at runtime. (We recommend to do the same for all other input fields.)
On the right hand side, we place the product image "PRODUCT_PIC_URL". We change the "Display Type" to "Image" and the "Label Visibility" to "Is not Visible" and drag it such that it is placed from column "J" to "O" and from row "2" to "11". Here we go.
One last thing: In the general settings panel, we enter "350" as "Minimal Column Width (px)".
This enables a responsive design feature to the two column form: When the browser window width is decreased such that each column gets less then 350px, then the form automatically switches to a one column layout. Try it later at runtime - it's cool!
Now we want to rearrange the supplier block on the main page: We want to put the supplier data in a section with two UIBBs in one row. We select our only main page in the navigation panel of the floorplan configuration, and then we copy the configuration ID of the supplier form into our clipboard, remove the form and add a new section.
For the section, we select "Two column: 50:50" as "Layout Type".
And then we use the "Add UIBB" button to add a form and paste the configuration ID, so that our supplier form is restored in the new section. We should also maintain the UIBB title as "Supplier". Then we navigate into the form in order to fine-tune it.
In the supplier form, we first select the group header on the left hand side of the preview and remove it. Then we drag the group header from the right hand side and move it to the left hand side. In the attributes panel, we change the group header "Text" to "Supplier Address".
In the General Settings panel, we switch the "Layout Type" to "8/1" in order to get it all in one column. We also remove some technical fields and rebuild the address, similar as before. Finally we set the "Label Text" of "WEB_ADDRESS_AD" to "Web Address" and switch the "Display Type" to "Link to URL".
We don't want to change the supplier data in our product maintenance UI. In order to avoid unnecessary locking, we open the "Feeder Class Parameters" popup of the general settings and mark the "Display Only" checkbox.
Finally we insert the "COMPANY_NAME" on top of the supplier address group and change the label text to "Supplier Name", and we drag the "LEGAL_FORM" behind the name in column "H" and with "Label Visibility" as "Is Not Visible". We change their "Display Types" to "Text View" and select "Header 1" as "Text View Design. We use the "Add Line" Button to add some extra spacing.
We are done with our forms! We continue here with the final part of our beautification journey.
- SAP Managed Tags:
1 Comment
