fluig forum

Versão atual:

Fluxo dos campos

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

Versões (4):

Ver a versão formatada

Instruir na logica

Comentário

new question