La creación de cualquier sitio o aplicación web es casi impensable sin navegación. Los usuarios deben navegar entre páginas, abrir distintas secciones del sitio y recibir información variada.
Datos de la página
Pero antes de examinar la navegación en sí, conviene saber qué información se puede obtener sobre una página en general y en qué puede consistir una URL. Para ello, puede utilizar el bloque Get Current Page y ver qué datos produce.
- URL - la dirección de la página en su forma habitual. Por ejemplo - https://vdjyien-app.apms.io/admin/someurl/
- Page - el identificador interno de la página, que se utiliza en los procesos de negocio de AppMaster. Consta de 22 caracteres, un conjunto aleatorio de letras y números.
- Title - Título de la página. Su nombre en forma legible para el ser humano.
- URL Params. Una página puede crearse de forma que su dirección no sea estrictamente fija, sino que incluya también valores variables. Por ejemplo, una página puede mostrar una lista de artículos en una sección específica, y el identificador de esta sección sólo se indica en la URL como un parámetro.
- Query Params. Los parámetros de consulta adicionales se escriben al final de la URL, después del signo "?". Por ejemplo, para una página con una lista de artículos, los parámetros "?_limit=12&lang=en" podrían indicar que sólo se necesitan 12 artículos en inglés.
Por ejemplo, imagine una página que muestra una lista de artículos de un blog. Su URL es "/blog/:tema/:autor". El símbolo ":" indica que el valor especificado tras él es un parámetro. Como parámetros, toma los identificadores del tema del artículo (theme) y de su autor (author).
Para navegar a esta página, hay que utilizar el bloque Navigate en el proceso de negocio.
Los parámetros corresponden a los que se analizaron anteriormente en el bloque Get Current Page bloque. En este caso, el título real de la página no importa para la navegación, ya que la propia página se especifica como un identificador interno (puede seleccionarla de la lista de páginas).
Si la página no tiene ningún parámetro, la navegación puede ser extremadamente sencilla; basta con seleccionar la página deseada de la lista proporcionada. Pero en este ejemplo, hay parámetros que deben pasarse al bloque Navigate al bloque.
Creación de una página de origen para la navegación
Consideremos el uso de parámetros en un ejemplo concreto. Para ello, vamos a crear una página separada desde donde tendremos que ir a la página de destino en el futuro. Añadamos dos elementos Select a esta página (uno para seleccionar de la lista de temas, el segundo para la lista de autores) y rellenémoslos con valores de prueba.
Después, hay que configurar un flujo de trabajo para el botón Navigate mediante el cual debe funcionar la navegación a la página de destino. Este proceso comienza obteniendo los valores seleccionados de los bloques Select bloques.
El siguiente paso es rellenar los Key-Value modelos virtuales. Su matriz se utiliza para pasar los parámetros necesarios al bloque Navigate bloque. El modelo consta de una clave (Key), que es el nombre del parámetro (en este ejemplo, tema y autor), así como su valor (Valueel nombre directo del tema seleccionado, o el nombre del autor).
Tenga en cuenta que muchos caracteres no pueden utilizarse en la URL, incluido el espacio. Por lo tanto, un nombre escrito como "Frank Paulsen" en la URL se convertirá automáticamente en "Frank%20Paulsen". URL Encode y URL Decode pueden utilizarse para codificar y descodificar según los estándares de URL. En este ejemplo, para mayor claridad y belleza de la URL, utilizamos el bloque Replace string e independientemente sustituimos el espacio por el signo "-", presentando el nombre como "Frank-Paulsen".
El último paso consiste en fusionar los pares clave-valor generados en un único array para pasarlo como parámetro al bloque Navigate bloque.
Ahora, al hacer clic en el botón, irá a la página https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/.
Puede comprobar que su URL consta de una parte constante (https://vdjyien-app.apms.io/admin/blog/) y de una variable (No-code/Frank-Paulsen/) que se formó a partir de los valores seleccionados en la página anterior.
Utilización de parámetros de URL para gestionar el contenido
La siguiente tarea consiste en utilizar los parámetros de URL recibidos para cambiar el contenido de la página. Estos parámetros pueden utilizarse, por ejemplo, para formar una GET a la base de datos, pero en nuestro ejemplo, simplemente mostraremos su valor en la página. Para ello, vamos a añadir dos contenedores a la página con los correspondientes Label.
Configuremos un proceso de negocio basado en el disparador onShow en uno de los contenedores Label. Su tarea será analizar la URL, obtener sus parámetros y mostrarlos en la página. Para ello, utilizaremos el bloque Get Current Page y obtenemos el valor de cada parámetro en un bucle.
A continuación, mediante el bloque Switch obtenemos el valor del parámetro y lo mostramos en el bloque Label. Al mismo tiempo, para el parámetro Author, sustituiremos inversamente "-" por un espacio.
Ahora, al navegar a una página determinada, no sólo se utilizará su dirección estática, sino también parámetros de URL que afectan a la visualización real del contenido en la página.
Uso de parámetros de consulta
Casi del mismo modo, se pueden añadir parámetros de consulta (Query Params). Su principal diferencia con respecto a los parámetros de URL es que son opcionales. En este ejemplo, la URL incluye necesariamente una indicación de la información que debe mostrarse en la página (qué sección temática y qué autor), y los parámetros adicionales hacen las aclaraciones necesarias. Por ejemplo, puede utilizar los parámetros limit y offset para organizar la paginación y establecer exactamente cuántos registros consultar de la base de datos y a partir de qué registro iniciar la salida.
Añadamos dos nuevos campos a la página de inicio - Input (Integer). En ellos escribiremos los parámetros limit y offset.
Hagamos las adiciones necesarias al proceso de negocio del botón de navegación. Formemos un array de Query Params con los valores limit y offset.
El último paso es añadir elementos con información de los parámetros de consulta, así como completar el proceso de negocio para la página de destino.
El resultado debería ser una URL como esta
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
La aplicación implementa la navegación con parámetros URL y parámetros de consulta y determina dinámicamente el contenido de la página de destino en función de estos parámetros.
