Tips & Tricks - Passing an object as Parameter

Creators,

Here is a quick tip to make your life a little easier when you define parameters

Have a look at the onPress configuration below:

data: =@ctx.datasources.customerData
item: 
  type: component.list-item
  options:
    title: =@ctx.current.item.company_name
    subtitle: =@ctx.current.item.first_name & ' ' & @ctx.current.item.last_name
    leftElement: 
      element: avatar
      text: =@ctx.current.item.state
    onPress: 
      type: action.go-to
      options:
        linkTo: display-customer
        parameters:
          id: =@ctx.current.item.id
          first_name: =@ctx.current.item.first_name
          last_name: =@ctx.current.item.last_name
          company_name: =@ctx.current.item.company_name
          address: =@ctx.current.item.address
          city: =@ctx.current.item.city
          county: =@ctx.current.item.county
          state: =@ctx.current.item.state
          zip: =@ctx.current.item.zip
          phone1: =@ctx.current.item.phone1
          phone2: =@ctx.current.item.phone2
          email: =@ctx.current.item.email
          web: =@ctx.current.item.web
          region: =@ctx.current.item.region
          customer_type: =@ctx.current.item.customer_type
          logo: =@ctx.current.item.logo

In this example, each field is defined as a parameter, creating lots of repetition.

Here is an easier way to achieve the same result with less lines of YAML:

data: =@ctx.datasources.customerData
item: 
  type: component.list-item
  options:
    title: =@ctx.current.item.company_name
    subtitle: =@ctx.current.item.first_name & ' ' & @ctx.current.item.last_name
    leftElement: 
      element: avatar
      text: =@ctx.current.item.state
    onPress: 
      type: action.go-to
      options:
        linkTo: display-customer
        parameters:
          customer: =@ctx.current.item

The cool thing is IntelliSense will be available while configuring the display-customer
jig.

Let me know if you have any questions.

r

6 Likes