Ampliación de widgets de botones con cuadros de diálogo personalizados mediante ventanas emergentes

Objective

After completing this lesson, you will be able to crear diálogos personalizados para botones mediante ventanas emergentes y scripting.

Escenario: Crear diálogos personalizados con ventanas emergentes

Vea este vídeo para obtener más información sobre el requisito del equipo de botones ampliados y diálogos personalizados para su historia de planificación.

¿No?

Su equipo ha empezado a trabajar con la historia de planificación ampliada y el planificador ha estado copiando versiones y el año con el botón de acción de datos ampliada que ha creado. Acuden a usted para pedirle consejo, ya que tienen una serie de acciones de datos nuevas que se requieren debido a las diferentes combinaciones de versión y año en la historia de planificación.

Le sugerimos que amplíe aún más el botón de acción de datos con una ventana emergente en la que, en lugar de simplemente ejecutar la acción de datos, se pedirá a los planificadores que seleccionen la versión fuente y de destino y el año necesarios.

También desean una forma de crear fácilmente versiones privadas y eliminar versiones privadas cuando la historia está en modo de vista, así como publicar una versión privada como una nueva versión pública.

Trabaja con su colega Kevin para comprender completamente el requisito empresarial y crea una serie de botones y ventanas emergentes personalizadas que:

  1. Crea una versión privada copiando una versión existente, dando al planificador la opción de copiar la versión con o sin datos.
  2. Ejecuta una acción de datos con una petición para permitir que el planificador seleccione el año de origen y de destino cuando selecciona Copiar datos por versión y fecha. También les proporciona un diálogo personalizado cuando la acción de datos copia y actualiza los datos en la tabla, como se muestra a continuación.
  3. Actualiza y ordena los nuevos miembros de forma alfanumérica cada vez que se abre la página, lo que garantiza que los planificadores tengan las opciones más actualizadas para seleccionar.
  4. Les permite publicar una versión privada como una nueva versión pública.
  5. Les permite eliminar una versión privada que ya no es necesaria.
Ventana emergente personalizada y diálogos de mensaje de espera.

Configuración de historia

Antes de añadir el scripting, primero debe añadir los botones necesarios a su historia y crear y configurar las ventanas emergentes que utilizará.

Historia con el panel lateral izquierdo abierto y la página Añadir ventana emergente resaltada. Debajo se visualizan las ventanas emergentes con ID. Barra de herramientas abierta para mostrar cómo añadir un widget de botón a una historia.

Copiar versión con o sin datos

El equipo desea poder copiar una versión existente para crear una nueva versión privada directamente desde la historia. Quieren tener la opción de crearlos con o sin datos. Para ello, cree el botón BTN_CopyVersion y la ventana emergente POPUP_CopyVersion.

La ventana emergente POPUP_CopyVersion está configurada como se muestra:

Configuración de POPUP_CopyVersion

Copiar datos por versión y fecha

El equipo desea tener una acción de datos que le permita seleccionar versiones y años en lugar de tener varios iniciadores de acciones de datos en la historia. Quieren una ventana emergente personalizada que les pida que esperen hasta que la acción de datos haya terminado de copiar los datos.

Para ello, cambie el nombre de BTN_Copy a BTN_CopyData y cree los popups POPUP_CopyData y POPUP_Wait.

La ventana emergente POPUP_CopyData está configurada como se muestra:

POPUP_CopyData se muestra entre los paneles izquierdo y derecho, con todos los elementos añadidos a la ventana emergente que se muestra en el panel lateral izquierdo y la ventana emergente Opciones para la ventana emergente de la derecha.

La ventana emergente POPUP_Wait está configurada como se muestra:

Configuración de POPUP_Wait.

Publicar versión privada como una nueva versión pública

El equipo desea poder publicar sus versiones privadas como nuevas versiones públicas y hacerlo directamente desde la historia. Para ello, cree el botón BTN_PublishAs y la ventana emergente POPUP_PublishAs.

La ventana emergente POPUP_PublishAs está configurada como se muestra:

Configuración de POPUP_PublishAs.

Eliminar una versión privada

Si no se requiere una versión privada, el equipo desea tener la capacidad de eliminarla de la historia. Para ello, cree el botón BTN_Delete y la ventana emergente POPUP_Delete.

La ventana emergente POPUP_Delete está configurada como se muestra a continuación:

Configuración de POPUP_Delete

Código utilizado en el escenario

Copiar versión

El equipo desea poder copiar una versión existente para crear una nueva versión privada directamente desde la historia. Quieren tener la opción de crearlos con o sin datos.

El siguiente código se agrega al evento BTN_CopyVersion - onClick:

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

A continuación, se añade el siguiente código al 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 en POPUP_CopyVersion.

Copiar datos por versión y fecha

Cuando se selecciona el botón Copiar datos por versión y año en la historia, desea:

  1. Las listas desplegables de versiones y años disponibles se actualizan y clasifican.
  2. Se inicia el diálogo emergente de espera.
  3. La ventana emergente de copia de datos solicita a los planificadores que especifiquen los valores de los cuatro parámetros mediante las listas desplegables.
  4. La acción de datos copia y actualiza los datos de la tabla mientras la ventana emergente de espera está en pantalla.
  5. La ventana emergente de espera se cierra cuando la acción de datos ha terminado de ejecutarse.
  6. Se cierra la ventana emergente de copia de datos.

Para abrir la ventana emergente POPUP_CopyData cuando se selecciona el botón Copiar datos por versión y año en la historia, se añade el siguiente script al evento BTN_CopyData - onClick:

Code Snippet
1
POPUP_CopyData.open();
Actualización de código en el botón de acción Copiar datos.

Antes de que los planificadores seleccionen la versión y la fecha necesarias, la lista de versiones deberá actualizarse y clasificarse. Se ha añadido el siguiente código al 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 actualizar y ordenar la lista desplegable de versiones.

A continuación, también se añade el siguiente código al 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 ventana emergente de selección de datos.

Publicar versión privada como una nueva versión pública

El equipo desea poder publicar sus versiones privadas como nuevas versiones públicas y hacerlo directamente desde la historia.

Para abrir la ventana emergente POPUP_PublishAs cuando se selecciona el botón Publicar como en la historia, se añade el siguiente script al evento BTN_PublishAs - onClick:

Code Snippet
12
INF_PublishAs.setValue(""); POPUP_PublishAs.open();
Código para BTN_PublishAs para iniciar la ventana emergente.

A continuación, se añade el siguiente código al 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 utilizado en la ventana emergente Publicar como.

Eliminar una versión privada

Si no se requiere una versión privada, el equipo desea tener la capacidad de eliminarla de la historia.

Para abrir la ventana emergente POPUP_Delete cuando se selecciona el botón Eliminar en la historia, se añade el siguiente script al evento BTN_Delete - onClick:

Code Snippet
1
POPUP_Delete.open();

El siguiente código también se añade 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 en POPUP_Delete.

Actualizar al inicializar la página o al actualizar la tabla

El siguiente script se añade tanto a Page_1 - onInitialization como a 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 la actualización de página en la inicialización.

Objetos de script

El siguiente script se añade 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"); }

El siguiente script se añade 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]); }

El siguiente script se añade 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); }

Crear diálogos personalizados con ventanas emergentes

Flujo de tareas: en este ejercicio práctico, podrá:

  • Cree una ventana emergente de diálogo de selección de datos personalizada con listas desplegables.
  • Cree una ventana emergente de mensaje de espera personalizada.
  • Añada scripts para ejecutar el diálogo de selección de datos y mostrar un mensaje de espera cuando se ejecute la acción de datos.
  • Añada scripts al botón, la página y las ventanas emergentes para asegurarse de que se ejecuten y estén siempre actualizados.