SectionList B

Template B

Exemplo SectionList Template B

Propriedade	Descrição
Formato	Itens da SectionList apresentados de forma linear (sem card).
Imagem	Não possui configuração específica, mas pode ser adicionada ao HTML.
Conteúdo	Definidos nas sections.
Ações	Quando múltiplas ou única: Exibida em uma Barra inferior no card. Quando única e default: não exibida e acionada ao tocar no card da seção.

• E

  • Área da célula da seção.

  • pageContent.sectionList(x).background define a cor do card. Se nulo ou vazio, a cor padrão template.

  • pageContent.sectionList(x).color define a cor da fonte, linhas e ícones do card. Se nulo ou vazio, a cor padrão é #444.

• E1

  • Área de exibição do título da seção.

  • pageContent.sectionList(x).title define o texto da área, sempre centralizada.

  • pageContent.sectionList(x).color define a cor do texto e a cor da linha de separação.

  • Se nulo ou vazio a área é ocultada.

  • Possui na formatação uma linha inferior separando o título do conteúdo da seção.

• E2

  • pageContent.sectionList(x).sections(0-z) define o conteúdo da área. Se z>1, então o conteúdo é separado por espaço em branco.

  • pageContent.sectionList(x).sections(0-z).title define o subtítulo da seção.

    • pageContent.sectionList(x).color define a cor do titulo.

    • Deve receber a cor negrito.

  • pageContent.sectionList(x).sections(0-z).type define o tipo do conteúdo da seção.

  • pageContent.sectionList(x).sections(0-z).value define o texto HTML da célula.

• E3

  • pageContent.sectionList(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 a 6 action: Exibe a action informada, de acordo com o order, e da direita para a esquerda.

    • >6 actions: Exibe as actions de 1 a 5 na linha e agrupar as actions de 6 a no “menu de bolinhas” para acesso através de menu suspenso.

Códio de exemplo de Template B

{
  "pageNavigation": {
    "background": "#482073",
    "title": "Detalhamento A",
    "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": "#fff",
    "template": "B",
    "totalPages": 1,
    "currentPage": 1,
    "hasGroupBy": true,
    "sectionList": [
      {
        "title": "Seção 1 - Texto e ações",
        "template": "B",
        "background": "#fff",
        "color": "#482073",
        "sections": [
          {
            "type": "html",
            "title": "Titulo A",
            "color": "#482073",
            "value": "<table width='100%' style='color:#482073'>\t\r\n\t\t\t\t\t<tr ><td align='justify'>\r\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r\n\t\t\t\t\t\tUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conseq.\r\n\t\t\t\t\t</td></tr>\r\n\t\t\t\t\t\r\n\t\t\t\t</table>"
          },
          {
            "type": "html",
            "title": "Titulo B",
            "template": "B",
            "background": "#fff",
            "color": "#482073",
            "value": "<table width='100%' style='color:#482073'>\t\r\n\t\t\t\t\t<tr ><td align='justify'>\t\t\t\t\t\t\r\n\t\t\t\t\t\t<i style='font-size:10pt'>&#xe9a7;</i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t\t<br><i style='font-size:10pt'>&#xe9a7;</i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t\t<br><i style='font-size:10pt'>&#xe9a7;</i> Lorem ipsum dolor sit amet \r\n\t\t\t\t\t\t<br><i style='font-size:10pt'>&#xe9a7;</i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t</td></tr>\r\n\t\t\t\t\t\r\n\t\t\t\t</table>"
          }
        ],
        "actionDefault": null,
        "actions": [
          {
            "order": 0,
            "name": "call",
            "permissionLevel": 1,
            "publishLevel": 1,
            "parameters": [
              {
                "title": "",
                "value": "[phone]"
              }
            ]
          },
          {
            "order": 1,
            "name": "email",
            "permissionLevel": 1,
            "publishLevel": 1,
            "parameters": [
              {
                "title": "",
                "value": "[e-mail]"
              }
            ]
          },
          {
            "order": 2,
            "name": "link",
            "permissionLevel": 1,
            "publishLevel": 1,
            "parameters": [
              {
                "title": "url",
                "value": "https://www.mobilex.tech/"
              }
            ]
          }
        ]
      },
      {
        "title": "Seção 2 - simulando listas",
        "template": "B",
        "background": "#fff",
        "color": "#482073",
        "sections": null
      },
      {
        "template": "B",
        "background": "",
        "color": "#482073",
        "sections": [
          {
            "type": "html",
            "value": "<table width='99%' style='color:#482073;border:1px solid #482073' ><tr><td align='left' width='80%' style='padding: 8px;'> <h3><b>Item A</b></h3></td> <td align='right' width='20%'> <i font-size:12px'>&#xe947;</i></td></tr></table>"
          }
        ],
        "actionDefault": 0,
        "actions": [
          {
            "order": 0,
            "name": "link",
            "permissionLevel": 1,
            "publishLevel": 1,
            "parameters": [
              {
                "title": "url",
                "value": "https://www.mobilex.tech/"
              }
            ]
          }
        ]
      },
      {
        "template": "B",
        "background": "",
        "color": "#482073",
        "sections": [
          {
            "type": "html",
            "value": "<table width='99%' style='color:#482073;border:1px solid #482073' ><tr><td align='left' width='80%' style='padding: 8px;'> <h3><b>Item B</b></h3></td> <td align='right' width='20%'> <i font-size:12px'>&#xe947;</i></td></tr></table>"
          }
        ],
        "actionDefault": 0,
        "actions": [
          {
            "order": 0,
            "name": "link",
            "permissionLevel": 1,
            "publishLevel": 1,
            "parameters": [
              {
                "title": "url",
                "value": "https://www.mobilex.tech/"
              }
            ]
          }
        ]
      },
      {
        "title": "Seção 3 - Simulando botão",
        "template": "B",
        "background": "#fff",
        "color": "#482073",
        "sections": [
          {
            "type": "html",
            "value": "<table style='margin-top:2px;width:100%'><tr><td style='border: 1px solid #ccc; padding: 12px; background-color:#EE8113;color:#482073fff;'  align='center' ><span class='btn'>Clique no botão</span></td></tr></table>"
          }
        ],
        "actionDefault": 0,
        "actions": [
          {
            "order": 0,
            "name": "link",
            "permissionLevel": 1,
            "publishLevel": 1,
            "parameters": [
              {
                "title": "url",
                "value": "https://www.mobilex.tech/"
              }
            ]
          }
        ]
      },
      {
        "title": "Seção 4 - Galeria de Imagens",
        "template": "B",
        "background": "#fff",
        "color": "#482073",
        "sections": [
          {
            "type": "image",
            "value": "http://api.mobilecare.com.br/integration/demo/_imagens/girl_icon.png|http://api.mobilecare.com.br/integration/demo/_imagens/girl_icon.png|http://api.mobilecare.com.br/integration/demo/_imagens/girl_icon.png|http://api.mobilecare.com.br/integration/demo/_imagens/girl_icon.png|http://api.mobilecare.com.br/integration/demo/_imagens/girl_icon.png|http://api.mobilecare.com.br/integration/demo/_imagens/girl_icon.png"
          }
        ]
      }
    ]
  }
}