Skip to content

Tabs

Description

Display a list details with tabs or without tabs based on configuration.

Attributes

  • tile:tabs || tab-view
  • title
  • variant: fullWidth | scrollable | standard. By Default is standard
  • viewVariant: Provide a "tab" string. If not provide doesn't show the tabs
  • classes: classes for the tabs, table
  • styles: styles for the wikiButton, icon, table
  • indicatorColor: Indicate the tab indicatorColor
  • textColor: Indicate the tab textColor
  • connect: [Connection object]
  • standard fields
  • reduce: [Connection Field related configuration]
  • data: [Array of Objects] title: Show the tab title body: [Array of Objects] Data to be display in the list format value: Provide a value to be display and also allow template string within it. IF kind is wiki then provide a wiki Id[From Admin -> Wiki] within it. kind: icon | text | wiki. Display list content based it. text: Provide a text to be display for a kind wiki. styles: styles for each table cell *classes: classes for each table cell

Example1

{
 "tile": "tab-view",
 "variant": "standard",
 "viewVariant": "tab",
 "textColor": "#FA7300",
 "indicatorColor": "#FE7300",
 "styles": {
   "table": {
     "fontSize": "1rem",
     "color": "#FE7300",
     "width": "100%"
   },
   "icon": {
     "fontSize": "30px"
   }
 },
 "data": [
   {
     "title": "Sleep",
     "body": [
       [
         {
           "value": "far wemori-shield",
           "kind": "icon"
         },
         {
           "value": "12894944-0819-4700-b78c-72f88053d7cf",
           "kind": "wiki",
           "text": "Click here for sleep details"
         },
         {
           "value": "Sleep Details",
           "kind": "text",
           "styles": {
             "textAlign": "right"
           }
         }
       ],
       [
         {
           "value": "far wemori-shield",
           "kind": "icon"
         },
         {
           "value": "12894944-0819-4700-b78c-72f88053d7cf",
           "kind": "wiki",
           "text": "Click here for sleep details"
         },
         {
           "value": "Sleep Details",
           "kind": "text",
           "styles": {
             "textAlign": "right"
           }
         }
       ]
     ]
   }
 ]
}

Example2

Example with template string.

 {
   "tile": "tab-view",
   "variant": "standard",
   "viewVariant": "tab",
   "textColor": "#FA7300",
   "indicatorColor": "#FE7300",
   "styles": {
      "table": {
         "fontSize": "1rem",
         "color": "#FE7300",
         "width": "100%"
      },
      "icon": {
         "fontSize": "30px"
      }
   },
   "data": [
      {
         "title": "System Details",
         "body": [
            [
               {
                  "value": "far wemori-shield",
                  "kind": "icon"
               },
               {
                  "value": "12894944-0819-4700-b78c-72f88053d7cf",
                  "kind": "wiki",
                  "text": "Click here for system details"
               },
               {
                  "value": "{values.donations}k Dontaions",
                  "kind": "text",
                  "styles": {
                     "textAlign": "right"
                  }
               }
            ],
            [
               {
                  "value": "far wemori-shield",
                  "kind": "icon"
               },
               {
                  "value": "12894944-0819-4700-b78c-72f88053d7cf",
                  "kind": "wiki",
                  "text": "Click here for system details"
               },
               {
                  "value": "{values.protect}k Protection",
                  "kind": "text",
                  "styles": {
                     "textAlign": "right"
                  }
               }
            ]
         ]
      }
   ]
}

Example3

Provide a dataAttach object as page root object within an layout to getting the data which contain the valid dispatch query.

{
   "dataAttach": "current user, given tracker [system-totals] on user"
}