SectionLists
Utilizado para apresentar telas com conteúdo genérico através de blocos, chamados de seções de conteúdo.
Os SectionLists são telas comumente utilizadas para disponibilizar detalhamento de conteúdos.
Por exemplo, dentro de um fluxo de telas a app disponibiliza uma listagem utilizando um GroupList. Ao selecionar um item da listagem para detalhar o conteúdo, uma SectionList é exibida.
Os templates do SectionList suportam a apresentação de conteúdo agrupados ou não em cards. A utilização do template que suporte card permite que as informações sejam agrupadas em seções.
Utilizado para renderizar telas com conteúdo genérico através de blocos, chamados de seções de conteúdo.
{
"pageContent": {
"background": "#ffffff",
"totalPages": 1,
"currentPage": 1,
"sectionList": [
{
"template": "A",
"title": "Titulo da seção",
"background": "#A11480",
"color": "#FFF",
"actionDefault": 0,
"actions": [...],
"sections": [
{
"type": "html|image|audio|gps",
"title": "Titulo do Item",
"value": "Dados do item",
"actionDefault": 0,
"actions": [...]
}
]
},
{
"template": "A",
"title": "Titulo da seção",
"background": "#A11480",
"color": "#FFF",
"actionDefault": 0,
"actions": [...],
"sections": [...]
}
]
}
}
{
"pageContent": {
"contentList": [
{
"background": "#ffffff",
"totalPages": 1,
"currentPage": 1,
"title": "Aba 1",
"hasGroupBy": true/false,
"sectionList": [
{...},
{...}
]
},
{
"background": "#ffffff",
"totalPages": 1,
"currentPage": 1,
"title": "Aba 2",
"hasGroupBy": true/false,
"sectionList": [
{...},
{...}
]
}
]
}
}
template
Nome da template a ser utilizada para o agrupamento
title
Título da seção. Exibido no centralizado no topo da seção
background
Customiza a cor do background da seção. Se nulo ou vazio, a cor padrão é branco(#FFF) para o template A e transparente para o template B.
color
Customiza a cor dos ícones e texto da seção. Se nulo ou vazio, a cor padrão é cinza (#444).
actions
Lista de ações para a seção
actionDefault
Ação padrão ao trocar na seção
sections
Lista de itens do agrupamento.
sections.(x) type
Tipo do item da seção, suportando:
Html: Texto comum
Image: Lista de imagens separadas por pipe (“|”)
Audio : Lista de arquivos separadas por pipe (“|”)
sections.(x) title
Título da do item da seção. Vem em negrito.
sections.(x) value
Conteúdo da seção. 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>
sections.(x) actions
Lista de ações para o item da seção.
sections.(x) actionDefault
Ação default a ser executada quando o item for tocado.
Se vazio ou nulo, nenhuma ação será executada.
Template
E
Área da célula da seção.
pageContent.sectionList(x).backgrounddefine a cor do card. Se nulo ou vazio, a cor padrão é #FFF para o template A e transparente para o template B.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.
Templates SectionList Disponíveis
{
"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": "+557199999-9999"
}
]
}
]
}
},
"pageContent": {
"background": "#482073",
"template": "A",
"totalPages": 1,
"currentPage": 1,
"hasGroupBy": true,
"sectionList": [
{
"title": "Seção 1 - Texto e ações",
"template": "A",
"sections": [
{
"type": "html",
"title": "Titulo A",
"value": "<table width='100%'>\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",
"value": "<table width='100%'>\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 class='text-default' style='font-size:10pt'></i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t\t<br><i class='text-default' style='font-size:10pt'></i> Lorem ipsum dolor sit amet\r\n\t\t\t\t\t\t<br><i class='text-default' style='font-size:10pt'></i> Lorem ipsum dolor sit amet \r\n\t\t\t\t\t\t<br><i class='text-default' 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": "A",
"sections": null
},
{
"template": "A",
"sections": [
{
"type": "html",
"value": "<table width='100%' ><tr><td align='left' width='80%' style='padding: 4px;'> <h3 class='text-default'><b>Item A</b></h3></td> <td align='right' width='20%'> <i style='color:#666;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": "A",
"sections": [
{
"type": "html",
"value": "<table width='100%' ><tr><td align='left' width='80%' style='padding: 4px;'> <h3 class='text-default'><b>Item B</b></h3></td> <td align='right' width='20%'> <i class='icon-small' style='color:#666;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": "A",
"sections": [
{
"type": "html",
"value": "<table style='margin-top:2px;width:100%'><tr><td style='border: 1px solid #ccc; padding: 12px; background-color:#A11480;color:#ffffff;' 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": "A",
"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"
}
]
}
]
}
}{
"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