Tips & Tricks - Use Placeholders

Empty lists are boring and not very useful to your app users. Unfortunately, this is not always avoidable. Below I am working on an app to manage customers and opportunities. Staring out the app users will not have any customers. With no customers, you certainly cannot have any opportunities.

It does make sense to have widgets on Home Hub for both customers and opportunities, but it will not be useful until the user captures some data.

At this time, the most important thing is for the app user to start capturing customers and to take any guesswork out of the picture. I want to put action under the user’s fingers.

With this approach, your app user has nowhere to go other than add a customer.

Let’s look at the implementation behind the scenes, starting with the customer jig. placeholders is perfect for these scenarios.

placeholders:
  # Use an expression to check if any customer data exist
  - when: =$count(@ctx.datasources.customer) = 0
    title: 'No customers found'
    # Use onPress to navigate to new-customer jig
    onPress:
      type: action.go-to
      options:
        title: Add customer
        linkTo: new-customer

The key here is to use when with an expression that returns true when zero customer records exist, and the onPress part makes the placeholder actionable.

To hide the opportunities widget on Home Hub you can use similar logic, have a look at the snippet below:

widgets:
  - size: 4x2
    jigId: list-customer
  - size: 2x2
    # Only show the opportunity widget when one or more customer records exist
    # Please note only global datatsources can be used in expressions in index
    when: =$count(@ctx.datasources.customer) > 0
    jigId: list-opportunity

Let me know if you have any questions or need further explanation.

5 Likes