fluig forum

Fluxo dos campos

0

Saudações, estou fazendo um formulário, onde preciso que o mesmo vá aparecendo por etapas.

Porém não estou conseguindo que elas fluam do jeito que necessito.

Conseguem me auxiliar na resolução desse caso?

MEU FORMULÁRIO

<html>
<head>
    <link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="desabilitar.js" charset="utf-8"></script>
    <script type="text/javascript" src="contador.js" charset="utf-8"></script>
    <script type="text/javascript" src="contador1.js" charset="utf-8"></script>
    <script type="text/javascript" src="opendocument.js" charset="utf-8"></script>
    <script type="text/javascript" src="lixeira.js" charset="utf-8"></script>
    <script type="text/javascript" src="ShowCamera.js" charset="utf-8"></script>
</head>
<body>
<div class="fluig-style-guide">
<form name="form" role="form">
<!-- Dados da Reunião -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Dados da reunião</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="form-group col-md-2">
                    <label for="dt_reuniao">Data da Reunião</label>
                    <input type="text" name="dt_reuniao" id="dt_reuniao" class="form-control">
                </div>
                <div class="form-group col-md-3">
                    <label for="hora_reuniao">Hora da Reunião</label>
                    <input type="time" name="hora_reuniao" id="hora_reuniao" class="form-control" mask="00:00">
                </div>
                    <div class="form-group col-md-4">
                    <label for="str_local">Local</label>
                    <input type="text" name="str_local" id="str_local" class="form-control">
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <label>Empresa</label>
                    <input type="zoom" id = "empresa" name="empresa"
                        data-zoom="{
                            'displayKey':'emp_nome',
                            'datasetId':'dsFormEmpresas',
                            'maximumSelectionLength':'1',
                            'placeholder':'Selecione a empresa',
                            'fields':[
                                {'field':'emp_nome', 'label':'Nome'},
                                {'field':'cnpj', 'label':'CNPJ', 'standard':'true'}
                            ]
                        }"
                     />
                </div>
                <div class="form-group col-md-2">
                    <label>Nova Empresa</label>
                    <button type="button" name="novaEmpresa" id="novaEmpresa" class="btn btn-primary" onclick="window.open('http://controlecontabilidad2259.fluig.cloudtotvs.com.br/portal/p/1/ecmnavigation?app_ecm_navigation_doc=72')"">Cadastrar empresa</button>
                </div>
            </div>
        </div>
    </div>
<!--  Responsáveis -->
    <div class="panel panel-primary" id="FormatacaoResponsaveis">
        <div class="panel-heading">
            <h3 class="panel-title">Responsáveis</h3>
        </div>
        <div class="panel-body">
            <table tablename="responsaveistabela" id="responsaveistabela" class="table table-hover" addbuttonclass="button_responsavel" >
                <thead>
                    <tr>
                        <td>Colaboradores Responsáveis</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="zoom" id = "responsaveis" name="responsaveis"
                                data-zoom="{
                                    'displayKey':'colleagueName',
                                    'datasetId':'colleague',
                                    'placeholder':'Escolha o usuário',
                                    'fields':[
                                        {'field':'colleagueId', 'label':'ID'},
                                        {'field':'colleagueName', 'label':'Nome', 'standard':'true'},
                                        { 'field':'login', 'label':'Login'}
                                    ]
                                }"
                             />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
<!--  Participantes -->
    <div class="panel panel-primary" id="FormatacaoParticipantes">
        <div class="panel-heading">
            <h3 class="panel-title">Participantes</h3>
        </div>
        <div class="panel-body">
            <table tablename="participantestabela" id="participantestabela" class="table table-hover" addbuttonid="button_participante">
                <thead>
                    <tr>
                        <th>Participantes na Reunião</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="zoom" id = "participante" name="participante" 
                                data-zoom="{
                                    'displayKey':'nome',
                                    'datasetId':'dsFormContatos',
                                    'placeholder':'Selecione o participante',
                                    'fields':[
                                        {'field':'nome', 'label':'Nome'},
                                        {'field':'empresa', 'label':'Empresa'}
                                    ]
                                }"
                             />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
<!--  Pauta da Reunião -->
    <div class="panel panel-primary" name="FormatacaoPauta" id="FormatacaoPauta">
        <div class="panel-heading">
            <h3 class="panel-title">Pauta</h3>
        </div>
        <div class="form-group">
            <table tablename="tabelapautas" id="tabelapautas" class="table" noaddbutton="true">
                <thead>
                    <tr class="tableHeadRow"><th class="tableColumn">Número</th><th class="tableColumn">Descrição</th></tr>
                </thead>
                <tbody>
                    <tr class="tableBodyRow">
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form">
                                <label value="1" name="Num_Paut"id="Num_Paut">1</label>
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-9">
                            <div class="form-input">
                                <input type="text" name="desc_pauta" class="form-control">
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form-input">
                                <input type="button" class="btn btn-primary" name="anexo_Pauta"
                                 id="anexo_Pauta" value="Anexar" onclick="showCamera(this);" >
                            </div>
                        </td>        
                    </tr>            
                </tbody>
            </table>
            <button type="button" class="btn btn-primary" id="button_pauta" onclick="adiciona()">Nova Pauta</button>
        </div>
    </div>
<!--  Assuntos Discutidos -->
    <div class="panel panel-primary" id="FormatacaoAssuntos">
        <div class="panel-heading">
            <h3 class="panel-title">Assuntos Discutidos</h3>
        </div>
        <div class="form-group">
                <table tablename="tabelaassuntos" id="tabelaassuntos" class="table" noaddbutton="true">
                    <thead>
                        <tr class="tableHeadRow"><th class="tableColumn">Número</th><th class="tableColumn">Assunto</th></tr>
                    </thead>
                    <tbody>
                        <tr class="tableBodyRow">
                            <td class="fs-v-align-middle col-md-1">
                                <div class="form">
                                    <label value="1" name="Num_Assunt" id="Num_Assunt">1</label>
                                </div>
                            </td>
                            <td class="fs-v-align-middle col-md-10">
                                <div class="form-input">
                                    <input type="text" name="desc_assunto" class="form-control">
                                </div>
                            </td>
                            <td class="fs-v-align-middle col-md-1">
                                <div class="form-input">
                                    <input type="button" class="btn btn-primary" name="anexo_Assunto"
                                     id="anexo_acao" value="Anexar" onclick="showCamera1(this);" >
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            <button type="button" class="btn btn-primary" id="button_assunto"  onclick="adiciona1()">Novo Assunto</button>
        </div>
    </div>
<!--  Plano de Ação -->
    <div class="panel panel-primary" id="FormatacaoAcao">
        <div class="panel-heading">
            <h3 class="panel-title">Plano de Ação</h3>
        </div>
        <div class="form-group">
            <table tablename="tabelaacao" id="tabelaacao" class="table" noaddbutton="true">
                <thead>
                    <tr class="tableHeadRow">
                        <th class="tableColumn">Número</th>
                        <th class="tableColumn">Ação</th>
                        <th class="tableColumn">Responsável</th>
                        <th class="tableColumn">Dead Line</th>
                        <th class="tableColumn">Tempo previsto</th>
                        <th class="tableColumn">Tempo realizado</th>
                        <th class="tableColumn">Data de entrega</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="tableBodyRow">
                        <td class="fs-v-align-middle col-md-1">
                                <div class="form">
                                    <label value="1" name="Num_Acao" id="Num_Acao">1</label>
                                </div>
                            </td>
                        <td class="fs-v-align-middle col-md-4">
                            <div class="form-input">
                                <input type="text" name="desc_acao" class="form-control">
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-2">
                            <div class="form-input">
                                    <input type="zoom" id = "resp_acao" name="resp_acao"
                                data-zoom="{
                                    'displayKey':'colleagueName',
                                    'datasetId':'colleague',
                                    'placeholder':'Escolha o usuário',
                                    'fields':[
                                        {'field':'colleagueName', 'label':'Nome', 'standard':'true'},
                                        { 'field':'login', 'label':'Login'}
                                    ]
                                }"
                             />
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form-input">
                                <input type="date" name="dead_line" id="dead_line" class="form-control">
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form-input">
                                <input type="text" name="tempo_previsto" class="form-control">
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form-input">
                                <input type="text" name="tempo_executado" class="form-control">
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form-input">
                                <input type="text" name="dt_entrega" class="form-control">
                            </div>
                        </td>
                        <td class="fs-v-align-middle col-md-1">
                            <div class="form-input">
                                <input type="button" class="btn btn-primary" name="anexo_acao"
                                 id="anexo_Pauta" value="Anexar" onclick="showCamera2(this);" >
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button type="button" class="btn btn-primary" id="button_acao" onclick="adiciona2()">Nova Ação</button>
        </div>
    </div>

</form>
</div>
</body>
<!-- Calendário para data -->
    <script type="text/javascript">
        var mySimpleCalendar = FLUIGC.calendar('#dt_reuniao');
    </script>
    <script type="text/javascript">
        var mySimpleCalendar = FLUIGC.calendar('#dead_line');
    </script>
</html>

Meu DIPLAYFIELDS


function displayFields(form,customHTML){ 

    var activity = getValue('WKNumState');
    var pautas = form.getChildrenIndexes("tabelapautas");


    if (activity == 0 || activity == 17) {
        form.setVisibleById('FormatacaoPauta', false);
        form.setVisibleById('FormatacaoAssuntos', false);
        form.setVisibleById('FormatacaoAcao', false);
        form.setVisibleById('button_pauta', false);
        form.setVisibleById('button_assunto', false);
        form.setVisibleById('button_acao', false);
    }    

    if (activity == 27) {
        form.setVisibleById('FormatacaoAssuntos', false);
        form.setVisibleById('FormatacaoAcao', false);
        form.setVisibleById('button_assunto', false);
        form.setVisibleById('button_acao', false);
    }

    if (activity == 29) { 
        form.setVisibleById('FormatacaoAcao', false);
        form.setVisibleById('button_acao', false);
    }

    if (activity == 0 || activity == 17 || activity == 27) {
        form.setVisibleById('button_responsavel', false);
        form.setVisibleById('button_participante', false);
    }

}

MEU ENABLEFIELDS

function enableFields(form) {
    var activity = getValue('WKNumState');
    var pautas = form.getChildrenIndexes("tabelapautas");
    var participante = form.getChildrenIndexes("participantestabela");
    var responsavel = form.getChildrenIndexes("responsaveistabela");
    var assuntos = form.getChildrenIndexes("tabelaassuntos");
    var acao = form.getChildrenIndexes("tabelaacao");

    if (activity != 0 && activity != 17 && activity != 27) {
        form.setEnabled('dt_reuniao', false);
        form.setEnabled('hora_reuniao', false);
        form.setEnabled('str_local', false);
        form.setEnabled('empresa', false);

        form.setEnabled('button_responsavel', false);
        for(i = 0; i < responsavel.length; i++){
            form.setEnabled('responsaveis___'+responsavel[i], false);
        }

        form.setEnabled('button_participante', false);
        for(i = 0; i < participante.length; i++){
            form.setEnabled('participante___'+pautas[i], false);
        }
    }
    if (activity != 27) {

        for(i = 0; i < pautas.length; i++){
            form.setEnabled('FormatacaoPauta', false);

        form.setEnabled('button_pauta', false);
        for(i = 0; i < responsavel.length; i++){
            form.setEnabled('pautas___'+pautas[i], false);
        }
        }
    }
    if (activity != 29) {

        for(i = 0; i < assuntos.length; i++){
            form.setEnabled('num_assuntos___'+assuntos[i], false);
            form.setEnabled('desc_assuntos___'+assuntos[i], false);
        }
    }
    if (activity != 31) {
        for(i = 0; i < acao.length; i++){
            form.setEnabled('num_acao___'+acao[i], false);
            form.setEnabled('desc_acao___'+acao[i], false);
            form.setEnabled('resp_acao___'+acao[i], false);
            form.setEnabled('prazo_acao___'+acao[i], false);
        }
    }
}

Vou colocar um Print do meu WORKFLOW em anexo

compartilhar
Anexos
  • workFlow.PNG
    1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
    2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
    3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
    4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
    5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

    0 resposta

    Não é a resposta que estava procurando? Procure outras perguntas com as tags displayfields enablefields eclipse ou faça a sua própria pergunta.