Uso de las opciones comunes de JavaScript en un script para mejorar una historia

Objective

After completing this lesson, you will be able to ampliar una historia con opciones JavaScript comunes.

Utilizar una lista desplegable dinámica para ampliar una historia

Escenario empresarial: se le ha pedido que amplíe una historia existente con una lista desplegable para filtrar la tabla Cantidad de pedido por categoría de producto.

Para ello, añadirá el siguiente código a la historia mediante la acción onIntitialization:

Code Snippet
123456
var ProductABCratingList = TBL_Quantity.getDataSource().getMembers("0D_NW_PRID__0D_NW_PRCAT"); for (var i=0; i<ProductABCratingList.length; i++){ if (ProductABCratingList[i].id !== ""){ DD_Product_ABC_rating.addItem(ProductABCratingList[i].displayId, ProductABCratingList[i].description); } }

También añadirá el siguiente código a la lista desplegable mediante la acción onSelect:

Code Snippet
1
TBL_Quantity.getDataSource().setDimensionFilter("0D_NW_PRID__0D_NW_PRCAT", DD_Product_ABC_rating.getSelectedKey());

Este breve vídeo le guiará a través de la historia final y el scripting necesario.

Simular los pasos

El siguiente ejercicio de práctica simula estar en modo avanzado en SAP Analytics Cloud y le guía a través de la adición del scripting necesario para crear la historia final que se muestra en el vídeo de demostración.

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

  • Añadir la lista desplegable a la historia
  • Añadir scripting a la acción onIntitialization
  • Añadir scripting a la acción onSelect
  • Probar el scripting en la historia

Variables de script locales

En los scripts, puede "almacenar" un valor en una variable. Existen dos tipos de variables: variables locales y globales. Cubriremos las globales más adelante en el curso. Las variables de script locales se pueden crear con el comando var. Solo son válidos dentro del script en el que están asignados. Cuando el script se procesa por completo, la variable pierde su valor.

Variables de script locales

var <NameOfVariable> = <ValueOfVariable>;

Código que muestra ejemplos de variables de script.

Tenga en cuenta lo siguiente:

  • Debe asignar un valor en la sentencia var
  • El valor asignado define el tipo de datos de la variable

Independientemente del tipo de variable que cree, debe asignarle un nombre como identificador, como counter, selectedCountry, myList. Los desarrolladores suelen utilizar convenciones de nomenclatura específicas para facilitar a todos la lectura del código. Si estás interesado en aprender más sobre este tema, consulta el siguiente documento y alinea una definición consistente con tus colegas desarrolladores de historias: Devopedia - Convenciones para fijar nombres

Operadores Individual, Doble y Triple igual a (===)

"Individual" igual a (=) son operadores de asignación. Se utilizan para asignar un valor a una variable.

Ejemplo de script en el editor de scripts que utiliza igual a individual para asignar un valor a una variable.

Triple igual a (===) son operadores de comparación. Si utiliza triple igual, se compararán tanto los valores como los tipos.

Ejemplo de script en el editor de scripts que utiliza triple igual a en la línea dos.

El doble es igual a (==) son operadores de comparación. Con doble igual, los valores se comparan, pero los tipos no. SAP Analytics Cloud no admite la conversión automática de tipo, por lo que no utilice doble igual a en ningún script.

Ejemplo de scripting que incluye dobles iguales y el error que se produce en el editor de scripts. No utilice dobles iguales.

Escribir en la consola

Una técnica muy común para realizar un seguimiento de los valores de variables o el procesamiento de scripts es hacer uso de la consola del navegador. Puede escribir valores de texto o variables en la consola mediante el comando console.log();.

Ejemplo de uso de la pestaña Consola en las Herramientas de desarrollador. Script de SAP Analytics Cloud en la parte superior izquierda, pestaña Consola en la parte inferior derecha.

Para acceder a la consola desde el navegador, debe abrir las Herramientas del desarrollador desde la barra de herramientas del navegador y cambiar a la pestaña Consola.

Sentencias de ejecución condicionales y bucles

Sentencias If Then Else

Code Snippet
123456
if (condition) { // this block will be executed if condition is true } else { // this block will be executed if condition is false }
Patrones de comparación típicos:Operadores lógicos:
===(igual a)&&(y)
!==(no igual a)||(o)
<(menor que)!(no)
<=(menor o igual que)  
>(mayor que)  
>=(mayor o igual que)  

Cambiar sentencias

Code Snippet
12345678910111213
var selectedCountry = Dropdown1.getSelectedText(); switch (selectedCountry) { case "Germany": // code that is relevant for Germany break; case "USA": // code that is relevant for USA break; default: // code that is relevant for all other countries }

Puede utilizar la sentencia switch para seleccionar una de varias secciones de código. La expresión (en nuestro caso selectedCountry) se compara con los valores de cada caso. Si coincide, se ejecuta la sección de código asociada. Para detener el procesamiento posterior de la sentencia switch, utilice la sentencia break para saltar del conmutador.

Si no utiliza un salto, se procesarán todas las líneas siguientes. Esto incluye todas las siguientes sentencias case independientemente de su valor.

Bucles: para

para (sentencia 1; sentencia 2; sentencia 3) { Nueva línea: // líneas de código que se van a ejecutar. Línea nueva: }

En el ejemplo anterior, puede ver tres sentencias. Se corresponden con lo siguiente:

  • Enunciado 1: Declara la variable para el iterador de bucle
  • Sentencia 2: ¿Se verifica la condición antes de ejecutar las líneas de código?
  • Sentencia 3: Es el cambio en el iterador de bucle que se ejecuta cada vez que se ejecutan las líneas de código cerradas

Por ejemplo, desea registrar en log todas las jerarquías de la fuente de datos a la consola con para que escriba el siguiente script:

Code Snippet
123456
var Hierarchies = TBL_Quantity.getDataSource().getHierarchies("0D_NW_PRID"); for (var j=0; j<Hierarchies.length; j++){ console.log(Hierarchies[j].id +" - " + Hierarchies[j].description); }

Las sentencias utilizadas en el script se resaltan a continuación.

El código de arriba con las sentencias resaltadas. El enunciado1 es var j=0. La sentencia 2 es j<Jerarquías.longitud. El enunciado 3 es j++.)
  • Extracto 1: var j=0
  • Extracto 2: j<Hierarchies.length
  • Extracto 3: j++

For Los bucles se utilizan ampliamente, por ejemplo, se utilizan para realizar un loop sobre las entradas de una matriz que verá en un ejercicio posterior en el curso.

Bucles: Mientras

Los bucles While son similares a los bucles for pero con menos sentencias.

Code Snippet
1234
while (condition) { // this block will be executed if condition is true }

Por ejemplo, desea registrar en log todas las jerarquías de la fuente de datos a la consola con mientras, por lo que escribe el siguiente script:

Code Snippet
12345678
var Hierarchies = TBL_Quantity.getDataSource().getHierarchies("0D_NW_PRID"); var x = 0; while (x < Hierarchies.length) { console.log(Hierarchies[x].id +" - " + Hierarchies[x].description); x++; }

No olvide modificar la variable utilizada en la condición.

Ampliar una historia con ejecución condicional

Escenario empresarial: su equipo solicita modificar cómo se muestra la historia cuando se abre. Solo desean ver el mosaico KPI al iniciar y, a continuación, cuando hacen clic en uno de los mosaicos, la franja de pestañas se muestra junto con la pestaña que corresponde al mosaico seleccionado.

Este breve vídeo le guiará a través de la historia final y el scripting necesario.

Simular los pasos

El siguiente ejercicio de práctica simula estar en modo avanzado en SAP Analytics Cloud y le guía a través de la adición del scripting necesario para crear la historia final que se muestra en el vídeo de demostración.

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

  • Asegúrese de que la franja de pestañas esté fijada en oculta al iniciar
  • Definir el código para los gráficos Impuestos y Cantidad de pedido
  • Probar el scripting en la historia

Matrices en un script

Trabajar con matrices es esencial en muchas situaciones. Algunas API de comando devuelven una matriz y debe saber cómo gestionarlas.

En esta lección, presentamos el concepto de matrices ya que se pueden devolver en API para que sea importante que comprenda cuáles son. Sin embargo, en la siguiente lección aplicará sus conocimientos cuando complete un ejercicio que contenga matrices, así como conceptos como variables de script globales y funciones de script.

Una matriz es algo así como una lista de elementos. Cuando trabaja con ellos en un script, normalmente:

  • Acceder a un único elemento por su posición (también llamada "índice") en la lista
  • Bucle por toda la lista y procese cada elemento uno tras otro
Ejemplo de una matriz en un evento getResultsSet en un script.

Las matrices se identifican con [ ] como se muestra en el ejemplo anterior anterior y pueden ser:

  1. Impreso en consola
    Code Snippet
    123
    var resultset = Table_1.getDataSource().getResultSet(); console.log(resultset);
  2. Accedido con loop
    Code Snippet
    12345
    var resultset = Table_1.getDataSource().getResultSet(); for (var x=0; x<resultset.length; x++){ console.log(resultset[x]["@MeasureDimension"].rawValue); }
  3. Accedido con índice
    Code Snippet
    123
    var resultset = Table_1.getDataSource().getResultSet(); console.log(resultset[1]);

Nota

Como muchos lenguajes de programación, el primer elemento de una matriz tiene el índice 0.

En algunas situaciones de scripting, puede ser útil crear una variable que pueda almacenar más de una entrada. Por ejemplo, desea almacenar una lista de widgets que se deben procesar o una lista de indicadores que se deben utilizar del script.

Situación de scriptingVariable
Crear matriz vacíavar myList = ArrayUtils.create(Type.string);
Crear matriz rellenadavar myList = ["Hello", "World", "Example"]
Añadir elementomyList.push("Hello world");
Eliminar último elementomyList.pop();
Leer número de entradasmyList.length;

Generar valores dinámicos en widgets de navegación genéricos

En el vídeo Ampliación de widgets de navegación genéricos con scripting, se han introducido los pasos para mejorar los widgets de navegación genéricos:

  1. Defina los elementos para el widget en el panel Generador. Se puede definir de tres maneras diferentes:
    1. Manualmente, mediante input directo
    2. Dinámicamente, mediante scripting
    3. Dinámicamente, utilizando la vinculación de propiedades
  2. Defina la acción que se debe ejecutar en el script onSelect del widget

En esa lección, definió manualmente los elementos para el widget mediante input directo. En esta lección, veremos la definición dinámica de los elementos mediante scripting.

El siguiente código es un ejemplo de scripting que se puede utilizar para rellenar dinámicamente la lista desplegable:

Code Snippet
12345
var countries = Table_1.getDataSource().getMembers("0D_NW_BP__0D_NW_CNTRY"); for (var x = 0; x < countries.length; x++ ) { var country = countries[x]; Dropdown_1.addItem(country.id, country.description); }
Ejemplo de código para definir dinámicamente los elementos utilizados en el scripting. Los valores de SAP Analytics Cloud en la parte superior y el script a continuación muestran country.id y país.description.

Como ejemplo típico del uso de matrices en el script, utilizaremos el ejemplo de escribir todos los miembros de una dimensión en una lista desplegable. Debe pensar en el evento correcto en el que agregar el código. El Page_1.onInitialization() puede ser un buen lugar, sin embargo, dependiendo de la frecuencia con la que los miembros puedan cambiar, puede ser útil añadirlo al evento onResultChanged del widget de origen.

Matriz de widgets

La API Application.getWidgets(); puede devolver una matriz de widgets descrita por las opciones de búsqueda de widgets. Como ejemplo, puede crear una matriz de todos los gráficos de su historia con un nombre que empiece por "CH_Tile". La API también puede crear una matriz de otros widgets, por ejemplo, Botón, Imagen, etc.

Código para matriz de widgets

El código utilizado para devolver una matriz de todos los gráficos de su historia con un nombre que empiece por "CH_Tile":

Code Snippet
123
var tilecharts = Application.getWidgets({type:WidgetType.Chart, searchPattern:"CH_Tile"}); console.log (tilecharts);
La matriz y el registro de consola asociado (derecha)

Para comprender el contenido y la estructura de una matriz, puede enviarla al Log de consola y analizar su contenido allí.