Links

Examples

Increasing the size of buttons

In this example, we are illustrating how to increase the size of buttons on an app, view, and component-level respectively.

App level

In the app's config.json file we can define a custom theme which, optionally, extends an existing theme. In this case, we are extending the predefined light theme, and configure some attributes of the button component.
config.json
{
"name": "custom-light-theme",
"extends": ["light"],
"components": {
"button": {
"font-size": 22,
"icon-size": 24,
"content-padding": 26
}
}
}
We then set this custom theme as the app-level theme when the app loads. When this theme is active, all buttons within the app will have these attributes, unless they are overridden on a view or component level per the below.
main.js
function init() {
// initialize any data here that should be available when the view is shown
journey.config.setTheme("custom-light-theme");
}

View level

Within a view's config file we can further customize a theme that we have defined in config.json. In this example, we are further increasing the content-padding for buttons in the "Inventory" view. This customization will only apply to buttons within the "Inventory" view.
inventory.config.json
{
"name": "custom-light-theme",
"components": {
"button": {
"content-padding": 32
}
}
}

Component level

We can customize specific components by defining a theme and applying that theme to components using the theme attribute:
config.json
{
"name": "large-buttons",
"components": {
"button": {
"font-size": 22,
"icon-size": 24,
"content-padding": 26
}
}
}
inventory.view.xml
<button label="Hello World" theme="large-buttons" on-press="helloWorld()" validate="false" />
Alternatively, we can configure these attributes on a component directly (this is useful if you want to override attributes for a single component):
inventory.view.xml
<button label="Hello World" font-size="24" icon-size="26" content-padding="28" on-press="helloWorld()" validate="false" />

Enabling or disabling object-table column filters

config.json
{
"name": "custom-light-theme",
"components": {
"object-table": {
"default-filter": true
}
}
}