Ampliação da funcionalidade de planejamento em histórias

Ampliação de widgets de botão com caixas de diálogo personalizadas usando popups

Objective

After completing this lesson, you will be able to crie diálogos personalizados para botões usando popups e scripts.

Cenário: criar diálogos personalizados com popups

Assista a este vídeo para saber mais sobre o requisito da equipe para botões ampliados e diálogos personalizados para sua história de planejamento.

En

Sua equipe começou a trabalhar com a história de planejamento ampliado e o planejador copiou versões e o ano usando o botão de ação de dados ampliados que você criou. Eles vêm até você para obter orientação, pois têm várias ações de dados novas necessárias devido às diferentes combinações de versão e ano na história de planejamento.

Você sugere ampliar ainda mais o botão de ação de dados com um popup em que, em vez de simplesmente executar a ação de dados, os planejadores serão solicitados a selecionar a versão e o ano de origem e de destino necessários.

Eles também querem uma forma de criar facilmente versões privadas e excluir versões privadas quando a história está no modo de visualização, bem como publicar uma versão privada como uma nova versão pública.

Você trabalha com seu colega Kevin para entender totalmente o requisito empresarial e cria uma série de botões e popups personalizados que:

  1. Cria uma versão privada copiando uma versão existente, dando ao planejador a opção de copiar a versão com ou sem dados.
  2. Executa uma ação de dados com um prompt para permitir que o planejador selecione o ano de origem e de destino ao selecionar Copiar dados por versão e data. Ele também fornece uma caixa de diálogo personalizada quando a ação de dados está copiando e atualizando os dados na tabela, como mostrado abaixo.
  3. Atualiza e classifica novos membros de forma alfanumérica cada vez que a página é aberta, garantindo que os planejadores tenham as opções mais atualizadas para selecionar.
  4. Permite que eles publiquem uma versão privada como uma nova versão pública.
  5. Dá-lhes a capacidade de excluir uma versão privada que não é mais necessária.
Popup personalizado e caixas de diálogo de mensagem de espera.

Configuração da história

Antes de adicionar scripts, você deve primeiro adicionar os botões necessários à sua história e criar e configurar popups que usará.

História com o painel lateral esquerdo aberto e Adicionar popup à página destacada. Abaixo disso, são exibidos os pop-ups com códigos. Barra de ferramentas aberta para mostrar como adicionar um widget de botão a uma história.

Copiar versão com ou sem dados

A equipe deseja copiar uma versão existente para criar uma nova versão privada diretamente da história. Eles querem ter a opção de criá-la com ou sem dados. Para isso, você cria o botão BTN_CopyVersion e o popup POPUP_CopyVersion.

O pop-up POPUP_CopyVersion é configurado como mostrado:

Configuração de POPUP_CopyVersion

Copiar dados por versão e data

A equipe deseja ter uma ação de dados que permitirá selecionar versões e anos em vez de ter vários iniciadores de ação de dados na história. Eles querem um pop-up personalizado solicitando que eles aguardem até que a ação de dados termine de copiar os dados.

Para isso, você renomeia BTN_Copy para BTN_CopyData e cria os popups POPUP_CopyData e POPUP_Wait.

O popup POPUP_CopyData é configurado como exibido:

POPUP_CopyData é exibido entre os painéis lateral esquerdo e direito, com todos os elementos adicionados ao popup exibido no painel lateral esquerdo e as Configurações para o popup à direita.

O popup POPUP_Wait é configurado como exibido:

Configuração do POPUP_Wait.

Publicar versão privada como nova versão pública

A equipe quer publicar suas versões privadas como novas versões públicas e fazer isso diretamente a partir da história. Para isso, você cria o botão BTN_PublishAs e o popup POPUP_PublishAs.

O popup POPUP_PublishAs está configurado como exibido:

Configuração de POPUP_PublishAs.

Excluir uma versão privada

Se uma versão privada não for necessária, a equipe poderá excluí-la da história. Para isso, você cria o botão BTN_Delete e o popup POPUP_Delete.

O popup POPUP_Delete é configurado como exibido:

Configuração de POPUP_Delete

Código utilizado no cenário

Copiar versão

A equipe deseja copiar uma versão existente para criar uma nova versão privada diretamente da história. Eles querem ter a opção de criá-la com ou sem dados.

O seguinte código é adicionado ao evento BTN_CopyVersion - onClick:

Code Snippet
1
POPUP_CopyVersion.open();
Código utilizado em BTN_CopyVersion para abrir POPUP_CopyVersion.

Em seguida, o seguinte código é adicionado ao evento POPUP_CopyVersion - onButtonClick:

Code Snippet
1234567891011121314151617181920212223
// Copy with Data
if (buttonId === "Btn_Copy") {
	var oPlanning = TBLPLANNING.getPlanning();
	if (oPlanning) {
		var oBudgetVersion = oPlanning.getPublicVersion(DD_Copy_PublicVersion.getSelectedKey());
		if (oBudgetVersion) {
			oBudgetVersion.copy(INF_Copy.getValue(), PlanningCopyOption.AllData,  SO_Planning.getPlanningCategory(CategoryDropdown));
			SO_Planning.updateDropdowns("");
		}
	}
} 
//Copy without Data
else if (buttonId === "Btn_Copy_wo_Data") {
	oPlanning = TBLPLANNING.getPlanning();
	if (oPlanning) {
		oBudgetVersion = oPlanning.getPublicVersion(DD_Copy_PublicVersion.getSelectedKey());
		if (oBudgetVersion) {
			oBudgetVersion.copy(INF_Copy.getValue(), PlanningCopyOption.NoData, SO_Planning.getPlanningCategory(CategoryDropdown));
			SO_Planning.updateDropdowns("");
		}
	}
}	
POPUP_CopyVersion.close();
Código utilizado em POPUP_CopyVersion.

Copiar dados por versão e data

Quando o botão Copiar dados por versão e ano é selecionado na história, você deseja:

  1. As listas suspensas de versões e anos disponíveis são atualizadas e ordenadas.
  2. A caixa de diálogo pop-up Esperar é acionada.
  3. O pop-up Copiar dados solicita que os planejadores especifiquem os valores para os quatro parâmetros usando os menus suspensos.
  4. A ação de dados copia e atualiza os dados na tabela enquanto o popup de espera está na tela.
  5. O popup de espera é fechado quando a execução da ação de dados é concluída.
  6. O pop-up Copiar dados é fechado.

Para abrir o pop-up POPUP_CopyData quando o botão Copiar dados por versão e ano é selecionado na história, o seguinte script é adicionado ao evento BTN_CopyData – onClick:

Code Snippet
1
POPUP_CopyData.open();
Atualização do código no botão de ação de dados Copiar dados.

Antes de os planejadores selecionarem a versão e a data necessárias, a lista de versões terá que ser atualizada e ordenada. O seguinte código é adicionado ao evento POPUP_CopyData - onButtonClick:

Code Snippet
123
TBLPLANNING.getDataSource().refreshData();
//Call Global Script function to update and sort version and year
SO_Planning.updateVerYear();
Código para atualizar e ordenar a lista de opções de versões.

Em seguida, o seguinte código também é adicionado ao evento POPUP_CopyData - onButtonClick:

Code Snippet
1234567891011
if (buttonId === "Btn_CopyData") {
    POPUP_Wait.open();
    DataAction_1.setParameterValue("SourceVersion", DD_Source_Ver.getSelectedKey());
    DataAction_1.setParameterValue("TargetVersion", DD_Target_Ver.getSelectedKey());
    DataAction_1.setParameterValue("SourceYear", DD_Source_Yr.getSelectedKey());
    DataAction_1.setParameterValue("TargetYear", DD_Target_Yr.getSelectedKey());
    DataAction_1.execute();
    TBLPLANNING.getDataSource().refreshData();
    POPUP_Wait.close();
}
POPUP_CopyData.close();
Código para popup de seleção de dados.

Publicar versão privada como nova versão pública

A equipe quer publicar suas versões privadas como novas versões públicas e fazer isso diretamente a partir da história.

Para abrir o pop-up POPUP_PublishAs quando o botão Publicar como é selecionado na história, o seguinte script é adicionado ao evento BTN_PublishAs - onClick:

Code Snippet
12
INF_PublishAs.setValue("");
POPUP_PublishAs.open();
Código para BTN_PublishAs para iniciar o popup.

Em seguida, o seguinte código é adicionado ao evento POPUP_PublishAs - onButtonClick:

Code Snippet
123456789101112131415161718
if (buttonId === "Btn_Ok") {

	var newName = INF_PublishAs.getValue();
	console.log(["newName", newName]);
	
	if (newName !== "") {
		// publish private version myActual as public version with name
		var myVersion = TBLPLANNING.getPlanning().getPrivateVersion(DD_PublishAs_Versions.getSelectedText());
		console.log(["myVers", myVersion.getId()]);
		if (myVersion) {
			console.log(["myActualVersion ID", myVersion.getId()]);
			myVersion.publishAs(newName, SO_Planning.getPlanningCategory(DD_PublishAs_Category));
		}
		SO_Planning.updateDropdowns("");	
	}
}

POPUP_PublishAs.close();
Script usado no popup Publicar como.

Excluir uma versão privada

Se uma versão privada não for necessária, a equipe poderá excluí-la da história.

Para abrir o pop-up POPUP_Delete quando o botão Excluir é selecionado na história, o seguinte script é adicionado ao evento BTN_Delete - onClick:

Code Snippet
1
POPUP_Delete.open();

O código a seguir também foi adicionado a POPUP_Delete - onButtonClick:

Code Snippet
12345678910111213141516171819202122232425
if (buttonId === "Btn_Yes") {
	var oPlanning = TBLPLANNING.getPlanning();	
	var versionName = DD_Delete_Version.getSelectedText();
	//Delete all versions
	if (versionName === "All versions") {
		var oPrivatversions = TBLPLANNING.getPlanning().getPrivateVersions();
		console.log(["Version ", oPrivatversions]);		
		for (var i = 0; i < oPrivatversions.length; i++) {
			console.log(["Version ", oPrivatversions[i].getId()]);
			oPrivatversions[i].deleteVersion();
		}
	}
	else {
		//delete specific version
		if (oPlanning) {
			var oPrivateVersion = oPlanning.getPrivateVersion(versionName);
			if (oPrivateVersion) {
				oPrivateVersion.deleteVersion();
				SO_Planning.updateDropdowns("");
			}
		}
	}
}

POPUP_Delete.close();
Código utilizado em POPUP_Delete.

Atualizar na inicialização da página ou na atualização de tabela

O seguinte script foi adicionado a Page_1 – onInitialization e TBLPLANNING – onResultChanged:

Code Snippet
123456
//Call Global Script function to check for private versions
SO_Planning.updateButtonVisibility();
//Call Global Script function to populate dropdowns with private version names
SO_Planning.updateDropdowns("");
//Call Global Script function to update and sort version and year
SO_Planning.updateVerYear();
Código para atualização de página na inicialização.

Objetos de script

O seguinte script foi adicionado a SO_Planning – updateDropdowns:

Code Snippet
123456789101112131415161718192021222324
// clean up the dropdowns before adding values to them
DD_PublishAs_Versions.removeAllItems();
DD_Delete_Version.removeAllItems();

// retrieve all private versions available in the model
var privVersions = TBLPLANNING.getPlanning().getPrivateVersions();

//if private version exists
if (privVersions.length > 0) {
	// iterate over the private versions
	for (var i=0; i<privVersions.length; i++ ) {
		// add them to the dropdown boxes
		DD_PublishAs_Versions.addItem(privVersions[i].getId(),privVersions[i].getDisplayId());
		DD_Delete_Version.addItem(privVersions[i].getId(),privVersions[i].getDisplayId());
		if (selectedPrivateVersion === "" && i === 0) {
			DD_PublishAs_Versions.setSelectedKey(privVersions[i].getId());
			DD_Delete_Version.setSelectedKey(privVersions[i].getId());
		}
	}
	
	DD_Delete_Version.addItem("ALL","All versions");
	DD_Delete_Version.setSelectedKey("ALL");
	
}

O seguinte script foi adicionado a SO_Planning – updateVerYear:

Code Snippet
123456789101112131415161718192021222324252627282930313233343536373839404142
var i = 0;
var count_of_year = 0;
var version_mbr = TBLPLANNING.getDataSource().getMembers("Version");
var year_mbr = TBLPLANNING.getDataSource().getMembers("YearMonth");

var sort_list_version = ArrayUtils.create(Type.string);
var sort_list_year= ArrayUtils.create(Type.string);
var temp = ArrayUtils.create(Type.string);

for (i = 0;i<version_mbr.length; i++)
{
   sort_list_version[i] =  version_mbr[i].description + "," +version_mbr[i].id;
}

sort_list_version.sort();

for (i = 0;i<sort_list_version.length; i++)
{
   temp = sort_list_version[i].split(",");	  
   DD_Source_Ver.addItem( temp[1], temp[0]);
   DD_Target_Ver.addItem( temp[1], temp[0]);
}

for (i = 0;i<year_mbr.length; i++)
{
   if (year_mbr[i].description.length === 4)
   {
	   console.log (year_mbr[i].description); 
	   sort_list_year[i] = year_mbr[i].description + "," + year_mbr[i].id;
	   count_of_year++;
   }   
}

sort_list_year.sort();

for (i = 0;i < count_of_year; i++)
{
   temp = sort_list_year[i].split(",");	
   DD_Source_Yr.addItem(  temp[1], temp[0]);
   DD_Target_Yr.addItem(  temp[1], temp[0]);	
  
}

O seguinte script foi adicionado a SO_Planning – updateButtonVisibility:

Code Snippet
12345678910111213
// retrieve all private versions available in the model
var selectedPrivateVersion = TBLPLANNING.getPlanning().getPrivateVersions();

//if private version exists
if (selectedPrivateVersion.length > 0) {
	BTN_PublishAs.setVisible(true);
	BTN_Delete.setVisible(true);
	BTN_CopyData.setVisible(true);
} else {
	BTN_Delete.setVisible(false);
	BTN_PublishAs.setVisible(false);
	BTN_CopyData.setVisible(false);
}

Criar diálogos personalizados com popups

Fluxo de tarefa: neste exercício prático, você irá:

  • Crie um pop-up de diálogo de seleção de dados personalizados com menus suspensos.
  • Crie um pop-up personalizado de mensagem de espera.
  • Adicione scripts para executar a caixa de diálogo de seleção de dados e exiba mensagem de espera quando a ação de dados estiver em execução.
  • Adicione scripts ao botão, página e popups para garantir que eles sejam executados e estejam sempre atualizados.
ExerciseStart Exercise
Learning

SAP FacebookSAP YoutubeSAP LinkedIn