List view

listView: {
  listView: {
    section: 'test123',
    fields: {
      fieldA: { label: 'testFieldA' },
      fieldB: { label: 'testFieldB' }
    },
    dataProvider: function(args) {
      args.response.success({
        data: [
          { // Row 1
            fieldA: 'dataFieldA1',
            fieldB: 'dataFieldB1'
          },
          { // Row 2
            fieldA: 'dataFieldA2',
            fieldB: 'dataFieldB2'            
          }
        ]
      });
    }
  }
}

Detail view

 
detailView: {
  tabs: {
    tabA: {
      title: 'tabA',
      fields: [{
        fieldA: { label: 'Field A' },
        fieldB: { label: 'Field B' }
      }],
      dataProvider: function(args) {
        args.response.success({
          data: {
            fieldA: 'fieldAData',
            fieldB: 'fieldBData'
          }
        })
      }
    },
    ...
  }
}

 
Detail view w/ list view

 
detailView: {
  tabs: {
    tabA: {
      title: 'tabA',
      listView: {
        section: 'test123',
        fields: {
          fieldA: { label: 'testFieldA' },
          fieldB: { label: 'testFieldB' }
        },
        dataProvider: function(args) {
          args.response.success({
            data: [
              { // Row 1
                fieldA: 'dataFieldA1',
                fieldB: 'dataFieldB1'
              },
              { // Row 2
                fieldA: 'dataFieldA2',
                fieldB: 'dataFieldB2'            
              }
            ]
          });
        }
      }
    },
    ...
  }

}

 
List view w/ add action ('createForm')

listView: {
  listView: {
    section: 'test123',
    actions: {
      add: {
        label: 'Add new item',
        createForm: {
          title: 'add new item',
          fields: {
            fieldA: { label: 'Field A', validation: { required: true }},
            fieldB: { label: 'Field B' },
            selectField: {
              label: 'Select field',
              select: function(args) {
                args.response.success({
                  data: [
                    { id: 1, description: 'item1' },
                    { id: 2, description: 'item2' }
                  ]
                });
              }
            }
          }
        },
        messages: {
          notification: function() { return 'notification message'; }
        },
        action: function(args) {
          args.response.success({ _custom: { jobId: 1234 }})
        },
        notification: {
          poll: function(args) {
            args.complete({
              data: {
                testFieldA: 'dataFieldANew',
                testFieldB: 'dataFieldBNew'
              }
            });
          }
        }
      }
    },
    fields: {
      fieldA: { label: 'testFieldA' },
      fieldB: { label: 'testFieldB' }
    },
    dataProvider: function(args) {
      args.response.success({
        data: [
          { // Row 1
            fieldA: 'dataFieldA1',
            fieldB: 'dataFieldB1'
          },
          { // Row 2
            fieldA: 'dataFieldA2',
            fieldB: 'dataFieldB2'            
          }
        ]
      });
    }
  }
}

 
Detail view with a tab filter

 
clusters: {
  detailView: {
    tabFilter: function(args) {
      tabFilter: function(args) {
        // Get the hypervisor type from the cluster object
        var hypervisorType = args.context.clusters[0]...;
 
        if (hypervisorType != ‘VMWare’) {
          // Whatever tab IDs you return will be hidden
          return [‘nexusVSwitch’];
        }
 
        return []; // Show all tabs
      }
    },
    ...
  }
}
  • No labels