import.css=/download/attachments/108660318/wfLogixStyles.css

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/download/attachments/108660318/wfLogixScripts.js"></script>
<script type="text/javascript">
$(function () {
    $("p").filter(function() {
        return $.trim($(this).text()) === '' || $.trim($(this).text()) === '&nbsp;';
    }).remove();
    
    initLogixHtml();
});
</script>

Índice

No Fluig é possível utilizar processos que efetuam integração com o Logix. Estes processos são criados utilizando o Fluig Studio, para saber mais sobre esta ferramenta consulta a documentação em: Fluig Studio. Abaixo pode ser encontrado a documentação para a criação de um processo utilizando estilos e eventos padrões disponíveis para o Logix caso desejável.

Estilos e eventos padrões

Para utilizar os estilos e eventos padrões disponíveis é necessário primeiramente que no formulário HTML do processo sejam referenciadas as bibliotecas JavaScript jQuery na versão 1.8.3 e jQueryUI na versão 1.9.2 (para mais informações visite http://jquery.com/ e http://jqueryui.com/).

Além das citadas anteriormente, é necessário referenciar a biblioteca wfLogixUtil (disponível para baixar na lista de anexos no fim desta página), responsável por carregar os estilos e eventos padrões, alterar o estilo do formulário e carregar os zooms atribuídos para os campos.

<head>
    <!-- Código HTML -->

    <!-- Biblioteca JavaScript do Fluig/ECM -->
    <script type="text/javascript" src="../vcXMLRPC.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="wfLogixUtil.js"></script>

    <!-- Código HTML -->
</head>

Classes CSS

Atualmente existem uma séries de classes CSS que podem ser utilizadas através do arquivo de estilos padrão para estilizar e agrupar os elementos do formulário HTML.

Componentes

Agrupadores
Abas
Descrições
Campos de texto
Campos numérico
Campos de data
Campos de seleção

Agrupadores

Utilize agrupadores para organizar o formulário HTML e manter os processos padronizados e responsíveis.

<div style="background-color: #F8CB9C; border: 1px dashed #0000FF; font-size: 14px; padding: 10px; width: 97.5%">
    <pre>form</pre>
    <div style="background-color: #FCDB9A; border: 1px dashed #0000FF; font-size: 13px; padding: 10px; width: 96%">
        <pre>.fw-model</pre>
        <div style="background-color: #C1CD89; border: 1px dashed #0000FF; font-size: 12px; margin: 10px; width: 94%">
            <pre>.fw-box</pre>
            <div style="background-color: #8AB3BF; border: 1px dashed #0000FF; font-size: 11px; margin: 10px; width: 92%">
                <pre>.fw-input</pre>
            </div>
            <div style="background-color: #8AB3BF; border: 1px dashed #0000FF; font-size: 11px; margin: 10px; width: 92%">
                <pre>.fw-input</pre>
            </div>
        </div>
    </div>
</div>

<form>
    form
    <div class="fw-model">
        .fw-model
        <div class="fw-box">
            .fw-box
            <div class="fw-input">.fw-input</div>
            <div class="fw-input">.fw-input</div>
        </div>
    </div>
</form>

Abas

As abas organizam os elementos de forma simples e objetiva otimizando a utilização da área de trabalho.

<div class="fw-model ui-widget-content">
    <div class="fw-box" style="height: 99%; width: 100%;">
        <div class="fw-fields">
            <div class="fw-folder">
                <ul>
                    <li><a href="#FOLDER_1">Aba 1</a></li>
                    <li><a href="#FOLDER_2">Aba 2</a></li>
                    <li><a href="#FOLDER_3">Aba 3</a></li>
                </ul>
                <div class="fw-sheet" id="FOLDER_1">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 1
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_2">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 2
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_3">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 3
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fw-model ui-widget-content">
    <div class="fw-box" style="height: 99%; width: 100%;">
        <div class="fw-fields">
            <div class="fw-folder">
                <ul>
                    <li><a href="#FOLDER_1">Aba 1</a></li>
                    <li><a href="#FOLDER_2">Aba 2</a></li>
                    <li><a href="#FOLDER_3">Aba 3</a></li>
                </ul>
                <div class="fw-sheet" id="FOLDER_1">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 1
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_2">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 2
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_3">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 3
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Descrições

As descrições são desenvolvidas utilizando elementos label com a classe .fw-descr-top ou .fw-descr-top-obrigat para destacar campos obrigatórios.

<div class="fw-model fw-input">
    <label class="fw-descr-top-obrigat">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>
 
<div class="fw-model fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>
 
<div class="fw-model fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>

<div class="fw-input">
    <label class="fw-descr-top-obrigat">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>
 
<div class="fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>
 
<div class="fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>

Campos de texto

Para campos de texto, utilizar no elemento input a classe .fw-input-char.

<div class="fw-model fw-input">
    <label class="fw-descr-top">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>

<div class="fw-input">
    <label class="fw-descr-top">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>

Campos Numéricos

Para campos numéricos, utilizar no elemento input a classe .fw-input-number.

<div class="fw-model fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>

<div class="fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>

Campos de Data

Para campos de datas, utilizar no elemento input a classe .fw-input-date.

<div class="fw-model fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>

<div class="fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>

Campos de Seleção

Para campos de seleção, utilizar no elemento select a classe .fw-input-select.

<div class="fw-model fw-input">
    <label class="fw-descr-top">Sexo:</label>
    <select name="slct_sexo" class="fw-input-select">
      <option value="M">Masculino</option>
      <option value="F">Feminino</option>
    </select>
</div>

<div class="fw-input">
    <label class="fw-descr-top">Sexo:</label>
    <select name="slct_sexo" class="fw-input-select">
      <option value="M">Masculino</option>
      <option value="F">Feminino</option>
    </select>
</div>

Máscaras

Para atribuir máscaras aos campos é necessário incluir no elemento o atributo data com as informações da máscara no formato JSON string.

{
    "picture": "@!"
}

Exemplo

<div class="fw-model fw-input">
    <label class="fw-descr-top-obrigat">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>
 
<div class="fw-model fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>

As máscaras seguem o mesmo formato do AdvPL e pode ser consultado aqui: Tabela de Pictures de Formatação.

Zooms

Para atribuir zooms aos campos é necessário incluir no elemento o atributo data com as informações do zoom no formato JSON string.

{
    "zoom": {
        "name": "zoom_item",
        "selection": [
            ["cod_item_compon","cod_item"],
            ["den_item","den_item_reduz"]
        ],
        "whereclause": {
            "fn": "setWhereClause",
            "args": ["item"]
        }
    }
}

As informações que devem ser atribuídas para o correto funcionamento do zoom são:

name: nome do zoom cadastrado no metadado Logix.
selection:
- lista com os campos que serão carregados ao selecionar o registro no zoom, o primeiro item é o nome do campo do formulário e o segundo é o nome do campo no zoom do qual o primeiro item receberá o valor.
whereclause:
- fn: função JavaScript que será executada quando o zoom for acionado para retornar o filtro SQL a ser considerado na apresentação dos registros do zoom.
- args: lista com valores que serão passados como parâmetros para a função definida no atributo fn.

Além das informações do zoom acima é necessário incluir nos elementos o atributo data-input-zoom
para que seja possível identificar quais campos possuirão zoom.

Exemplo

<div class="fw-input">
    <label class="fw-descr-top-obrigat">Componente atual:</label>
    <input type="text" name="cod_item_compon" class="fw-input-char" maxlength="15" data='{"picture":"@!","zoom":{"name":"zoom_item","selection":[["cod_item_compon","cod_item"],["den_item","den_item_reduz"]],"whereclause":{"fn":"setWhereClause","args":["item"]}}}' data-input-zoom>
</div>

Defindo o código da empresa

Para utilizar as rotinas do Logix a partir do workflow é necessário que haja o código da empresa que será utilizada na rotina. Para isso, deve criar um campo no formulário onde será informado o código da empresa e incluir para este campo o atributo data-cod-empresa. O valor informado no campo que possuir este atributo será considerado o código da empresa na rotina durante a execução.

Exemplo

<div class="fw-input">
    <label class="fw-descr-top-obrigat">Empresa:</label>
	<input type="text" name="cod_empresa" class="fw-input-char" maxlength="2" data='{"picture":"@!","zoom":{"name":"zoom_empresa","selection":[["cod_empresa","cod_empresa"],["den_empresa","den_empresa"]]}}' data-cod-empresa data-input-zoom>
</div>

Formulários Pai Filho

Nos formulários Pai Filho os campos filhos são criados dinamicamente conforme necessidade do usuário através de um botão criado automaticamente no workflow. Por serem criados dinamicamente, os estilos e comportamentos destes campos não seguem o mesmo padrão dos outros campos do formulário quando utilizado os estilos e eventos padrões do Logix. Para solucionar este problema é recomendável seguir os passos abaixo:

Anexos

Biblioteca JavaScript wfLogixUtil.js.