List D

Template D

Exemplo GroupList Template D

Propriedade	Descrição
Formato	Lista horizonta em formato de card.
Imagem	Formato quadrado, pequeo e com altura fixa. Url definida em detail.order = 0.
Conteúdo	Definido em detail.order = 0, se não tem imagem. Definido em detail.order = 1, se possui imagem.
Ações	Quando múltiplas: menu suspenso exibido na lateral. Quando única: ícone é exibido na lateral.

• D (definições gerais da área de conteúdo da listagem)

  • pageContent.groupList(x).itemList(y).count define a quantidade de itens na lista. Se nulo ou vazio, nenhum item é exibido.

  • pageContent.groupList(x).itemList(y).background define a cor do background da célula. Se nulo ou vazio, a cor padrão é #FFF.

  • pageContent.groupList(x).itemList(y).color define a cor da fonte dos textos e ícones da célula. Se nulo ou vazio, a cor padrão é #444.

• D1

  • Área de exibição do elemento de imagem customizado para a template.

  • pageContent.groupList(x).itemList(y).detail(0): Se seu conteúdo iniciar com “http://" a célula deve interpretar a existência de uma imagem e exibir a área com a imagem em formato de círculo; senão, então a área é ocultada.

  • A imagem é reduzida em relação à area e mantem as proporções da imagem.

• D2

  • pageContent.groupList(x).itemList(y).detail(z) define o conteúdo da célula.

  • Se z>0, então os “details” serão exibidos na célula e separados por um espaço em branco.

  • Suporta html flexível com com conteúdo alinhado à esquerda.

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

• D3

  • 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: Exibe a action informada

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

códio de exemplo de Template D

{
  "pageNavigation": {
    "background": "#482073",
    "title": "Lista D",
    "left": {
      "actions": [
        {
          "order": "0",
          "name": "back"
        }
      ]
    }
  },
  "pageHeader": {
    "template": "A",
    "background": "#634975",
    "color": "#fff",
    "logo": "",
    "item": {
      "details": [
        {
          "order": 0,
          "value": "Cabeçalho da Lista<br>Lorem Ipsum"
        }
      ],
      "actionDefault": 0,
      "actions": [
        {
          "order": 0,
          "publishLevel": 1,
          "permissionLevel": 1,
          "name": "call",
          "path": "",
          "parameters": [
            {
              "title": "Residencial",
              "value": "[phone]"
            }
          ]
        }
      ]
    }
  },
  "pageContent": {
    "background": "#482073",
    "contentList": [
      {
        "background": "#fff",
        "title": "Sem Grupo",
        "totalPages": 1,
        "currentPage": 1,
        "hasGroupBy": false,
        "groupList": [
          {
            "template": "D",
            "title": "Grupo com Foto",
            "background": "#CCC",
            "color": "#EE8113",
            "actions": [
              {
                "order": 0,
                "publishLevel": 1,
                "permissionLevel": 1,
                "name": "call",
                "path": "",
                "parameters": [
                  {
                    "title": "Residencial",
                    "value": "[phone]"
                  }
                ]
              },
              {
                "order": 0,
                "publishLevel": 1,
                "permissionLevel": 1,
                "name": "email",
                "path": "",
                "parameters": [
                  {
                    "title": "",
                    "value": "[e-mail]"
                  }
                ]
              }
            ],
            "itemsList": [
              {
                "publishLevel": 1,
                "permissionLevel": 1,
                "background": "#FFF",
                "color": "#EE8113",
                "details": [
                  {
                    "order": 0,
                    "value": "https://fotos.vivadecora.com.br/fachadas-de-predios-fachada-de-predio-com-jardim-danielnunespaisagismo-73875-proportional-height_cover_medium.jpg"
                  },
                  {
                    "order": 1,
                    "value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
                  }
                ],
                "actionDefault": 0,
                "actions": [
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "call",
                    "path": "",
                    "parameters": [
                      {
                        "title": "Residencial",
                        "value": "[phone]"
                      }
                    ]
                  },
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "email",
                    "path": "",
                    "parameters": [
                      {
                        "title": "",
                        "value": "[e-mail]"
                      }
                    ]
                  }
                ]
              },
              {
                "publishLevel": 1,
                "permissionLevel": 1,
                "background": "",
                "color": "",
                "details": [
                  {
                    "order": 0,
                    "value": "http://webluxo.com.br/home/wp-content/uploads/2015/11/predio-ecologioco-cairo-9.jpg"
                  },
                  {
                    "order": 1,
                    "value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
                  }
                ],
                "actionDefault": 0,
                "actions": [
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "call",
                    "path": "",
                    "parameters": [
                      {
                        "title": "querystring",
                        "value": "[phone]"
                      }
                    ]
                  }
                ]
              },
              {
                "publishLevel": 1,
                "permissionLevel": 1,
                "background": "#ccc",
                "color": "#EE8113",
                "details": [
                  {
                    "order": 0,
                    "value": "https://br.habcdn.com/files/dynamic_content/realizar-projeto-e-construir-predio-comercial-com-salas-no-1714664_gallery.jpg"
                  },
                  {
                    "order": 1,
                    "value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
                  }
                ]
              }
            ]
          },
          {
            "template": "B",
            "title": "Grupo sem Foto",
            "background": "#CCC",
            "color": "#EE8113",
            "itemsList": [
              {
                "publishLevel": 1,
                "permissionLevel": 1,
                "background": "#EFEFEF",
                "color": "#EE8113",
                "details": [
                  {
                    "order": 0,
                    "value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
                  }
                ],
                "actionDefault": 0,
                "actions": [
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "call",
                    "path": "",
                    "parameters": [
                      {
                        "title": "",
                        "value": "[phone]"
                      }
                    ]
                  },
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "email",
                    "path": "",
                    "parameters": [
                      {
                        "title": "",
                        "value": "[e-mail]"
                      }
                    ]
                  }
                ]
              },
              {
                "publishLevel": 1,
                "permissionLevel": 1,
                "background": "#EFEFEF",
                "color": "#EE8113",
                "details": [
                  {
                    "order": 0,
                    "value": "<h3 class='text-default'><b>Lorem Ipsum Dolor</b></h3><br>1200m<br>Lorem - Ipsum"
                  }
                ],
                "actionDefault": 0,
                "actions": [
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "call",
                    "path": "",
                    "parameters": [
                      {
                        "title": "",
                        "value": "[phone]"
                      }
                    ]
                  },
                  {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "email",
                    "path": "",
                    "parameters": [
                      {
                        "title": "",
                        "value": "[e-mail]"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}