WebSiteHomeEnglish

DataApp Studio - Custom Screen

Suggest Edits

DataApp Studio ha sido habilitado para permitir a los desarrolladores trabajar con personalizaciones de front-end de bajo código en las pantallas. En este artículo, demostramos como referencia cómo puedes crear pantallas personalizadas en tu DataApp

Requerimientos

Es importante tener conocimientos avanzados en los siguientes lenguajes de desarrollo para comprender fácilmente este artículo:

  • Bootstrap 4.6
  • HTML 5
  • CSS 5
  • JQuery
  • JSON
  • Javascript

Agrega una Custom Screen a tu DataApp

Una vez que estés en tu aplicación en DataApp Studio, agrega una pantalla como se muestra en la siguiente imagen:

Una vez agregada la pantalla, se cargará la interfaz de administración y se mostrará la siguiente pantalla :

A la derecha, podemos ver el editor de código donde podemos agregar nuestro código HTML/CSS personalizado de la pantalla, y en la parte posterior podemos ver la representación en tiempo real de la pantalla.

Editor HTML/CSS vs Editor Javascript / JQuery

En la pantalla de código, tienes 2 editores con los que trabajar. Uno es el editor de código predeterminado utilizado para la personalización del front-end y el diseño de tu pantalla de código. Este es el que se muestra en la siguiente imagen:

El editor de scripts es accesible al presionar el siguiente icono:

Esto abrirá el modal de scripts donde podrás agregar código de jQuery o JavaScript directamente, ya que todo tu código se cargará dentro de las etiquetas <script></script>.

Añadiendo Data Kube Models en tu Custom Screen

Una de las funciones poderosas del tipo de pantalla de código es el uso de modelos de datos integrados basados en tus Kubes pre-creados en tu área de trabajo. El flujo de trabajo para incrustar un modelo de Data Kube en tu código personalizado es el siguiente:

test

  • Abre el Diseñador de Datos Insight de DataApp Studio.
  • Selecciona el Kube que deseas cargar.
  • Personaliza el Kube cargado según tus necesidades.
  • Genera el código incrustado.
  • Copia el código y pégalo en tu editor de pantalla de código.

Para abrir el Diseñador de Datos Insight de DataApp Studio, utiliza el siguiente icono:

Una vez que se presione el icono, selecciona el Kube que deseas cargar en el Diseñador de Datos Insight, como se muestra en la siguiente pantalla:

Una vez en la nueva ventana, personaliza el Kube según cómo te gustaría que se cargue, como se muestra en la siguiente imagen:

Una vez que esté listo, genera el código incrustado presionando el botón "SHOW EMBEDDED CODE" de la siguiente imagen:

Se abrirá el modal de código , donde podrás copiar el código completo al presionar el botón de copiar al portapapeles.

📘

Dato importante !

Cada vez que se edite o realice un nuevo cambio en el DK Kube Embedded, este creará un nuevo token único y deberá copiar el nuevo código en su pantalla personalizada (Custom Screen).

Con el código en el portapapeles, puedes pegarlo en el editor de código de tu pantalla de código en tu aplicación de DataApp, como por ejemplo:

Una vez hecho esto, puedes guardar tu trabajo y recargar el panel de vista previa para mostrar los nuevos cambios.

📘

Guarda tu trabajo!

Recuerda siempre guardar tu trabajo cuando uses DataApp Studio.

Relacionando Variables Globales de DataApp y Vinculando Pantallas a Pantallas de Código

Las Variables Globales de DataApp nos permiten enviar valores personalizados entre las pantallas de la aplicación de datos y los Kubes incrustados para crear experiencias de usuario avanzadas en DataApp.

Agregando Filtros Personalizados

Para agregar filtros personalizados, utilizamos las Variables Globales de DataApp. Por lo tanto, el código para convertir cualquier etiqueta de entrada en una variable global sería el siguiente:

<input data-dk-var-name="dk_var_custom_name" class="form-control" size="16" value="">

Agregando Filtros de Fecha y Rango de Fechas

Para agregar filtros de fecha a tu pantalla, puedes utilizar el siguiente código en tus editores de código y script:

	<div class="input-group">
		<input type="text" id="date-range" class="form-control" />
	</div>

$(document).ready(function(){
    // Inicializar datepicker
    $('#date-range').daterangepicker({
        opens: 'left',
        autoUpdateInput: false,
        locale: {
          format: 'MM/YYYY',
          cancelLabel: 'Cancelar'
        }
    });
  	 // Actualizar el valor del input cuando se selecciona un rango de fechas
    $('#date-range').on('apply.daterangepicker', function (ev, picker) {
        var startDate = picker.startDate.format('YYYY-MM-DD');
        var endDate = picker.endDate.format('YYYY-MM-DD');
				console.log(startDate, endDate)

      	$(this).val(picker.startDate.format('MM/YYYY') + ' - ' + picker.endDate.format('MM/YYYY'));
      	//codigo a ejecutar...
    });
}) ;

📘

DataApp Global Variables

Recuerda agregar las Variables Globales correspondientes de DataApp a tus Kubes incrustados y el atributo data-dkvar-name correspondiente en la etiqueta de entrada para aplicar los filtros a ellos

📘

Recargar Embedded Kubes

Puedes usar la función dk_app_code_renderAll() para recargar todos tus Kubes incrustados en la pantalla de código la primera vez cuando la pantalla se carga o cuando se ejecute un evento.

📘

$(Document).Ready

recuerda usar la función de jQuery que se utiliza para ejecutar código JavaScript una vez que el documento HTML se ha cargado completamente.

Objeto de Variables Globales ARPIA

Hemos habilitado una variable de tipo const en el modelo JS de todas las aplicaciones de ARPIA que hace accesibles todas las Variables Globales de ARPIA de Sesión para ser utilizadas a través del Modelo de Objeto JavaScript. Accede fácilmente a cualquier variable utilizando la constante llamada dk_vars_obj, por ejemplo, puedes mostrar su contenido utilizando el siguiente código:

console.log(JSON.stringify(dk_vars_obj)) ;

Bootstrap 4 Engine

You may use any of the bootstrap 4 tools in your screen to maximize the user experience, please refer the following online documentation for bootstrap 4 tools.

Updated about 2 months ago