App Components¶

Application.app¶

The Application.app file is a JSON file that contains the Mobile Development Kit app definition.

This file contains the core properties of your app such as the main landing page, handlers for various application-level events (OnLaunch, OnResume and more).

You can find the definition of Application.app in the API Reference for Application.app.

Actions¶

The Actions folder contains JSON files (.action) called actions that are defined for your app. Actions are configurable event handlers that can perform tasks in your application. You can choose from predefined action types to quickly and easily create actions that would otherwise need to be defined manually using JavaScript.

For more details see Actions.

Extensions¶

The Extensions folder contains custom Mobile Development Kit extension TypeScript and JavaScript files. Extensions allow you to create a complete custom control for your app e.g. Maps, Signature Capture, and more.

For more details see Extensions.

Global¶

The Globals folder contains the global constants that can be referenced in metadata definitions.

'I18n'¶

The i18n folder contains the localization properties files that can be referenced in metadata definitions using the Internationalization Formatter.

For more details see Internationalization Formatter and Type Formatter and 'I18n' Files.

Images¶

The Images folder contains the image resources that will be packaged to the application bundle and can be referenced in the controls.

Pages¶

The Pages folder contains the metadata definitions for you application's pages. After you have created your new Mobile Development Kit project, a Main.page file is automatically created under the Pages folder.

For more details see Create Pages.

Rules¶

The Rules folder contains JavaScript files that are called rules. Rules allow you to execute custom JavaScript codes that allows you to do many things: You can retrieve images from a database, perform math, edit text, perform logic, create lists, create variables or implement functions. Rules implement business logic for the execution and managing of data.

For more details see Create Rules.

Services¶

The Services folder contains definition to your back-end service mapped as destination in the SAP Mobile Services.

Each service is a .service file that defines an OData Service destination. The DestinationName property is used as the suffix to the ServerUrl URL when queries are made using this service.

A service must be provided to execute any OData operations. It tells the OData API which service that you are targeting.

A service can run in an online or offline mode.

To configure a service for online mode, set the OfflineEnabled parameter in the .service file to false. In this case, the Mobile Development Kit client communicates directly with the OData service. You can configure your apps to perform reads and updates to synchronize the client data.

To configure a service for offline mode, set the OfflineEnabled parameter in the .service file to true. In this case, the Mobile Development Kit client communicates with the OData service via the offline OData provider. You can configure your apps to initialize a data store and synchronize it with the OData service.

For details of the Service definition, please see the * Service API reference.

Styles¶

The Styles folder contains the LESS files for your application styling customization.

Mobile Development Kit support styling with LESS (which stands for Leaner Style Sheets) to support multi-platforms styling capability. With Less style file, you only need to define your styles in 1 format and it will be usable in all platforms.

For more details please see Styling.

Web¶

The Web folder contains:

App_Resources folder where you can put in web specific app resource files, which will be consumed by your web application using the res:// protocol in the metadata definition, e.g. images, documents, and more.
config.json file where you can configure web specific settings for your web client application:
- DefaultAppLanguage - default application language code. Accepts the ISO 639-1 two letter code, for example, en for English.
- ApplicationDisplayName - It's used for index.html title, if it’s empty, ApplicationName defined in the Application.app will be used.
- headerWhiteList - It’s an array of string, used to define additional headers that should be allowed to be forwarded by the SAP Business Technology Platform destination to the back end. This is only needed for Neo environment. For security reasons not all HTTP headers are forwarded in Neo environment, for list of headers that are allowlisted by default, see here for more details.
- Security - If the users need to use custom domain in xs-security.json, it has to be configured under this property. You can configure this property according to the template generated in the config.json.
Example:
```
{
  "DefaultAppLanguage": "en",
  "ApplicationDisplayName": "My App",
  "headerWhiteList": ["APIKey"],
  "Security": {
    "oauth2-configuration": {
        "redirect-uris": ["https://<application_hostname>.<custom_domain>/**"]
    }
  }
}
```

Last update: January 17, 2023