Áreas roláveis

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 1 min. de leitura
  • Uma área rolável é uma divisão em que o conteúdo rola de baixo para cima ao longo do tempo.

    Qualquer conteúdo HTML pode rolar, e qualquer coisa dentro do scroller é HTML operacional com links e imagens funcionais.

    Para criar áreas roláveis, enrole o conteúdo de rolagem dentro de um marcador scrollable_area, provavelmente em uma Página de IU:
        <g:scrollable_area height="100px">
            <g2:evaluate var="jvar_temp" expression="var kb = new GlideRecord('kb_knowledge');"/>
            <g:inline template="kb_section.xml"/>
        </g:scrollable_area>

    O sistema criará um DIV de 100 pixels de altura e o conteúdo rolará automaticamente de baixo para cima. Se você tiver um bloco de texto de 1000 pixels de altura, por exemplo, verá os 100 pixels superiores e os pixels 2-101, depois 3-102, etc. Uma vez que atinge o topo, ele vai se enrolar de volta para o fundo.

    Este código de amostra criará um scroller com uma lista de incidentes de prioridade 1.
    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
      <g2:evaluate var="jvar_inc">
        var inc = new GlideRecord('incident');
        inc.addActiveQuery();
        inc.addQuery('priority',1);
        inc.query();
      </g2:evaluate>
    
      <g2:scrollable_area height="100px"> 
        <table border="0" cellspacing="2" cellpadding="0" width="100%">
          <j2:while test="$[inc.next()]">
            <j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
            <j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>
    	<tr>
    	  <td>
                <a href="$[jvar_inc_link]">
                  <IMG SRC="images/services.png" style="padding-right:10px"></IMG>
                </a>
                <a href="$[jvar_inc_link]" style="padding-right:10px; color:blue">$[inc.number]</a>
              </td>
              <td>$[inc.short_description]</td>
            </tr>
          </j2:while>
          <tr>
            <td align="center" colspan="2"><a href="$[jvar_inc_list_link]" style="color:blue">View all active incidents</a></td>
          </tr>
        </table>
      </g2:scrollable_area> 
    </j:jelly>