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 escrever JavaScript do lado do cliente e do servidor.
Formulário de páginas de programação
Para acessar as páginas de programação, navegue até Scheduler do Sistema > Cronogramas > Páginas do cronograma.
O formulário fornece os seguintes campos, dependendo do tipo de exibição selecionado:
Tabela 1. Formulário de 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 de URI "sysparm_page_schedule_type". Por exemplo, uma página de programação pode ser acessada da seguinte forma:
Como alternativa, a página de programação também pode ser acessada definindo o parâmetro de URI "sysparm_page_sys_id" 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 páginas de programação do tipo Calendário.
O nome da função de inicialização especifica o nome da função JavaScript a ser chamada dentro da função de script do cliente para páginas de programação do tipo calendário.
HTML
Cadeia de caracteres
Nota:
Esta funcionalidade é usada somente por páginas de programação do tipo Calendário.
O campo HTML é uma seção passível de script 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 que são necessários.
Client script
Cadeia de caracteres
O client script é uma seção passível de script que permite configurar opções de exibição da página de programação. A API é diferente dependendo do tipo de exibição da página de programação e é discutida abaixo.
Processador AJAX do servidor
Cadeia de caracteres
Nota:
Esta funcionalidade é usada somente por páginas de programação do tipo Calendário.
O processador AJAX do servidor é específico para páginas de programação do tipo calendário que são usadas 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".
A página de programação da linha do tempo faz referência a uma inclusão de script que se estende de ResumoTimelineSchedulePage para executar modificações dinâmicas 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 aplicativo (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 linhas do tempo
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 a inclusão de script correspondente utilizando a maior parte da API descrita acima.
Para este exemplo, vamos criar uma linha do tempo de resumo de incidentes 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 é diferenciada por um ícone de ponto diferente. Além disso, todos os incidentes encerrados devem ser exibidos na linha do tempo em um grupo separado que mostra a duração do incidente antes de ser encerrado. Como o gerente de projeto 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 dentro dele.
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: verificado
Cliente chamável: verificado
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) { }
});
Observe que o texto em negrito é o valor do campo Tipo de programação da página de programação.
A página exibe uma linha do tempo conforme especificado pela página de programação e 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. Exibição de incidente de exemplo de linha do tempo
A tentativa de mover um incidente encerrado para qualquer lugar exibe a mensagem de erro esperada.Figura 3. Erro ao mover exemplo de linha do tempo
Mover o incidente: preciso de mais memória exibe a seguinte caixa de confirmação.Figura 4. Exemplo de linha do tempo Confirmar fechamento
Clicar no botão Cancelar fecha a sobreposição. Clicar no botão OK atualiza o incident_state do registro e exibe a seguinte caixa de sucesso.Figura 5. Exemplo de sucesso no encerramento da linha do tempo
Depois de clicar em OK, fica claro que o incidente agora está listado no grupo Incidentes encerrados.Figura 6. Incidente de exemplo de linha do tempo atualizado
