What’s new in Mobile Services App Development Tools 1907

In case you are still wondering what exactly is “Mobile Services App  Development Tools” ? Well, let me share some insights on this –  

in SAP Web IDE (full Stack) there is now a dedicated extension (aka plugin) for creating and developing Mobile development kit and SAP Mobile Cards based applications along with Mobile Backend Tools that provides capabilities enabling you to quickly build an mobile enabled OData service that constitutes your mobile back-end service for mobile applications.  

Here is help documentation for more details.  

The main focus of 1907 release are –  

• Support bindings in ToolbarItems
• Support Headers for CallFunction
• Support CallFunction for Target in Collection Properties
• Support ComplexType and CallFunction/CallAction
• Support OnlineOptions and OfflineOptions for Service
• Support UploadStream & DownloadStream action
• MDK Template supports Style LESS file
• Support Query Option/Readlink Builder
• Support Workspace Buttons in MDK Perspective
• Support “Control” properties for all Extensions
• Add annotation editor for Mobile Backend Tools extension

Support bindings in ToolbarItems

The following properties of ToolbarItem should support Rules, Binding, TargetPath, DynamicTargetPath, Global: 

• Caption
• Image
• SystemItem
• Visible
• Enabled
• Clickable
• Width
• ItemType

Support Headers for CallFunction

Headers are now supported in CallFunction action and are being passed to the OData Service. 

 Headers are already supported in CreateEntity, UpdateEntity, etc. 

 Headers should be in structure of Map{String, Map{String, String} or String}. The parameter values are resolved from the current context

{     
'Header1': {         
'Parameter1': String, 
'Parameter2': String, 
 },     

'Header2': {        
'Parameter1': String, 
'Parameter2': String, 
 }, 

'Header3': String 
} 

Example:

{
  "ActionResult": {
    "_Name": "results"
  },
  "ActivityIndicatorText": "Assign to Warehouse Order...",
  "OnSuccess": "/WM_Open_WT/Actions/Navigation/Nav2DetailsWT.action",
  "ShowActivityIndicator": true,
  "Headers": {
    "If-Match": "{@odata.etag}"
  },
  "Target": {
    "Function": {
      "Name": "AssignWarehouseOrder",
      "Parameters": {
        "Warehouse": "{Warehouse}",
        "WarehouseOrder": "{WarehouseOrder}"
      }
    },
    "Service": "/WM_Open_WT/Services/Warehouse_Order_Task.service"
  },
  "_Type": "Action.Type.ODataService.CallFunction"
}

Support CallFunction for Target in Collection Properties

in complex type, we now support call function as target for below properties: 

• pickeritems in listpicker , objectcell list picker formcell control 
• segements in segment formcell 
• sorter formcell control 

Support ComplexType and CallFunction/CallAction

You can now able to consume OData services that utilize complex OData types. This includes binding to complex type fields as well as setting complex types in CRUD operations.  

Example: Assuming your current context’s binding-data is as follows: 

{   
"EmployeeID": "12345", 
"EmployeeName": "Product A", 
"Address": {
  "City": "CityA",    
  "Street": {       
     "StreetName": "StreetB",       
     "HouseNo": "1"
            } 
           } 

"Roles": [{        
  "RoleName": "Role A", 
  "RoleFunction": "Func A"     
  }, 
  { 
  "RoleName": "Role B",  
  "RoleFunction": "Func B" 
  } 
]} 

You can bind these properties in your metadata: 

"Title": "{EmployeeName}", 
"Subhead": "{Address/City}", 
"Description": "{Address/Street/StreetName}"

You can also bind property of an item in an array by using number in the binding path: 

 "Title": "{Roles/0/RoleName}

Support OnlineOptions and OfflineOptions for Service

You can now specify CSDL options for the offline OData by adding OfflineOptions to service metadata. 

Offline Options 

Additional options for the service if OfflineEnabled is set to true 

“OfflineOptions”: { 
  “CSDLOptions”: [ 
“disableNameValidation”, 
“ignoreAllAnnotations”, 
“ignoreAllReferences”, 
“ignoreEdmAnnotations”, 
“ignoreExternalReferences”, 
“ignoreInternalReferences”, 
“ignoreStandardReferences”, 
“ignoreUndefinedTerms”, 
“ignoreXmlAnnotations”, 
“processMixedVersions”, 
“resolveUndefinedTerms”, 
“retainOriginalText”, 
“retainResolvedText”, 
“traceParsingOfElements”, 
“warnAboutUndefinedTerms” 
] 
}

Online Options 

Additional options for the service if OfflineEnabled is set to false 

{   
   "DestinationName":"com.sap.sam.swa"    
"OfflineEnabled" : false, "OfflineEnable 
   "LanguageURLParam":"sap-language", 
   "OnlineOptions":{   
      "ServiceOptions":{   
         "avoidInPaths":"test", 
         "cacheMetadata":false, 
         "checkQueries":false, 
         "checkResults":false, 
         "checkVersion":false, 
         "dataFormat":0, 
         "dataVersion":0, 
         "databaseOnly":false, 
         "fixMissingEmptyLists":false, 
         "fixMissingNullValues":false, 
         "logErrors":false, 
         "logWarnings":false, 
         "pingAccept":"test", 
         "pingMethod":"test", 
         "pingResource":"test", 
         "requiresToken":"test", 
         "requiresType":false, 
         "supportsAlias":false, 
         "supportsBatch":false, 
         "supportsBind":false, 
         "supportsDelta":false, 
         "supportsNext":false, 
         "supportsPatch":false, 
         "supportsUnbind":false 
      }, 
      "CSDLOptions":[   
         "defaultVariableScale", 
         "disableNameValidation", 
         "ignoreAllAnnotations", 
         "ignoreAllReferences", 
         "ignoreEdmAnnotations", 
         "ignoreExternalReferences", 
         "ignoreInternalReferences", 
         "ignoreStandardReferences", 
         "ignoreUndefinedTerms", 
         "ignoreXmlAnnotations", 
         "processMixedVersions", 
         "resolveUndefinedTerms", 
         "retainOriginalText", 
         "retainResolvedText", 
         "traceParsingOfElements", 
         "warnAboutUndefinedTerms" 
      ] 
   } 
}  

Support UploadStream & DownloadStream action

We are now adding two more actions UploadStream & DownloadStream as part of existing Media action support.  

UploadStream

{ 
 "_Type": "Action.Type.ODataService.UploadStream", 
    "Target": { 
      "EntitySet": (String, Required), 
      "Service": (String, Required), 
       oneOf: [{ 
        "ReadLink": (String: Required)  
        }, 
        { 
        "QueryOptions": (String: Required)  
        } 
      ] 
    }, 
    "Properties": { 
      StreamPropertyName:(Media TargetPath or RuleReference) 
    } 
    "Headers": (Map{String, Map{String, String}}, Optional) 
} 

DowloadStream

{ 
    "_Type": "Action.Type.ODataService.DownloadStream", 
    "Target": { 
      "EntitySet": (String, Required), 
      "Service": (String, Required), 
      oneOf: [{ 
         "ReadLink": (String: Required)  
        }, 
        { 
         "QueryOptions": (String: Required)  
        } 
      ] 
    }, 
   "Properties": [ 
     StreamPropertyName 
    ] 
    "Headers": (Map{String, Map{String, String}}, Optional) 
} 

MDK Template supports Style LESS file

Till last release, we provided styling using SDKStyles.nss (for iOS SDK controls only) and Styles.css (NativeScript layer of the control e.g. in a page, action bar will be stylable but not Object cell)). We also supported LESS at the client level and that provided the ability to have the single style file in your project.  You couldmanually create this file in the Editor but we are enhancing the Editor to default the styles to LESS in this release. 

With this LESS styling, NativeScript, Android SDK & iOS SDK controls are supported (you dont need to provide CSS and NSS anymore)  

For existing projects, no changes. still .css in styles, .nss in sdkstyles. 

For new project, there is only .less file listed in styles, sdkstyles is not in UI. 

Support Query Option/Readlink Builder

In MDK, you now have a query option/readlink builder so you could input parameters more efficiently.  

Support Workspace Buttons in MDK Perspective

There are 4 workspace buttons in MDK Development perspective,   

• collapse all projects  
• unlink workspace from editor 
• don’t show hidden files 
• open resources 

Support “Control” properties for all Extensions

All the extensions now support “Control” property. Control usually point to the ts file name under the app/extensions/<Module>/controls folder 

{
  "Extension": {
    "Module": "MyExtensionFolder",
    "Control": "MyExtensionFileName",
    "Class": "MyExtensionClass",
    "ExtensionProperties": {
      "Prop1": {
        "Value": "My Sample Extension Display Value"
      }
    }
  }
}

Add annotation editor for Mobile Backend Tools extension

To allow developers to easily add annotations at every level without the need to edit the XML file directly, we have added an annotation editor. 

Annotation context menu 

In the detail table, annotations are displayed like properties, except that they have a different encode. For each annotation row, a button is displayed to open a context menu that provide more annotation-related feature. 

This context menu contains 3 items: 

1. View in source: the modeler will switch to source code view, and the selection will be selected. 
2. Delete: the annotation will be deleted. 
3. Edit: an annotation editing dialog will pop out. 

Annotation editing dialog 

An annotation may have values or other annotations, so annotation may have a tree structure internally. The annotation editing dialog visualizes the tree and allows the user to edit it. 

The tree is displayed in a tree table. Every row can be an annotation or value item. If the value is of Boolean type, the value is displayed as a checkbox for the user to choose true or false. For other data types, they are displayed as text. If the user input is in an invalid format, the text will go back to previous state and an error message will be shown. 

 The 3 buttons over the tree table allows the user to 

1. Add item. A drop-down menu allows the user to choose adding annotation or value. 
2. Delete item. Delete the selected annotation or value. 
3. Edit. the value in a multi-line text editor. This editor is also able to validate the input.

These 3 buttons are enabled or disabled based on the user selection. 

Let me know if you have any questions/feedback on MDK topic.

References:

• New features in MDK client 3.2

New to Mobile Development Kit development?

• Follow these tutorials to get started with MDK.
• Enhance your MDK app with some advanced functionalities
• Create an MDK Online App
• Handle Error Archive in an MDK App

Regards

Jitendra Kansal

Product Management, SAP Cloud Platform Mobile Services
SAP SE

P.S. Many thanks to our dev colleagues to share inputs in writing up this post.