Páginas do cronograma

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 8 min. de leitura

    • Uma página de programação é um registro que contém uma coleção de scripts que permitem a geração personalizada de uma exibição de calendário ou linha do tempo.

    A criação de páginas de programação da linha do tempo requer compreensão do fluxo de página/evento e a capacidade de gravar JavaScript do lado do cliente e do servidor.

    Formulário Páginas de programação

    Para acessar as páginas de programação, navegue até Scheduler do Sistema > Agendamentos > Páginas do cronograma.

    O formulário fornece os seguintes campos, dependendo de Tipo de exibição selecionado:
    Tabela 1. Formulário Páginas de programação
    Campo Tipo de campo Descrição
    Nome Cadeia de caracteres Nome geral usado para identificar a página de programação atual.
    Tipo de programação Cadeia de caracteres O tipo de programação é uma cadeia de caracteres usada para identificar exclusivamente a página de programação por meio do parâmetro URI "sysparm_page_schedule_type". Uma página de programação pode ser acessada da seguinte forma:

    /show_schedule_page.do?sysparm_type

    Como alternativa, a página de programação também pode ser acessada definindo a opção " sysparm_page_sys_idParâmetro de URI para o identificador exclusivo do sistema hexadecimal de 32 caracteres da página de programação.
    Tipo de Exibição Escolha Cada tipo de exibição exibe diferentes combinações de campos. Há duas opções disponíveis:
    • Calendários
    • Linhas do tempo
    Descrição Cadeia de caracteres Descrição geral que fornece informações adicionais sobre a página de programação atual. Este campo não é necessário.
    Nome da função de inicialização Cadeia de caracteres
    Nota:
    Esta funcionalidade é usada somente por Calendário páginas de programação de tipo.
    O nome da função init especifica o nome da função JavaScript a ser chamada dentro do Client script função para páginas de programação do tipo de calendário.
    HTML Cadeia de caracteres
    Nota:
    Esta funcionalidade é usada somente por Calendário páginas de programação de tipo.
    O campo HTML é uma seção programável que é analisada pelo Jelly e injetada na página de exibição antes do restante do calendário. Ele pode ser usado para passar variáveis do servidor e definir campos extras necessários.
    Client script Cadeia de caracteres O client script é uma seção programável que permite configurar opções da exibição da página de programação. A API é diferente dependendo do tipo de exibição de página de programação e é discutida abaixo.
    Processador AJAX do servidor Cadeia de caracteres
    Nota:
    Esta funcionalidade é usada somente por Calendário páginas de programação de tipo.
    O processador Server AJAX é específico para páginas de programação do tipo de calendário que é usado para retornar um conjunto de itens de programação e períodos a serem exibidos.

    Páginas de programação da linha do tempo

    Uma Página de programação da linha do tempo é um registro específico que contém informações de configuração para exibir pontos e períodos baseados no tempo em uma "linha do tempo" da mesma forma.

    A página de programação da linha do tempo faz referência a uma inclusão de script que se estende de AbstractTimelineSchedulePage para executar modificação dinâmica na linha do tempo com base em diferentes eventos e condições. A página de programação e a inclusão de script para geração de linha do tempo permitem personalização extrema e sua interface de programação de aplicações (API) correspondente está documentada abaixo.

    O diagrama a seguir mostra a série de eventos que ocorrem quando uma página de programação da linha do tempo é acessada. Depois que a linha do tempo for carregada, todos os eventos subsequentes, como eventos resultantes da interação da linha do tempo (por exemplo, mover um período da linha do tempo), seguem o mesmo fluxo lógico mostrado na caixa de evento cinza.
    Figura 1. Fluxo da linha do tempo

    Aplicações que usam páginas de programação para gerar cronogramas

    • Gestão de projetos
    • Cronogramas de manutenção
    • Rotação de plantão do grupo
    • Gestão de serviços de campo

    Exemplo de página de programação da linha do tempo

    O exemplo a seguir demonstra como criar uma página de programação da linha do tempo com inclusão de script correspondente usando a maioria da API descrita acima.

    Para este exemplo, vamos criar uma Linha do tempo de resumo do incidente para um gerente de suporte de projeto visualizar todos os novos incidentes. Todos os novos incidentes devem ser exibidos como pontos únicos em que a prioridade do incidente é distinguida por um ícone de ponto diferente. Todos os incidentes encerrados devem ser exibidos na linha do tempo em um grupo separado que mostre a duração do incidente antes de ser encerrado. Como o gerente de projetos deseja fechar facilmente novos itens que são resolvidos sem usar listas de formulário, lidaremos com o evento de movimentação vertical, permitindo que os novos incidentes sejam arrastados para o grupo de incidentes encerrados ou itens em.

    Página de Programação

    Crie uma nova página de programação com as seguintes propriedades:
    • Nome Incidentes de hardware
    • Tipo de programação : incident_timeline
    • Tipo de exibição : Linha do tempo
    • Client Script :
    // Set our page configuration
glideTimeline.setReadOnly(false);
glideTimeline.showLeftPane(true);
glideTimeline.showLeftPaneAsTree(true);
glideTimeline.showTimelineText(true);
glideTimeline.showDependencyLines(false);
glideTimeline.groupByParent(true);
glideTimeline.setDefaultPointIconClass('milestone');
 
// We will define what items to display and provide a custom event handler for moving new items to the closed state
glideTimeline.registerEvent('getItems', 'IncidentTimelineScriptInclude');
glideTimeline.registerEvent('elementMoveY', 'IncidentTimelineScriptInclude');

    Inclusão de script

    Agora que a página de programação foi criada, precisamos gerar uma inclusão de script correspondente para os eventos que foram registrados. Crie uma nova inclusão de script com as seguintes propriedades:
    • Nome IncidentTimelineScriptInclude
    • Ativo : Marcado
    • Glide AJAX habilitado : Marcado
    • Script :
    // Class Imports
 
var IncidentTimelineScriptInclude = Class.create();
IncidentTimelineScriptInclude.prototype = Object.extendsObject(AbstractTimelineSchedulePage, {
 
  /////////////////////// // GET_ITEMS ///////////////////////////////////////
  getItems:function() { 
    // Specify the page title 
    this.setPageTitle('My Custom Incident Summary Timeline');
 
    var groupNew = new GlideTimelineItem('new');
    groupNew.setLeftLabelText('New Incidents');
    groupNew.setImage('../images/icons/all.gifx');
    groupNew.setTextBold(true);
    this.add(groupNew);
 
    var groupClosed = new GlideTimelineItem('closed');
    groupClosed.setLeftLabelText('Closed Incidents');
    groupClosed.setImage('../images/icons/all.gifx');
    groupClosed.setTextBold(true);
    groupClosed.setIsDroppable(true);
 
    // This allows us to drag an open incident onto the closed group row. 
    this.add(groupClosed);
 
    // Get all the incidents and let's add only the new/closed ones appropriately 
    var now_GR = new GlideRecord('incident');
    gr.query(); 
    while(gr.next()) { 
       // Only loop through new/closed incidents 
       if(gr.incident_state != '1' && gr.incident_state != '7') continue;
 
       // Ok, we have a new/closed incident. Create the item and the span first. 
       var item = new GlideTimelineItem(gr.getTableName(), gr.sys_id); 
       var span = item.createTimelineSpan(gr.getTableName(), gr.sys_id);
 
       // Specific properties for a new incident 
       if(gr.incident_state == '1') { // New 
         item.setParent(groupNew.getSysId()); 
         item.setImage('../images/icons/open.gifx');
         span.setTimeSpan(gr.getElement('opened_at').getGlideObject().getNumericValue(),
                          gr.getElement('opened_at').getGlideObject().getNumericValue());
 
         // We will show different colors based upon the priorities only for new incidents 
         switch(gr.getElement('priority').toString()) {
           case '1': span.setPointIconClass('red_circle'); break; 
           case '2': span.setPointIconClass('red_square'); break; 
           case '3': span.setPointIconClass('blue_circle'); break; 
           case '4': span.setPointIconClass('blue_square'); break; 
           case '5': span.setPointIconClass('sepia_circle'); break; 
           default: // Otherwise, the default point icon class will be used (Milestone)
          }
         }
        // Specific properties for a closed incident 
        else if(gr.incident_state == '7') { 
          item.setParent(groupClosed.getSysId()); 
          item.setImage('../images/icons/closed.gifx');
          span.setTimeSpan(gr.getElement('opened_at').getGlideObject().getNumericValue(),
                           gr.getElement('closed_at').getGlideObject().getNumericValue()); }
 
        // Common item properties 
        item.setLeftLabelText(gr.short_description);
 
        // Common span properties
        span.setSpanText(gr.short_description);
        span.setTooltip('<strong>' + GlideStringUtil.escapeHTML(gr.short_description) + '</strong><br>' + gr.number);
        span.setAllowXMove(false);
        span.setAllowYMove(gr.canWrite() ? true:false);
        span.setAllowYMovePredecessor(false);
        span.setAllowXDragLeft(false);
        span.setAllowXDragRight(false);
 
        // Now we add the actual item 
        this.add(item); 
        } } ,
 
 
   //////////////////////// // ELEMENT_MOVE_Y /////////////////////////////////////////////////////////////
 
   /**
   * This is one of the AbstractTimelineSchedulePage event handler methods that corresponds to a vertical
   * move. The arguments for this function are defined in the API section of the event handler methods.
   */
  elementMoveY: function(spanId, itemId, newItemId) {
 
    // Get information about the current incident 
    var now_GR = new GlideRecord('incident');
    gr.addQuery('sys_id', spanId);
    gr.query(); 
    if(!gr.next()) 
      return this.setStatusError('Error', 'Unable to lookup the current incident.');
 
    // Only allow the new incidents to have their state adjusted. 
    if(gr.incident_state != '1') 
      return this.setStatusError('Error','Only new incidents can have their state adjusted.');
 
    // Get information about the dropped GlideTimelineItem. If it was dropped in an item on the "New Incidents" 
    // group let's do nothing. If it was dropped in the "Closed Incidents" then let's adjust the state automatically. 
    var grDropped = new GlideRecord('incident');
    grDropped.addQuery('sys_id', newItemId );
    grDropped.query(); 
    if(!grDropped.next() || grDropped.incident_state == '7') { 
       // This means the dropped item was either the 'Closed Incidents' group (which has no record or sys_id) or an 
       // existing incident that is closed. The 'New Incidents' also has no sys_id; however, the default behavior for 
       // items without a sysId is to be non-droppable. This is why we explicitly denoted the 'Closed Incidents' to  
       // be marked as "droppable".
 
       // Return a dialog prompt 
       this.setStatusPrompt('Confirm', 'Are you sure you want to close: ' + 
              '<div style="margin:10px 0 10px 14px;padding:4px;background-color:#EBEBEB;"><strong>' +
               GlideStringUtil.escapeHTML(gr.short_description) + 
               '</strong><br/><div class="font_smaller">' + now_GR. number + '</div></div>', 
               'this._elementMoveYHandler_DoClose', // This function is for when the OK button is clicked. 
               'this._elementMoveYHandler_DoNothing', // This function is for when the Cancel button is clicked. 
               'this._elementMoveYHandler_DoNothing'); // This function is for when the Close button is clicked.
       } } ,
 
  _elementMoveYHandler_DoClose: function(spanId, itemId, newItemId) { 
    // Notice that this function takes the same function arguments as the original function for which it  
    // is a custom event handler for.
 
    // Update the database record from 'New' to 'Closed'. 
    var now_GR = new GlideRecord('incident');
    gr.addQuery('sys_id', spanId);
    gr.query();
    gr.next();
    gr.setValue('incident_state', '7');
    gr.update();
 
    // This will re-render the timeline showing the updated item in the closed group. 
    this.setDoReRenderTimeline(true);
 
    // Let's show a success message 
    this.setStatusSuccess('Success', '<strong>' + gr.short_description + '</strong> was successfully closed.'); } ,
 
  // Since the user clicked cancel or close we simply do nothing.
  _elementMoveYHandler_DoNothing: function(spanId, itemId, newItemId) { }
 
 });

    Capturas de tela/resultados

    1. Navegue até:

      http://[YOURINSTANCE]:8080/show_schedule_page.do?sysparm_page_schedule_type=incident_timeline

      Observe que o texto em negrito é o valor da página de programação Tipo de programação campo.

    2. A página exibe uma linha do tempo conforme especificado pela página de programação e pela inclusão de script criada. Um link para esta página pode ser criado e colocado como um módulo ou ação de IU, conforme necessário.
      Figura 2. Visualização de incidente de exemplo de linha do tempo
    3. Tentar mover um incidente encerrado para qualquer lugar exibe a mensagem de erro esperada.
      Figura 3. Exemplo de linha do tempo de erro ao mover
    4. Movendo o incidente: Preciso de mais memória exibe a seguinte caixa de confirmação.
      Figura 4. Confirmar fechamento de exemplo de linha do tempo
    5. Clicando em Cancelar fecha a sobreposição. Clicando em OK na verdade, o botão atualiza o incident_state do registro e exibe a seguinte caixa de sucesso.
      Figura 5. Sucesso no fechamento de exemplo de linha do tempo
    6. Depois de clicar OK está claro que o incidente agora está listado em Incidentes encerrados grupo.
      Figura 6. Incidente de exemplo de linha do tempo atualizado
      Linha do tempo de um incidente de exemplo