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
    }
  }
}

---