Skip to Content
Product Information
Author's profile photo Jitendra Kansal

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

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

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

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 

Property  Values  Required  Comments 
CSDLOptions  Array    Check below JSON metadata 
“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 

Property  Values  Required  Comments 
ServiceOptions  Object   

Check below JSON metadata 

 

CSDLOptions  Array   

Check below JSON metadata 

 

 

{   
   "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 to Mobile Development Kit development?

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.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jason Thomas
      Jason Thomas

      Annotation editing dialog - How can i add an item. Iam not able to do that

      Regards

      Shain

      RWC 2019

      Author's profile photo John Miller
      John Miller

      good article

      Author's profile photo Michael Haydock
      Michael Haydock

      Jitendra Kumar Kansal could you please explain the difference with doing MDK development in the standard WebIDE view versus the MDK WebIDE view? We have seen features move over to the standard view over the years, so just wondering which one we should be using, or how to make that decision if it is a "depends" type answer. Thanks

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author
      Once you add the "Mobile Services App  Development Tools”" extension in WebIDE, it adds a new MDK perspective in WebIDE which is mainly used for MDK based development.
      In MDK perspective, you'll find only MDK related options e.g. if you'll need to create a project using MDK template, just right click on workspace and select one of existing templates whereas in standard perspective, you will see other info as well.
      In MDK perspective, it's quite easy to add any metadata like add a page or add an action etc, just right click on the respective folder and select.
       MDK perspective makes easier to work with MDK related development in WebIDE.