Input type zoom dentro de um FLUIGC.modal

Pessoal, estou querendo colocar um field input type zoom dentro do um FLUIGC.modal, abaixo o código:

FLUIGC.modal

const htmlModal = `
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide.min.css">
    <script src="/portal/resources/js/jquery/jquery.js"></script>
    <script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script src="/style-guide/js/fluig-style-guide.min.js"></script>
    <!-- CUSTOM -->
    <link href="/style-guide/css/fluig-style-guide-filter.min.css" rel="stylesheet" type="text/css">
    <link href="/style-guide/css/fluig-style-guide-ratingstars.min.css" rel="stylesheet" type="text/css">
    <script src="/style-guide/js/fluig-style-guide-filter.min.js"></script>
    <script src="/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-addtocalendar.min.css">
    <script src="/style-guide/js/fluig-style-guide-addtocalendar.min.js"></script>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body class="">
    <form role="form" action="" id="formModal">
      <div class="col">
        <div class="row">
          <div class="col">
            <div class="form-group col-md-6">
              <label for="textareaWhat">O que?</label>
              <textarea class="form-control" name="textareaWhat" id="textareaWhat" cols="30" rows="3"></textarea>
            </div>
          </div>
          <div class="col">
            <div class="form-group col-md-6">
              <label for="textareaWhere">Onde?</label>
              <textarea class="form-control" name="textareaWhere" id="textareaWhere" cols="30" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="form-group col-md-6">
              <label for="textareaHow">Como?</label>
              <textarea class="form-control" name="textareaHow" id="textareaHow" cols="30" rows="3"></textarea>
            </div>
          </div>
          <div class="col">
            <div class="form-group col-md-6">
              <label for="textareaWhy">Porque?</label>
              <textarea class="form-control" name="textareaWhy" id="textareaWhy" cols="30" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="form-group col-md-2">
              <label for="inputDateStart">Data Ínicio previsto</label>
              <input type="date" class="form-control" name="inputDateStart" id="inputDateStart" placeholder="">
            </div>
            <div class="form-group col-md-2">
              <label for="inputDateConclusion">Prazo de conclusão</label>
              <input type="date" class="form-control" name="inputDateConclusion" id="inputDateConclusion" placeholder="">
            </div>
            <div class="form-group col-md-2">
              <label for="inputValueActivity">Quanto?</label>
              <input class="form-control" type="number" name="inputValueActivity" id="inputValueActivity">
            </div>
            <div class="form-group col-md-4">
              <label for="inputNameResponsavelActivity">Responsável</label>
                                                    <input class="form-control" type="zoom" name="inputNameResponsavelActivity"
                                                        id="inputNameResponsavelActivity" data-zoom="{
                                                            'displayKey':'colleagueName',
                                                            'datasetId':'colleague',
                                                            'maximumSelectionLength':'1',
                                                            'placeholder':'Escolha o usuário',
                                                            'fields':[
                                                                    {
                                                                        'field':'colleagueId',
                                                                        'label':'ID'
                                                                    },{
                                                                        'field':'colleagueName',
                                                                        'label':'Nome',
                                                                        'standard':'true'
                                                                    }
                                                            ]
                                                    }">
            </div>
          </div>
        </div>
    </form>          
<script src='/webdesk/vcXMLRPC.js' type="text/javascript"></script>
</body>
</html>
`;
const modalAddActivity = FLUIGC.modal({
    title: 'Atividade do plano de ação',
    content: htmlModal,
    id: 'fluig-modal',
    size: 'full',
    formModal: 'true',
    actions: [{
      'label': 'Save',
      'bind': 'data-open-modal',
    }, {
      'label': 'Close',
      'autoClose': true
    }]
  }, function (err, data) {
    if (err) {
      // do error handling
      console.log(err);
    } else {
      // do something with data
    }
  });

Já tentei com apenas CSS, mas, o modal só abria apenas uma vez. Só para constextualizar, estamos fazendo um processo de plano de ação e cada atividade do plano de ação será incluída a partir desse modal, ao salvar esse modal os dados irão para uma table, no mesmo form, mas, isso não vem ao caso.

Desde já agradeço.

compartilhar
  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!

2 respostas

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