Skip to main content

Delivering Mobile Apps

 

Applies only to Mobile Apps
OutSystems

Extensibility Configurations JSON Schema

In OutSystems, you can configure, customize your mobile app, as well as use plugins. For that, there is a configuration property that using JSON notation to modify the behavior of an application and for the installation of plugins that let you use some native capabilities of the devices.

This configuration property can be found in the Service Studio, as the Extensibility Configurations property of the module, and has a schema and a set of constraints that must be respected so OutSystems can generate the mobile app package and to avoid unstable behaviors of the application.

Constraints

  1. The JSON schema and key/value pairs must follow the official structure described in this topic;
  2. The first-level key/value pairs are optional and the order isn't relevant;
  3. The developer must write the name of each name/value pair using lower case letters (the JSON is case sensitive);
  4. Must only be specified one resource key in the JSON. All content used in the app (icons, splashscreens, and plugins) must be inside that file;
  5. When specifying the resource file for the app, the resource name must end with ".zip";
  6. The resource file name must be equal to the resource name of the file submitted by the developer;
  7. The specified path for an asset (e.g. the icon or splash screen) in the JSON must be the same as the path inside the resources zip file.

In case some constraint is not respected, OutSystems might not be able to generate the mobile app package or the application behavior could be unstable.

Property Schema

{
    "plugin": {
        // Use only one the following ways to reference a plugin
        "url": "<The url to a public git repository containing your plugin>",
        // or
        "identifier": "<The identifier for your plugin>",
        // or
        "resource": "<The path to the plugin folder inside the resources file zip>",
        // If the plugin requires additional settings
        "variables": [
            {
                "name": "<The attribute name for your plugin variable>",
                "value": "<The attribute value for your plugin variable>"
            },
            /*...if needed indicate more variables...*/
        ]
    },
    "preferences": {
        // Common preferences for iOS and Android, like status bar customization settings
        "global": [
            {
                "name": "<The preference name for your Android/iOS application>",
                "value": "<The preference value for your Android/iOS application>"
            },
            /* ...more global preferences...*/
        ],
        // Just for Android
        "android": [
            {
                "name": "<The preference name for your Android application>",
                "value": "<The preference value for your Android application>"
            },
            /* ...more Android preferences...*/
        ],
        // Just for iOS
        "ios": [
            {
                "name": "<The preference name for your iOS application>",
                "value": "<The preference value for your iOS application>"
            },
            /* ...more iOS preferences...*/
        ]
    },
    "icons": {
        // Just for Android
        "android": [
            {
                "resource": "<The resource path to the icon file for your Android app>",
                "density": "<The density of your Android icon>"
            },
            /* ...(mandatory) indicate all Android icons...*/
        ],
        // Just for iOS
        "ios": [
            {
                "resource": "<The resource path to the icon file for your iOS app>",
                "width": "<The icon width for your iOS app>",
                "height": "<The icon height for your iOS app>"
            },
            /* ...(mandatory) indicate all iOS icons...*/
        ],
    },
    "splashscreens": {
        // Just for Android
        "android": [
            {
                "resource": "<The resource path to the splash screen file for your Android app>",
                "density": "<The density of your Android splashscreen>"
            },
            /* ...(mandatory) indicate all Android splash screens...*/
        ],
        // Just for iOS
        "ios": [
            {
                "resource": "<The resource path to the splashscreen file for your iOS app>",
                "width": "<The splashscreen width for your iOS app>",
                "height": "<The splashscreen height for your iOS app>"
            },
            /* ...(mandatory) indicate all iOS splash screens...*/
        ],
    },
    "resource": "The name of the zip file that contains all the resources you're using"
}

Example

In this example, we are not specifying custom splash screens to show that the name/value pairs presence is optional (only needed if you want to specify custom splash screens).

{
    "plugin": {
        "resource": "/cordova-plugin-contacts",
        "variables": [{
            "name": "DEFAULT_LAT",
            "value": "39.01010101"
        }]
    },
    "preferences": {
        "global": [{
            "name": "orientation",
            "value": "landscape"
        }],
        "android": [{
            "name": "loglevel",
            "value": "verbose"
        }],
        "ios": [{
            "name": "target-device",
            "value": "universal"
        }]
    },
    "icons": {
        "android": [{
            "density": "mdpi",
            "resource": "/icons/android/icon_mdpi.png"
        }
        /* ...remaining Android icons...*/
        ],
        "ios": [{
            "width": "29",
            "height": "29",
            "resource": "/icons/ios/icon_29.png"
        }
        /* ...remaining iOS icons...*/
        ]
    },
    "resource": "resources.zip"
}
  • Was this article helpful?