Rating Stars em formulário customizado

TOTVS Fluig Páginas (WCM)
, , ,
1

Estou tentando colocar um campo Rating Stars em formulário customizado, no Developer Studio, e quando abro o formulário eu tenho o seguinte erro:

2018-05-23 11:36:03,076 ERROR [com.datasul.technology.webdesk.customization.CustomizationManager] (default task-52) [Solicitação: 0] - Processo: HelpdeskTI - versão: 26 - Usuário Executor : 01 - Gestor : Não - Substituto : Não - Estado atual : 0 - Executando evento : displayFieldsERRO AO EXECUTAR SCRIPT -> NOK - sun.org.mozilla.javascript.internal.EcmaError: ReferenceError: "FLUIGC" is not defined. (#30) in at line number 30

Eu adicionei no formulário HTML as linhas:

e também:

e no evento displayFieldes eu coloquei: FLUIGC.stars(".my-rating", { stars: 10, value: 2, SizeClass: 'fluigicon-lg',});

o que será que está faltando? Desconfio que o rating star só pode usar em widgets, e não no formulário html.

2

as linhas adicionadas foram os headers para fluig-style-guide-ratingstars.min.css e fluig-style-guide-ratingstars.min.js. No hmtl também inseri um div para ser transformado: div class=“my-rating”

3

Opa, é possível usar sim. Eu usei o meu html do form dessa forma:


<html>
   <head>
      <link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
      <link rel="stylesheet" type="text/css" href="/portal/resources/style-guide/css/fluig-style-guide-ratingstars.min.css">
   </head>
   <body onload="abreForm()">
      <div class="fluig-style-guide">
         <form name="form" role="form">
                  <div class="form-group row row-danger" name="divAval" id="divAval">
                      <div class="col-sm-12">
                          <div class="form-group">
                              <label for="divStar">Avaliação</label>
                              <div class="my-rating" id="divStar" name="divStar"></div>
                          </div>
                      </div>
                  </div>
    </form>
       </div>
   </body>
   <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="/portal/resources/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>
   <script type="text/javascript" src="custom.js" charset="utf-8"></script>
</html>

Na função "abreForm()" que está dentro do custom.js que estou importando no final da página e estou chamando no onload do body ficou assim:


function abreForm(){
    var starsCallback = FLUIGC.stars(".my-rating", {
        stars: 5,
        value: 5,
        text: ['Muito Ruim', 'Ruim', 'Regular', 'Bom', 'Muito Bom'],
        sizeClass: 'fluigicon-xl'
    });

    starsCallback.on("click", function(obj) {
        var pos = $(this).index();
        $('#avaliacao').val(pos);
    });
}

Abraço!