Layout

Pages(available only in the Form, Control and Search applications) configuration Interface. Pages (available only in the Form, Control and Search applications) configuration Interface.

Incluindo uma nova página

Para incluir uma nova página, insira as informações sobre o nome e o rótulo da nova página, selecione uma imagem se desejar e clique no botão “Incluir”.

Excluindo uma página

Para excluir uma página, clique no ícone Lixeira correspondente à linha da página.

Veja o exemplo abaixo de aplicação de Formulário usando duas Páginas: Dados Gerais e Documentos.

Form Application using Pages feature.

Configurações de páginas

O aplicativo de formulário já vem com uma página padrão, identificada como “Pag1”, mas é possível renomeá-la. Use as páginas quando tiver um aplicativo que contém muitos campos. Um formulário com mais de 20 campos verticalmente é desafiador de usar. Assim, você pode organizar os campos nos blocos e os blocos nas páginas.

Pages Configuration Interface.

Configurações padrão

Fonte

Defina a família de fontes dos títulos das páginas. Ao clicar no ícone do lado direito, você pode selecionar a família de fontes em uma lista.

Tamanho da fonte

Defina o tamanho da fonte dos títulos das páginas.

Cor da fonte selecionada

Defina a cor da fonte da página selecionada.

Cor de fundo selecionada

Defina a cor de fundo da página selecionada.

Cor da fonte não selecionada

Defina a cor da fonte das páginas não selecionadas.

Cor de fundo não selecionada

Defina a cor de fundo das páginas não selecionadas.

Blocos

Conceitualmente um bloco é um “container” onde posicionamos nossos campos de uma Aplicação de Formulário, Controle ou Consulta com orientação Slide.

Por padrão as aplicações criadas no Scriptcase são constituídas de um único bloco, este com o mesmo nome da aplicação. Podemos adicionar quantos novos blocos quisermos e organizá-los da maneira que nos for mais conveniente. Na tela abaixo observe que há uma coluna chamada ORGANIZAÇÃO , é lá que definimos se o próximo bloco virá ao lado ou abaixo do corrente.

Configuração dos blocos da aplicação

No lado esquerdo de cada bloco existem dois ícones, o primeiro Configuração dos blocos da aplicação tem a função de editar todas as informações relativas ao bloco e o segundo para exclusão do bloco.

Organização e Mudança de posição dos Blocos
- Veja abaixo como alterar a ordem de exibição dos Blocos de uma Página.
Clique e araste o bloco que deseja alterar para a sua nova posição.

Configuração de exibição dos blocos da aplicação
- Veja agora como remover um bloco da exibição
Clique sobre o bloco desejado e arraste-o até o item “Blocos não exibidos”. Desta forma, assim como você pode remover um bloco arrastando-o até o item “Blocos não exibidos”, para mudar um bloco de página é só arrasta-lo até a página desejada. Veja as imagens abaixo.

Configuração de exibição dos blocos da aplicação

Configuração de exibição dos blocos da aplicação
- Bloco
  - Nome : Nome do Bloco.
  - Label : Título do bloco que será exibido na aplicação.
- Titulo
  - Exibir : Flag que controla se o título do bloco será exibido.
- Label
  - Exibir : Flag que controla se o label dos campos dentro do bloco devem ser exibidos.
  - Posição : Opções de exibição do label :
    - Acima : o label será exibido acima do campo.
    - Ao Lado : o label será exibido ao lado do campo.
    - Abaixo : o label será exibido abaixo do campo.
- Campos
  - Colunas : Quantidade de colunas a serem exibidas lado a lado dentro do bloco.
  - Posição : De que forma os campos serão exibidos dentro do bloco :
    - Abaixo : Os campos serão exibidos um abaixo do outro respeitando a quantidade de colunas.
    - Ao lado : Os campos serão exibidos ao lado do outro respeitando a quantidade de colunas.
    - Corrido : Os campos serão exibidos lado a lado sem conter tabulação.
- Organização
  - Próximo : Forma como os blocos ficarão organizados dentro da página:
    - Abaixo : Indica que o próximo bloco será exibido abaixo.
    - Ao lado : Indica que o próximo bloco será exibido ao lado.
  - Largura : Especifica em pixels ou percentual a largura que o bloco deverá ocupar, caso a informação seja em percentual especificar (%).
  - Colapse : Habilta opção de fechar (colapse) o bloco.
Inclusção de blocos

Para incluir novos blocos em uma Aplicação, basta clicar no botão . Em seguida, será apresentada a seguinte interface para definição do nome e label do bloco. No fim clique no botão Criar.

Interface de criação dos blocos da aplicação
- Nome : Nome do bloco.
- Label : Texto que será que mostrado no bloco da aplicação.

Edição dos blocos

Para editar um bloco basta clicar no ícone Configuração dos blocos da aplicação , que fica do lado esquerdo do bloco. Em seguida, será apresentada a seguinte interface para definição dos parâmentros do bloco. No fim clique no botão Salvar.

Interface de edição dos blocos da aplicação

Nome : Nome do bloco.
NTítulo : Exibe o título do bloco.
Exibir Título : Esta opção, quando ativada, permite exibir o título do bloco.
Fonte do Título : Nome da fonte aplicada no título do bloco.
Tamanho da Fonte : Tamanho da fonte aplicada ao título do bloco.
Cor da Fonte : Cor da fonte do título do bloco.
Cor do Fundo : Cor de fundo da linha do título do bloco.
Figura de Fundo : Figura de fundo da linha do título do bloco.
Altura do Título : Altura em pixels da linha do título do bloco.
Alinhamento Horizontal : Alinhamento horizontal do título do bloco (Esquerda, Centro e Direita).
Alinhamento Vertical : Alinhamento vertical do título do bloco(Topo, Meio e Baixo).
Exibir Label : Exibir os labels dos campos do bloco.
Colunas : Quantidade de colunas de campos no bloco.
Largura das Colunas : Forma de cálculo das colunas do bloco.
Cor do Label : Cor para exibir o label dos campos.
Organização dos Campos : Forma de organização dos campos no bloco.
Posição do Label : Define o Posicionamento do label dos campos em relação aos dados.
- Ao Lado - Valor padrão das aplicações, posicionando a label no lado direito do input
- Acima - Posiciona a label acima do input
- Abaixo - Posiciona a label abaixo do input
Próximo Bloco : Posicionamento do próximo bloco em relação ao atual.
Cor da Borda : Cor da borda do bloco.
Largura da Borda : Largura da borda do bloco.
Largura do Bloco : Largura do bloco (width).
Altura do Bloco : Altura do bloco (height).
CellSpacing : Espaçamento das células do bloco.
Collapse : Habilta opção de fechar (colapse) o bloco.

<div class="card">
    <div class="card-header" id="headingTwo">
        <h5 class="m-0 p-0">
            <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Links Relacionados
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAABmJLR0QA/wD/AP+gvaeTAAAApUlEQVQokaXQvwqBYRQG8N+nUFIMitFNuAmLO7FbLMKgDCZuxE24CaPBKIWBwfmKL3qLZ3rPec/T84cfkCX+6xjhjhpW2KcIa7RjLmOZcrF4IeSYQukLIcMNF7Ri10mpwAAbNEJxHZbfiqhjjCt26GOLnmeeCU4KhDx0MxQGKSuzF8+tIE6+HedFZDjE+4gqKimlZfimEPoT8iK6GOIcu7lC6L/xAEX7F3jRdv7sAAAAAElFTkSuQmCC">
            </button>
        </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" aria-expanded="false" style="height: 0px;">
        <div class="card-body">
            <ul class="subnav sample">
                <li><a href="https://www.scriptcase.com.br/sistemas/v9/exemplos/calendar05/index.php?view=clean" target="_blank">Calendário integrado com a API do Google</a></li>
                <li><a href="https://www.scriptcase.com.br/sistemas/v9/exemplos/calendar01/calendar01.php?view=clean" target="_blank">Calendário Simples</a></li>
                <li><a href="https://help.scriptcase.net/portal/pt/kb/articles/fatal-error-uncaught-guzzlehttp-ao-executar-google-calendar-ou-utilizar-api-google-drive" target="_blank">Resolvendo erro Fatal error: Uncaught GuzzleHttp</a></li>
                <li><a href="https://help.scriptcase.net/portal/pt/kb/articles/adicionando-novas-colunas-na-tabela-para-o-calendario" target="_blank">Adicionando novas colunas na tabela para o Calendário</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Div dos Vídeos -->
<div class="card">
    <div class="card-header" id="headingThree">
        <h5 class="m-0 p-0">
            <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
                Videos Relacionados
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAB+UlEQVRoge3ZP8hNcRzH8ZfnkeihFEViwUYYbAapZ7DZlIVFWJQsTzYTshmtBguLQcmT2AwySBnkLuTPoBSip8cTw/HrHud3/517z73n/nTe9VvuuX1/n8/p+/2e3x8aGhr6MYNTeIQWnuAc1tQpalBmcQe/O4wWjmNVbeoG4KLO4vPjKQ7VJbAfr7SFXsFOXMBnsZG72F2PzO4sawucy/2+Edfx078mlnADmyYrszt5cZ3YgZtYKfz3Gy5j7QQ09qSfgcBBPBan1VuckXWyWhjUQGAeL8VGnuHwOAT2o6wBWC1765/ERhaxt2KNPRnGQGC9rA5+FOIsy+pmS0UaezKKgcB2meBfhXih0NeNqLEnVRgI7MF9cVq9k6XcbAVzRFRpIDCPF2Ijz3GkwnkwHgNkbfUkPoqNLGJfVRONy0BgDgv4WphrBbewddQJxm0gsE3nQv+Oa9gwbOBJGQjsx0NxWrVwYJiAkzYQOCr+on/A5rKB6jJA1lZP40tOw6WyQeo0EDiW03Cv+LC2VeKkmLYUWigbZJqK+L0EirhbG33z91lpmg9ZH5JdSiS9mEt2OZ3shibZLWWym/qkj1WSPdhK9mhx6g93l7RFJXm8ns/nq9glsQuO82KhxTHVV0wzuK2z8CQu+cgEnsADvJZ1m7MSuWZtaPjf+QNI1Ut1JfKs2wAAAABJRU5ErkJggg==" style="width: 12px;">
            </button>
        </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" aria-expanded="false" style="height: 0px;">
        <div class="card-body">
            <ul class="subnav video">
                <li><a href="https://www.youtube.com/watch?v=07iEK1EgzkY" target="_blank">Calendário (Integração com Google Calendar) - Parte 01</a></li>
		        <li><a href="https://youtu.be/7D9Hwp40REA" target="_blank">Calendário (Integração com Google Calendar) - Parte 02</a></li>
            </ul>
        </div>
    </div>
</div>

</div>