Formulário - Componente para selecionar multiplos dados

Tenho um formulário onde gostaria de cadastrar um grupo de usuários, estes usuários são pré-carregados em uma consulta no dataset colleague, mas não encontrei um componente dentro do style guide para exibir estes dados em tela.

A solução que encontrei para exibir os dados, foi utilizando um plugin JQuery o select2

Tem algum componente dentro do fluig que faça algo similar?

Pq vc não usa um pai filho? Se isso não serve para vc, não consegui entender bem sua necessidade e peço que dê mais detalhes.

Bom dia,

Você pode utilizar um SELECT e adicionar a propriedade MULTIPLE


<select multiple class="form-control" name="list4">
    <option value="opcao 1">opcao 1</option>
    <option value="opcao 2">opcao 2</option>
</select>

select_multiple.png

Caso este componente não sirva, você pode fazer como o @Claudio comentou e utilizar um componente Pai X Filho:


<table tablename="tbGrupo" id="tbGrupo" noaddbutton="true" nodeletebutton="true" class="table table-condensed table-striped table responsive">
    <thead>
        <tr>
            <th>Grupo</th>
            <th>
                <span class="fluigicon fluigicon-plus-sign fluigicon-md" onclick="wdkAddChild('tbGrupo');"></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input id="grp" class="hide" name="grp">
                <input type="zoom" id="grupos" class="form-control" name="grupos"
                data-zoom="{'displayKey':'groupDescription',
                'datasetId':'group','filterValues':'groupPK.companyId,1',
                'fields':[{'field':'groupDescription','label':'Nome do Grupo','search':'true'
                },{'field':'groupId',
                    'label':'Código'}] }">
            </td>
            <td>
                <span class="fluigicon fluigicon-minus-sign fluigicon-md" onclick="fnWdkRemoveChild(this);"></span>
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    function setSelectedZoomItem(selectedItem) {

        field = selectedItem.inputName;
        campo = field.substr(0,6);

        if (campo == "grupos") {
            aux = field.substr(6, field.length);
            eval('$("#grp' + aux + '").val(selectedItem.groupId)');  // Seta o código do grupo no campo oculto
        }
    }
</script>

Boa sorte.

:warning: Atenção: Esta publicação foi transferida automaticamente do fórum antigo, mas os anexos não foram incluídos.

Tive uns problemas nas primeiras experiências com o Pai x Filho , mas com esse exemplo consegui entender bem melhor o componente, e ele vai me atender muito bem.
Obrigado !