Skip to main content

Dynamic Views Swift 5.0

Dynamic Views are used in the SDK to define and create SwiftUI screens like the Start (Dashboard) and Profile tab. The structure of these dynamic created views are defines via a JSON file.

The Start and Profile tab of the iOS Sample App:

Start (Dashboard)Profile
SammpleApp DashboardSammpleApp Profile
## JSON Configuration

The description of a Dynamic View is done via a JSON file. The file must contains two elements configuration and widgets.

{
"configuration": {
...
},
"widgets": [
...
]
}

Configuration

The configuration element use the image to display as a background for a Dynamic View. The style element can be either "scroll" or "list".

  • "scrool" all widgets are displayed in a vertical scroll view from top to bottom.
  • "list" all widgets are displayed in a list view which can be group using a Section Widget
ParameterTypeRequiredExample
imageString?no"Dashboard/teaser"
styleString?no"scroll" or "list"
paddingMargins?no[ 30, 16 ], { "bottom": 4 }
## Widgets

The widgets are defined as an array of "widgets" in the JSON Configuration file. Currently the following widget types are supported:

User Widgets

The User Widgets are used to represent App specific UI elements and actions the App can respond to. The hosting app can return requested UI elements to display. Each widget send an action to the hosting App when the user taps on it.

### SDK Action Widgets

The SDK Action Widgets are special widgets build into the SDK. These widgets are self contained and implements a predefined action to trigger, if the use taps on it.

## Widget Reference

Each Widget has three fixed parameters.

ParameterTypeRequiredExample
idStringyes"1"
typeStringyes"text"
paddingMargins?no[ 30, 16 ], { "bottom": 4 }

The id parameter is a String which must be unique for any siblings in a group of widget definitions. The type parameter must be one of the Widget types defined below. The padding parameter describes the margin around the widget.

User Widgets

### Text

Widget to display text.

ParameterTypeExample
idString"1"
typeString"text"
textString"Sample.Dashboard.text"
textColorString?"label" (semantic color)
textStyleString?"title" (semantic textStyle)
showDisclosureBool?true
### Image

Widget to display an image.

ParameterTypeExample
idString"1"
typeString"image"
`imageString"Sample.Dashboard.image"
### Button

Widget to display a button.

ParameterTypeExample
idString"1"
typeString"button"
textString"Sample.Dashboard.text"
forgroundColorString?"label" (semantic color)
backgroundColor String?"systemBackground" (semantic textStyle)
### Information

Widget to display an optional image on the left side of an informational text.

ParameterTypeExample
idString"1"
typeString"information"
textString"Sample.Dashboard.Information.text"
imageSourceString?"Sample.Dashboard.Information.image"
hideableBooleantrue
### Toggle

Widget to display an text on the left side of an toggle button.

ParameterTypeExample
idString"1"
typeString"toggle"
textString"Profile.showOnboarding"
keyString"io.snabble.sample.showOnboarding"
### Section

The Section Widget help to group widgets in section.

ParameterTypeExample
idString"1"
typeString"section"
headerString"Profile.header"
items[Widget]Contains an array of child widgets
### MultiValue

Widget to store a value for a key in the UserDefaults system.

ParameterTypeExample
idString"io.snabble.environment"
typeString"multiValue"
textString"Profile.environment"
"values"[(id,text)]An array of tuples where the id is assigned to the multiValue id.

The following JSON MultiValue definition:

{
"type": "multiValue",
"id": "io.snabble.environment",
"text": "Profile.environment",
"values" = [
{
"id": "io.snabble.environment.testing",
"text": "Profile.Environment.testing"
},
{
"id": "io.snabble.environment.staging",
"text": "Profile.Environment.staging"
},
{
"id": "io.snabble.environment.production",
"text": "Profile.Environment.production"
}
]
}

Is rendered as a Dynamic View widget to switch the server environment:

ProfileEnvironment Selection
EnvironmentEnvironment Selection

In the example above the UserDefaults would contain a key/value pair like:

"io.snabble.environment" = "io.snabble.environment.staging"

## SDK Action Widgets

the SDK Action Widgets are special widgets build into the SDK. These widget are self contained and implements a predefined action to trigger if the user taps on it.

### Location Permission

Widget to ask the user to grant for location permissions. After the user has approved access the widget will disapear.

ParameterTypeExample
idString"1"
typeString"snabble.locationPermission"
### Start Shopping

If the user has entered a shop, a tap on the Start Shopping button will start the scanner.

ParameterTypeExample
idString"1"
typeString"snabble.startShopping"
### All Stores

The widget navigates to the Shop Finder view where all shops are listed. The user can select a specific item of the list and the Shop Detail view with a map, shop description and opening hours is displayed.

ParameterTypeExample
idString"1"
typeString"snabble.allStores"
### Connect Wifi

Widget to ask the user to grant access to a local Wifi network.

ParameterTypeExample
idString"1"
typeString"snabble.connectWifi"
### Customer Card

Widget to show a customer card.

ParameterTypeExample
idString"1"
typeString"snabble.customerCard"
### Last Purchases

Widget to display one or two of the recent purchases. If the user taps on a recipe preview item, the detail view for that receipt is displayed.

ParameterTypeExample
idString"1"
typeString"snabble.lastPurchases"
### Developer Mode

Widget to display the developer options.

ParameterTypeExample
idString"io.snabble.developerMode"
typeString"developerMode"
items[Widget]Contains an array of child widgets

The SampleApp defines the following JSON in the Profile.json file:

{
"type": "developerMode",
"id": "io.snabble.developerMode",
"items": [
{
"type": "multiValue",
"id": "io.snabble.environment",
"text": "Profile.environment",
"values": [
{
"id": "io.snabble.environment.testing",
"text": "Profile.Environment.testing"
},
{
"id": "io.snabble.environment.staging",
"text": "Profile.Environment.staging"
},
{
"id": "io.snabble.environment.production",
"text": "Profile.Environment.production"
}
]
},
{
"type": "button",
"id": "Profile.resetAppID",
"text": "Profile.resetAppID",
"key": "io.snabble.resetAppID"
},
{
"type": "button",
"id": "Profile.resetClientID",
"text": "Profile.resetClientID",
"key": "io.snabble.resetClientID"
}
]
}

The code above is rendered as a Dynamic View:

DeveloperMode widget
Developer Mode
### Version

Widget to display the current version and to switch on developer mode. After tapping 5 times on the version text a dialog appears to enable developer mode.

The SDK ask the hosting app for a base64 decoded string with the following call: var password = Asset.localizedString(forKey: "SnabbelDeveloperPassword"). The hosting app can provide a app specific password to enable developer mode. If the hosting app return nil the default password Snabble is used to enable developer mode.

ParameterTypeExample
idString"1"
typeString"version"

See also: Developer Mode

Example

JSON Example of SnabbleSampleApp file Dashboard.json to describe the Start tap (Dashboard) as a Dynamic View.

{
"configuration": {
"image": "Dashboard/teaser",
"style": "scroll",
"padding": [ 30, 16 ]
},
"widgets": [
{
"type": "image",
"id": "1",
"image": "Dashboard/image",
"padding": {
"bottom": 16
}
},
{
"type": "text",
"id": "2",
"text": "Dashboard.title",
"textColor": "accent",
"textStyle": "title",
"padding": {
"bottom": 4
}
},
{
"type": "text",
"id": "3",
"text": "Dashboard.text",
"padding": {
"bottom": 32
}
},
{
"type": "snabble.locationPermission",
"id": "4",
},
{
"type": "snabble.startShopping",
"id": "5",
},
{
"type": "snabble.allStores",
"id": "6",
"padding": {
"bottom": 24
}
},
{
"type": "snabble.connectWifi",
"id": "7",
"padding": {
"bottom": 16
}
},
{
"type": "snabble.customerCard",
"id": "8",
"projectId": "snabble-sdk-demo-beem8n",
"padding": {
"bottom": 32
}
},
{
"type": "snabble.lastPurchases",
"id": "11",
"projectId": "snabble-sdk-demo-beem8n"
}
]
}

Interactions

Interactions are passed to the app via the widget ID and an optional element ID. The widget id is always the id from the configuration. For example, an element id is Snabble.Dashboard.Purchases.more, this string identifies the "More" button on the Previous Purchase widget as an action. For example, it can also be just a string like 12345, which in the case of the widget ID from Purchases is the id of a receipt.