Skip to main content

Examples

Table​

This shows a table with three columns:

  1. The first column shows a conditional use of Nunjucks to show the name taken from the spec.mesh field if it exists, otherwise it shows the name taken from the metadata field;
  2. the second column shows a reference link (to the owner of the component);
  3. the third column shows a simple description string
- type: table
  path: components
  children:
    - type: string
      label: Name
      value: '{{ spec.mesh.name if spec.mesh.name else metadata.name }}'
      width: 30%
    - type: link
      label: Name
      path: owner
      width: 20%
    - type: string
      label: Description
      path: metadata.description
      width: 50%

Card​

Simple Card​

This shows a card with just a name, version and description

- type: card
  title: General Information
  children:
    - type: container
      children:
        - label: Name
          type: string
          path: name
        - label: Version
          type: string
          path: version
        - label: Description
          type: string
          path: description

New Root inside a Card​

This shows a card where to simplify the definition, a new root is defined. To achieve this behavior, it uses the new_root component to simplify the paths of its children (so that you can write upTime instead of dataContract.SLA.upTime)

- type: card
  title: Data Contract
  children:
    - type: sub_card
      title: SLA
      children:
        - type: container
          children:
            - type: new_root
              path: dataContract.SLA
              children:
                - label: upTime
                  type: string
                  path: upTime
                - label: timeliness
                  type: string
                  path: timeliness
                - label: interval of change
                  type: string
                  path: intervalOfChange
        - label: Terms and Conditions
          type: string
          path: dataContract.termsAndConditions
          colSpan: 4

Complete Example​

This excerpt here, is extracted from the Marketplace component page:

view:
  children:
    - type: grid_list
      children:
        - type: include
          id: marketplace_component_general
        - type: grid_sequence
          path: _componentsByKind
          showWhenExists: components
          showWhen:
            value: '{{ components | some("consumable", true) }}'
            equals: 'true'
          children:
            - type: card
              title: '{{ label }}'
              children:
                - type: table
                  showRowWhen:
                    value: '{{consumable}}'
                    notEquals: false
                  click: showSubcomponent
                  path: components
                  children:
                    - type: string
                      value: '{{ name }}'
                      label: Name
                    - type: string
                      value: '{{ description }}'
                      label: Description
                    - type: string
                      value: '{{ technology }}'
                      label: Technology
        - type: marketplace_tech_card
          configs:
            - buildInfo
            - info
        - type: card
          title: Data Contract
          showWhenExists:
            - dataContract.SLA
            - dataContract.schema[0]
          children:
            - type: sub_card
              title: SLA
              showWhenExists: dataContract.SLA
              children:
                - type: container
                  children:
                    - type: new_root
                      path: dataContract.SLA
                      children:
                        - label: upTime
                          type: string
                          path: upTime
                          showWhenExists: upTime
                        - label: timeliness
                          type: string
                          path: timeliness
                          showWhenExists: timeliness
                        - label: interval of change
                          type: string
                          path: intervalOfChange
                          showWhenExists: intervalOfChange
                - label: Terms and Conditions
                  type: string
                  path: dataContract.termsAndConditions
                  showWhenExists: dataContract.termsAndConditions
                  colSpan: 4
            - type: schema_list
              path: dataContract.schema
              children:
                - type: grid_sequence
                  path: ''
                  children:
                    - type: card
                      title: '{{ name }}'
                      children:
                        - type: table
                          path: columns
                          treeview: children
                          hideEmptyColumns: true
                          children:
                            - type: string
                              path: dataType
                              width: 15%
                              label: Type
                            - type: string
                              path: name
                              width: 30%
                              label: Name
                            - type: string
                              path: description
                              width: 40%
                              label: Description
                            - type: tags
                              path: tags
                              width: 10%
                              label: Tags
                            - type: row_link
                              label: Semantic Link
                              path: _semanticlink
                              align: right
                              width: 5%
                              click: showSemanticLink
                    - type: vspace
        - showWhenExists: dataSharingAgreements
          type: card
          title: Data Sharing Agreement
          children:
            - type: container
              children:
                - type: automatic_fields_list
                  path: dataSharingAgreements
                  defaults:
                    _default:
                      colSpan: '2'
        - type: data_preview
          title: Data Preview

In the example above, we can notice:

  • first of all a grid_list, which contains a list of all the page's cards;
  • then, the first child is an include component, which includes the marketplace_component_general custom view; this shows the general information of the component, without the need to redefine it here.
  • then, we want to display the sub-components of the component, if the component have them, and if at least one of them is consumable. Since the sub-components might be of different kinds, we want to display them grouped by their kind. To achieve this:
    • we use a grid_sequence component, which iterates over the _componentsByKind array. The showWhenExists property makes sure that the card is shown only if the components array is not empty, while the showWhen property makes sure that the card is shown only if at least one of the sub-components is consumable.
    • for each element of _componentsByKind, we define a card with the kind as title, and then a table with all the sub-components of that kind. note that we show the row only if the sub-component is consumable, by using the showRowWhen property.
    • for each component in the table we show the name, description and technology of the sub-component as string components.
    • the table defines a click action to show the sub-component details showSubcomponent.
  • then, we show the marketplace_tech_card custom view, which iterates the buildInfo and the info fields of the component's descriptor; this a custom view that iterates all the sub-fields of the input configs array, and shows them automatically if they comply to the rules.
  • then, we show the Data Contract card, which contains the SLA and the schema of the component, if they exist. We ensure this by using the showWhenExists property. Note that the showWhenExists property checks the conditions with an OR operator, so the card is shown only if the SLA or the schema are defined
    • the SLA is shown as a sub_card, with the title SLA, and then a container where we define all the SLA fields that we want to display. We use the new_root component to simplify the paths of the children, so that we can write upTime instead of dataContract.SLA.upTime. We also use the showWhenExists property to show the field only if it is defined.
    • to show the schema, we need to first wrap it in a schema_list; this is needed since the schema could be a single definition, or an array of schemas: using the schema_list, which converts the dataContract.schema to an array, we can easily iterate over it. We iterate using a grid_sequence, and for each element we define a card with the schema name as title. Then, we define a table with the all the schema columns we want to display (note that the last column is a row_link to show the semantic link of the column, with the showSemanticLink action). The table has the treeview property set to children: this means that if a row element has a children field containing sub-rows, the table will show them as a tree. We also set the hideEmptyColumns property to true, so that the table will not show columns with no data. To add some space between the schemas, we add a final vspace component.
  • then, we show the Data Sharing Agreement card, which contains the data sharing agreements of the component, if they exist. We ensure this by using the showWhenExists property. The data sharing agreements are shown using an automatic_fields_list component, which automatically iterates over the dataSharingAgreements field, and shows all of its fields. By setting the defaults property, we can define default properties for all the fields: in this case we set the colSpan property to 2 for all the fields.
  • finally, we show the Data Preview card, which contains the data preview of the component. This component can't be configured: it checks if the sampleData field is defined, and if it is, it shows the data preview as a table.