PageHeader

O PageHeader representa a parte superior da tela localizada imediatamente após o PageNavigation. No menu principal ela é comumente utilizada para incorporar uma imagem.

Propriedades gerais:

• Barra de cabeçalho da tela.

• Existência não obrigatória.

• Pode conter imagens e/ou conteúdo html.

• Pode possuir actions.

• Permite o uso de templates.

Sintaxe seção do PageHeader

"pageHeader": {
	"template": "",
	"logo": "",
	"background": "",
	"color": "",
	"logo": "",	
	"item": {
		"details": [{"order": 0,"value": ""}],
		"actionDefault": null,
		"actions": [...]
	}
}

Propriedade	Descrição
template	Nome da template a ser utilizada.
background	Customiza o fundo da cabeçalho com uma cor (hexadecimal) ou uma imagem (link da imagem). Se nulo ou vazio: colorBase + escurecimento de 40% da cor.
color	Customiza a cor da fonte do texto e dos ícones de ações do cabeçalho.
logo	Exibe no centro do cabeçalho a imagem definida (link da imagem).
item.detail	Define um conteúdo html/css2 a ser exibido no cabeçalho quando preenchido em item.detail.value.
item.actions	Define 1 ou mais ações a serem exibidas no cabeçalho.
item.actionDefault	Define qual a actions padrão do clique da célula. Se nulo ou vazio, nenhuma ação deve ser executada.

Templates

Template A

• Formato: Linha simples.

• Imagem: Não recebe imagens no elemento background.

• Conteúdo: Totalmente definido no elemento detail.order = 0.

• Ações:

  • Quando múltiplas, menu exibido na lateral.

  • Quando única, ícone é exibido na lateral.

Json Exemplo:

{
    "pageNavigation": {
        "template": "A",
        "title": "PageHeader A",
        "left": {
            "actions": [
                {
                    "order": "0",
                    "name": "back"
                }
            ]
        },
        "right": {
            "actions": [
                {
                    "order": "0",
                    "name": "home",
                    "icon": "ea39"
                }
            ]
        }
    },
    "pageHeader": {
        "template": "A",
        "background": null,
        "logo": null,
        "color": "#FFF",
        "item": {
            "publishLevel": 1,
            "details": [
                {
                    "order": 0,
                    "value": "<span style='color:#fff'><h3>Lorem ipsum dolor</h3><br>Lorem ipsum dolor</span>"
                }
            ],
            "actionDefault": 0,
            "actions": [
                {
                    "order": 0,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "name": "call",
                    "path": "",
                    "title": "Ligar",
                    "parameters": [
                        {
                            "title": "Residencial",
                            "value": "[phone]"
                        }
                    ]
                },
                {
                    "order": 1,
                    "publishLevel": 1,
                    "permissionLevel": 1,
                    "title": "Enviar Email",
                    "name": "email",
                    "path": "",
                    "parameters": [
                        {
                            "title": "Pessoal",
                            "value": "[email protected]"
                        }
                    ]
                }
            ]
        }
    },
    "pageContent": {
        "background": "#FFF",
        "totalPages": 1,
        "currentPage": 1,
        "hasGroupBy": false,
        "groupList": null
    }
}

Estrutura template A do PageHeader

• B1: Espaço para logomarca.

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

  • Conteúdo sempre centralizado.

• B2: Espaço para texto da tela.

  • Suporta HTML flexível com o conteúdo sempre centralizado.

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

• B3: Célula de actions.

  • Suporta de 1 a N actions sendo:

    • 1 action: Exibir a action informada.

    • 2 actions: Exibir o menu para acesso às demais actions.

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

Sintaxe seção do template A do PageHeader

{
  "pageNavigation": {
   //...
  },
  "pageHeader": {
    "template": "A",
    "background": null,
    "logo": null,
    "color": "#FFF",
    "item": {
      "publishLevel": 1,
      "details": [
        {
          "order": 0,
          "value": "<span style='color:#fff'><h3>Lorem ipsum dolor</h3><br>Lorem ipsum dolor</span>"
        }
      ],
      "actionDefault": 0,
      "actions": [
        {
          "order": 0,
          "publishLevel": 1,
          "permissionLevel": 1,
          "name": "call",
          "path": "",
          "title": "Ligar",
          "parameters": [
            {
              "title": "Residencial",
              "value": "[phone]"
            }
          ]
        },
        {
          "order": 1,
          "publishLevel": 1,
          "permissionLevel": 1,
          "title": "Enviar Email",
          "name": "email",
          "path": "",
          "parameters": [
            {
              "title": "Pessoal",
              "value": "[email protected]"
            }
          ]
        }
      ]
    }
  },
  "pageContent": {
    //...
  }
}

Template B

• Formato: Linha simples.

• Imagem:

  • Em Background, define uma imagem como background do cabeçalho.

  • Em Logo, define uma logomarca a ser aplicada no cabeçalho.

• Background: Aceita cor ou imagem.

• Conteúdo: Totalmente definido no elementodetail.order = 0.

• Ações:

  • Quando múltiplas ou única, são exibidas em uma barra de ícones.

Json Exemplo:

{
    "pageNavigation": {
        "template": "A",
        "title": "Cabeçalho B",
        "left": {
            "actions": [
                {
                    "order": "0",
                    "name": "back"
                },
                {
                    "order": "1",
                    "name": "home",
                    "icon": "e938"
                },
                {
                    "order": "2",
                    "name": "home",
                    "icon": "ea88",
                    "title": "Texto 3"
                }
            ]
        },
        "right": {
            "actions": [
                {
                    "order": "0",
                    "name": "home",
                    "icon": "ea39",
                    "title": "Texto 1"
                },
                {
                    "order": "1",
                    "name": "home",
                    "icon": "e990",
                    "title": "Texto 2"
                },
                {
                    "order": "2",
                    "name": "home",
                    "icon": "ea88",
                    "title": "Texto 3"
                }
            ]
        }
    },
    "pageHeader": {
        "template": "B",
        "background": "#634975",
        "logo": "http://api.mobilecare.com.br/integration/demo/resources/mobilex-demos/logo-mobilex-b.png",
        "color": "#EE8113",
        "item": {
            "publishLevel": 1,
            "details": [
                {
                    "order": 0,
                    "value": "<br>Este é um texto dentro da célula que pode ser utilizado com formatação HTML<br>"
                }
            ],
            "actionDefault": 0,
            "actions": [
                {
                    "order": "0",
                    "name": "home",
                    "icon": "ea39",
                    "title": "Texto 1"
                },
                {
                    "order": "1",
                    "name": "home",
                    "icon": "e990",
                    "title": "Texto 2"
                },
                {
                    "order": "2",
                    "name": "home",
                    "icon": "ea88",
                    "title": "Texto 3"
                },
                {
                    "order": "3",
                    "name": "home",
                    "icon": "ea39",
                    "title": "Texto 1"
                },
                {
                    "order": "4",
                    "name": "home",
                    "icon": "e990",
                    "title": "Texto 2"
                }
            ]
        }
    },
    "pageContent": {
        "background": "#FFF",
        "totalPages": 1,
        "currentPage": 1,
        "hasGroupBy": false,
        "groupList": null
    }
}

Estrutura template B do PageHeader

• B1: Espaço para a logomarca.

  • pageHeader.logo define a URL da imagem que deve ser exibida.

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

  • Conteúdo sempre centralizado.

• B2: Espaço para texto da célula.

  • pageHeader.item.details(x) define o conteúdo.

  • Suporta HTML flexível com com conteúdo sempre centralizado.

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

• B3: Célula de actions.

  • pageHeader.item.actions(x) define o conteúdo.

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

  • Suporta de 1 a N actions, sendo:

    • 1 a 5 actions: Exibe as actions listadas, mostrando o ícone informado ou ícone padrão ou da action.

    • >5 actions: Exibe as actions listadas de 1-4 e na posição 5, exibir menu para acesso às actions de 5 à n através de menu suspenso.

Sintaxe seção do template B do PageHeader

{
  "pageNavigation": {
    //...
    },
    "right": {
      "actions": [
        {
          "order": "0",
          "name": "home",
          "icon": "ea39",
          "title": "Texto 1"
        },
        {
          "order": "1",
          "name": "home",
          "icon": "e990",
          "title": "Texto 2"
        },
        {
          "order": "2",
          "name": "home",
          "icon": "ea88",
          "title": "Texto 3"
        }
      ]
    }
  },
  "pageHeader": {
    "template": "B",
    "background": "#634975",
    "logo": "http://api.mobilecare.com.br/integration/demo/resources/mobilex-demos/logo-mobilex-b.png",
    "color": "#EE8113",
    "item": {
      "publishLevel": 1,
      "details": [
        {
          "order": 0,
          "value": "<br>Este é um texto dentro da célula que pode ser utilizado com formatação HTML<br>"
        }
      ],
      "actionDefault": 0,
      "actions": [
        {
          "order": "0",
          "name": "home",
          "icon": "ea39",
          "title": "Texto 1"
        },
        {
          "order": "1",
          "name": "home",
          "icon": "e990",
          "title": "Texto 2"
        },
        {
          "order": "2",
          "name": "home",
          "icon": "ea88",
          "title": "Texto 3"
        },
        {
          "order": "3",
          "name": "home",
          "icon": "ea39",
          "title": "Texto 1"
        },
        {
          "order": "4",
          "name": "home",
          "icon": "e990",
          "title": "Texto 2"
        }
      ]
    }
  },
  "pageContent": {
    //...
  }
}