SectionList B
Template B
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).backgrounddefine a cor do card. Se nulo ou vazio, a cor padrão template.pageContent.sectionList(x).colordefine 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).titledefine o texto da área, sempre centralizada.pageContent.sectionList(x).colordefine 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).titledefine o subtítulo da seção.pageContent.sectionList(x).colordefine a cor do titulo.Deve receber a cor negrito.
pageContent.sectionList(x).sections(0-z).typedefine o tipo do conteúdo da seção.pageContent.sectionList(x).sections(0-z).valuedefine o texto HTML da célula.
E3
pageContent.sectionList(x).actionsdefine 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.
{
"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": "+557199999-9999"
}
]
}
]
}
},
"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'></i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t\t<br><i style='font-size:10pt'></i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t\t<br><i style='font-size:10pt'></i> Lorem ipsum dolor sit amet \r\n\t\t\t\t\t\t<br><i style='font-size:10pt'></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": "+557199999-9999"
}
]
},
{
"order": 1,
"name": "email",
"permissionLevel": 1,
"publishLevel": 1,
"parameters": [
{
"title": "",
"value": "[email protected]"
}
]
},
{
"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'></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'></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"
}
]
}
]
}
}Last updated