In case you are puzzled about what the Other Extensions are, here is a
pre-read blog that will help clarify.
Other Fiori Elements Overview Page (OVP) extensions including "Custom Navigation Parameters" "Custom Navigation Target", "Modify startup parameters" will be discussed in detail in this blog. As a prerequisite import this
project into your SAP Web IDE full stack.
Custom Navigation Parameters
This is supported starting
SAP UI5 version 1.48 This provides an option to also include custom parameters in case of intent based navigation from OVP Cards. An exception is the case of static link list cards, where this is supported only with UI5 version 1.60.
As discussed in the pre-read blog, the custom.controller.js already has the required function onCustomParams generated. We need to enhance this further along with card level settings which points to the correct function. A sample card setting is as follows, this is already done for the given
project:
"card00": {
"model": "ovpdemo",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{card00_title}}",
"entitySet": "ProductSet",
"listType": "condensed",
"addODataSelect": false,
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
"customParams" : "productDetail"
}
}
Now for the onCustomParams(sCustomParams) function. This function will accept only one argument name of the custom parameter function as a string and return the function as defined in the custom controller.
onCustomParams: function (sCustomParams) {
if (sCustomParams === "productDetail") {
return this.productDetail;
}
}
And now comes the function with detailed implementation for productDetails for header click, assuming the target needs to consider only the products which are available in stock.
Custom Parameter Function accepts only one argument which contains url parameters passed on to the next application. Application developer can use this information to make the custom parameters change based on url parameters being passed to the target application.
Custom Parameter property eg. “Availability_status” should be present in the entity set of the card. It returns an array of object’s containing custom parameters. Each object should have following properties
i) “path”(Mandatory) – property name
ii) “operator”(Mandatory) – operator to apply. Possible values are EQ,NE,LE,GE,LT,GT,BT,CP.
iii) “value1”(Mandatory) – first value on which operator is applied. This is compulsory for any operator
iv) “value2”(Mandatory) – Second value not compulsory. Use only in case of range operators like “BT”. If empty define this value as null.
v) “sign”(Mandatory) – Sign value defines whether current selection should be included or excluded from the filter. For Including use “I” and for Excluding use “E”
productDetail: function (oNavigateParams, oSelectionVariantParams) {
//Valid only for header navigation where oNavigateParams is am empty object
if (Object.keys(oNavigateParams).length === 0) {
var aCustomSelectionVariant = [];
/*Adding a custom navigation parameter to ensure only products in stock are shown in the target app*/
var oCustomSelectionVariant = {
path: "Availability_Status",
operator: "EQ",
value1: "In Stock",
value2: null,
sign: "I"
};
aCustomSelectionVariant.push(oCustomSelectionVariant);
/*You will need the following if you wish to ignore any select options to be ignored during navigation, with ignoreEmptyString as true, this will be removed from the Selection Variant. In this sample we will ignore the Country Code filter applied.
*/
var aSelectOptions = oSelectionVariantParams.getSelectOptionsPropertyNames();
if (aSelectOptions.indexOf("CountryCode") != -1) {
var aSupplierFilter = oSelectionVariantParams.getSelectOption("CountryCode");
aSupplierFilter[0].Low = "";
}
var oSupplierName = {
path: "CountryCode",
operator: "EQ",
value1: "",
value2: null,
sign: "I"
};
aCustomSelectionVariant.push(oSupplierName);
/*oFilter1 = oSelectionVariantParams.getSelectOption("CountryCode");
The above line can be used if you wish to fetch filter values for further processing starting SAPUI5 1.54*/
return {
selectionVariant: aCustomSelectionVariant,
ignoreEmptyString: true
};
}
}
I have also added code to demonstrate how to ignore certain select values, by setting the value to null. The same can also be used to remove all the empty strings, null and undefined values in Parameters/Selection Variant via custom parameters during intent based navigation
To test this in full, you will need to configure to respective target app. For now we will test this in Web IDE using debug tools. You can set a break point within the productDetail to check the selectionVariant that is created. And another in doIntentBasedNavigation function of Card.controller.js, where you can see the exact oNavArguments.params that are passed to the target application.
In this case your oNavArguments.params will contain the SelectOptions as follows
"SelectOptions":
[
{
"PropertyName":"Availability_Status",
"Ranges":
[
{
"Sign":"I",
"Option":"EQ",
"Low":"In Stock",
"High":null
}
]
}
]
Custom Navigation Targets
Let us see the details of the function doCustomNavigation. Custom Navigation Targets help define different targets for line items within a given card based on the property values. In this case we will add a custom navigation to the first line item within the Products List app.
It takes the following input parameters:
- Card ID: Type string : The card id as defined in manifest.
- Context: Type Object : Defines what context came with click of card
- Navigation Entry: Type Object : Denotes if any standard navigation was defined via annotations for that card and context
- The method doCustomNavigation should return an object that is similar to input Navigation Entry and can contain following attributes (all of type String):
- type : Mandatory : Possible values are "com.sap.vocabularies.UI.v1.DataFieldWithUrl" and "com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation".
- semanticObject : Required when type is DataFieldForIntentBasedNavigation
- action : Required when type is DataFieldForIntentBasedNavigation
- url : Required when type is DataFieldWithUrl
- label : Optional
- Note that, you need to return an object from method doCustomNavigation only for cases where custom targets are required for a particular set of input parameters , else return nothing.
Let us use the sample code provided in the generated code with minimal adjustments to suit the current project as follows:
doCustomNavigation: function (sCardId, oContext, oNavigationEntry) {
var oCustomNavigationEntry;
var oEntity = oContext && oContext.sPath && oContext.getProperty && oContext.getProperty(oContext.sPath);
if (sCardId === "card01" && oEntity && oEntity.SalesOrderID === "0500000001") {
oCustomNavigationEntry = {};
oCustomNavigationEntry.type = "com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation";
oCustomNavigationEntry.semanticObject = "Action";
oCustomNavigationEntry.action = "toappnavsample";
oCustomNavigationEntry.url = ""; //Only required when type is DataFieldWithUrl
oCustomNavigationEntry.label = ""; //Optional
}
return oCustomNavigationEntry;
}
Since we have used a dummy semanticObject and action, this too can be tested in debug tools. You can set a break point within the doCustomNavigation to check the oCustomNavigationEntry that is created. And another in doIntentBasedNavigation function of Card.controller.js, where you can see the exact oNavArguments.target.semanticObject and oNavArguments.target.action that are now different from the ones defined in the annotation for the card.
Modify startup parameters
This breakout available starting SAPUI5 version 1.58, supports scenarios where a source app provides parameters which sometimes have to be modified in the target app (OVP) in order to be applied to the SmartFilterBar. For example, the source app provides the parameter FiscalYear and FiscalPeriod, but the target app understands only the parameter FiscalYearPeriod. Therefore the 2 parameters of the source app need to be combined to the parameter FiscalYearPeriod in the target app before applying the parameters to the SmartFilterBar. The parameters can also be added, deleted or renamed.
Let us modify the sample code for modifyStartupExtension to suit the data in the sample project:
modifyStartupExtension: function (oCustomSelectionVariant) {
oCustomSelectionVariant.addSelectOption("CountryCode", "I", "EQ", "DE");
},
This leads to a default filter added at start of the OVP app with Country as DE - Germany
Hope this helps clarify use cases and usage of Custom Navigation Parameters, Custom Navigation Targets and Modify Startup Parameters extensions. Next we will learn about adding
custom cards.
