GroupLists

GroupList são modelos utilizados para criar telas que possuem uma listagem de um determinado componente.

GroupLists possuem três tipos modelos de templates:

  • Template Menu: utilizado para criar menus básicos e pré-configurados;

  • Template de Listagem: utilizado para apresentar informações em uma estrutura de listagem;

  • Template Carousel: utilizado para apresentar imagens em formato de carrossel.

Para construção de menus nas apps é possível utilizar os templates básicos de menu do GroupList. É possível também combinar diferentes templates dos vários modelos de objetos permitindo a criação de menus mais elaborados.

Um template de carrossel pode ser utilizado, por exemplo, para disponibilizar banners no topo do menu enquanto um template de menu em caixa pode ser utilizado para criar as opções de menu. Um terceiro template de listagem pode ser utilizado para disponibilizar outros tipos de opção.

Exemplos de templates GroupList

O código para as telas de exemplo estão no final desta seção.

Propriedade
Descrição

template

Nome do template a ser utilizada para o agrupamento

title

Nome do agrupamento exibido na barra de agrupamento (exibida apenas se "hasGroupBy" for true)

background

Customiza a cor do background da barra de agrupamento. Se nulo ou vazio, a cor padrão é cinza (#CCCCCC).

color

Customiza a cor do texto e ícones da barra de agrupamento. Se nulo ou vazio, a cor padrão é preto (#000000).

templateMarginTop

Define a margem superior do template (valor default: 16px)

actions

Lista de ações para o agrupamento

itemList

Lista de itens do agrupamento.

itemList.(x) publishLevel

Define a visibilidade do item dentro do App. 1: Público - disponível para todos (valor padrão)

2: Beta - disponível apenas para usuários do app marcados como beta na plataforma.

4: Oculto - Função que deve ser omitida para qualquer usuário

itemList.(x) background

Customiza a cor do background do item da lista. Se nulo ou vazio, a cor padrão é branco (#FFF), mas no carrossel a cor padrão é transparente.

itemList.(x) color

Customiza a cor da fonte dos ícones de menu do item da lista. Se nulo ou vazio, os ícones assumem a cor cinza (#444).

itemList.(x) details

Define o texto do item da lista com um array de elementos

itemList.(x) details. order

Define a posição do conteúdo dentro do item da lista. Em alguns templates, a posição “0” é utilizada para definir imagens ou ícones que aparecem em posições específicas da templates.

itemList.(x)

Define o conteúdo.

itemList.(x) details. value

Define o conteúdo. O conteúdo pode ser escrito em HTML simples com CSS2.

Existem alguns elementos e estilos já pré-definidos que podem ser utilizados:

  • Elementos html: h1, h2, h3, div, table

  • CSS:

    • text-default: pinta a fonte do elemento com a cor definida em “itemList.(x)color”. Se color não for definido, assume a cor de fonte padrão definida para o endpoint em “appStyle.colorBaseFont”.

      • Ex: <h3 class='text default'> Texto aqui </h3>

itemList.(x) actionDefault

Ação default a ser executada quando o item da lista for tocado. Se vazio ou nulo, nenhuma ação será executada.

itemList.(x) actions

Lista de ações para o item da lista.

Template

  • C

    • Barra que exibe o agrupamento.

    • pageContent.groupList(x).title define texto da barra de agrupamento.

    • pageContent.hasGroupBy define se o conteúdo deve ou não ser agrupado em seções.

    • pageContent.groupList(x).startsCollapsed define se a seção do group list deve iniciar fechada (true) ou aberta (false). Se nulo ou vazio, o padrão é false.

    • pageContent.groupList(x).background define a cor da barra de agrupamento. Se nulo ou vazio, a cor padrão é #CCC.

    • pageContent.groupList(x).color define a cor da fonte da barra de agrupamento. Se nulo ou vazio, a cor padrão é #444.

  • C1

    • Área de exibição do elemento de contração/expansão do agrupamento.

  • D

    • pageContent.groupList(x).actions define a lista de ações do item.

    • Se nulo ou vazio, o espaço é ocultado.

    • Suporta de 1 a N actions, sendo:

      • 1 action: Exibir a action informada.

      • 2 actions: Exibir o “menu de bolinhas” para acesso às demais actions através de menu suspenso.

Templates GroupList Disponíveis

Templates Lista A
Templates Lista B
Templates Lista C
Templates Lista D
Template Menu A
Template Menu B
Template Menu C
Template Carousel A
Template Carousel B
Template Carousel C
Template Carousel D
códio de exemplo 1
"pageContent": {
  "totalPages": 1,
  "currentPage": 1,
  "background": "#ffffff",
  "hasGroupBy": true/false,
  "groupList": [	
    {
      "template": "A",
      "title": "Grupo ABC",
      "background": "#A11480",
      "color": "#FFF",
      "actions":[...],
      "itemsList": [
        {	
          "publishLevel": 1,
          "permissionLevel": 1,
          "background": "#FFF",
          "color": "#FFF",
          "details": [
            {"order": 0, "value":".."}
          ],
          "actionDefault": 0,
          "actions": [..]
        }
      ]
    },
    {
      "template": "B",
      "title": "Grupo XYZ",
      "background": "#FFF",
      "color": "#000",
      "actions":[...],
      "itemsList": [...]
    }
  ]	
}
Código de exemplo 2
"pageContent": 
 "contentList": [
  {
   "background": "#ffffff",
   "totalPages": 1,
   "currentPage": 1,
   "title":"Aba 1",
   "hasGroupBy": true/false,
   "groupList": [
     {...},
     {...},
    ]
   },
   {
    "background": "#ffffff",
    "totalPages": 1,
    "currentPage": 1,
    "title":"Aba 2",
    "hasGroupBy": true/false,
    "groupList": [
     {...},
     {...},
    ]
   }
]
PreviousPageContentNextCoringa

Last updated