Defines the layout-macro. For more information, see Layout Macros.

Note

Currently, we do not support returning multiple components from a layout-macro. If you want to have multiple components, for example multiple section components, you have to return a full layout.

You can define multiple layout-macro-def definitions within a single *.layout.bxb file or separate each layout-macro-def in its own *.layout.bxb file. These files must be placed in the appropriate locale-specific resources folder.

Note

You cannot have a macro with the same ID if the macro is defined in the same resource folder. For example, if you have a macro with the ID "this-test-macro" in the bixby-mobile-en-US target, you cannot have another different macro with the same name in that target.

However, if the macro's target is in a higher level resource folder, the more specific target will override the more general target. For example, say you have a macro in bixby-mobile-en and another macro in bixby-mobile-en-US, both with the ID "this-test-macro". The macro in the bixby-mobile-en-US target will render for the bixby-mobile-en-US target, but the bixby-mobile-en macro will render for the bixby-mobile-en-GB target.

Macros with the same ID but in different targets (for example, bixby-mobile-ko-KR and bixby-mobile-en-US) are allowed and are encouraged, especially when localizing or handling development for multiple devices.

Note

Be aware of which components you are adding to your layouts and layout macros, because different components are available under different views. If you call a layout or layout macro in a view and that layout specifies a component that the view does not support, Bixby Developer Studio will throw an error. Similarly, you should consider which layout macros are being called within a layout itself. The same layout macro invoked in one component might not be valid if used within a different component, as the list of supported child components could differ.

You can read the Designing with Bixby Views design guide and the Building Views (UI) developer guide to check if your layout is using the correct components for that moment and that view.

Examples

These examples are pulled from the example.SpaceResorts sample capsule.

// resources/base/layouts/HabitatPod/Summary.layout.bxb
layout-macro-def (habitat-pod-summary) {
  params {
    param (habitatPod) {
      type (HabitatPod)
      min (Required) max (One)
    }
  }
  content {
    cell-card {
      slot2 {
        content {
          primary {
            template ("#{value(habitatPod.name)}")
          }
        }
      }
      slot3 {
        label {
          value ("#{value(habitatPod.price)}")
        }
      }
    }
  }
}

// resources/base/layouts/Order/Details.layout.bxb
layout-macro-def (order-details) {
  params {
    param (order) {
      type (Order)
      min (Required) max (One)
    }
  }
  content {
    section {
      title {template-macro (Details)}
      content {
        input-cell {
          label {
            template-macro (NumberOfAstronauts)
          }
          value {
            template ("[#{value(order.item.numberOfAstronauts)}]")
          }
          on-click {
            intent {
              goal: MakeReservation
              route: UpdateOrder
              route: GetNumberOfAstronauts
            }
          }
        }
        input-cell {
          label { template-macro (Dates)}
          value ("[#{value(order.item.dateInterval)}]")
          on-click {
            intent {
              goal: MakeReservation
              route: UpdateOrder
              route: GetDateInterval
            }
          }
        }
        compound-card {
          content {
            single-line {
              text {
                value { template-macro (Package)}
                style (Detail_M_Soft)
              }
            }
            cell-area {
              slot2 {
                content {
                  primary ("[#{value(order.item.pod.name)}]")
                }
              }
              slot3 {
                label {
                  value ("[#{value(order.item.pod.price)}]")
                }
              }
            }
          }
          on-click {
            intent {
              goal: MakeReservation
              route: UpdateOrder
              route: GetPod
            }
          }
        }
      }
    }
  }
}

Bixby Developer Center

References