Image in table on ignition perspective

Buen dia, soy nuevo utilizando perspective y tengo una pregunta, se pueden agregar imagenes a una tabla y al mismo tiempo hacer que la imagen te mande a otra ventana?

I am using google translator
Good morning, I’m new to using perspective and I have a question, can you add images to a table and at the same time have the image send you to another window?

  1. You need to create your own (probably Flex) View, and place an Image component in it.
  2. The view should accept two input params; one which will be the path to an image (img_path in this example), and one which will be the path to a Page (target_path in this example).
  3. Bind Image.props.source to the incoming img_path param.
  4. Right-click the Image component and select the onClick Event, then select a Script Action for use.
  5. supply the following code for the Script Action: system.perspective.navigate(page=self.view.params.target_path).

Note that this will perform navigation to configured Perspective Pages - if you need to perform URL navigation then you will need to modify the script to use the url keyword, and you’ll need to adjust the target_path values to always be URLs.

  1. Debe crear su propia vista (probablemente Flex) y colocar un componente de imagen en ella.
  2. La vista debe aceptar dos parámetros de entrada; uno que será la ruta a una imagen (img_path en este ejemplo), y otro que será la ruta a una página (target_path en este ejemplo).
  3. Vincule Image.props.source al parámetro img_path entrante.
  4. Haga clic con el botón derecho en el componente de imagen y seleccione el evento onClick, luego seleccione una acción de secuencia de comandos para su uso.
  5. Proporcione el siguiente código para la acción de secuencia de comandos: system.perspective.navigate(page=self.view.params.target_path).

Tenga en cuenta que esto realizará la navegación a las páginas de perspectiva configuradas: si necesita realizar una navegación de URL, deberá modificar el script para usar la palabra clave url y deberá ajustar los valores de target_path para que siempre sean URL. .

La tabla debe tener los mismos parametros que el de la vista nueva para que la tabla reconozca los parametros de la vista? o cual es la forma correcta para que la tabla reconozca la imagen dentro de la celda y poder ver la imagen?

The table must have the same parameters as the new view for the table to recognize the view parameters? or what is the correct way for the table to recognize the image inside the cell and be able to see the image?

The table needs to configure the specific column to render as a subview. This is a property of the column. You’re attempting some advanced configurations, so I recommend looking at this other post which defines how to configure the table and pass parameters.

This post details how to configure the View which will be used within that Column.

This shows how I’ve added a new column configuration to the table, specified which column from my data will be represented (“city”), specified the render type (“view”), and supplied the view path which will be used (“PopupViews/SimplePopup”). Note that I’ve not supplied ANY viewParam values - that should all come from your data since it is dynamic/different for each row.
Screen Shot 2022-07-18 at 10.20.43 AM

You’ll need to modify your data structure so that each row gets a path yo an image and a page path or URL to navigate to.


La tabla necesita configurar la columna específica para que se represente como una subvista. Esta es una propiedad de la columna. Está intentando algunas configuraciones avanzadas, por lo que le recomiendo mirar esta otra publicación que define cómo configurar la tabla y pasar parámetros.

Esta publicación detalla cómo configurar la vista que se usará dentro de esa columna.

Esto muestra cómo agregué una nueva configuración de columna a la tabla, especifiqué qué columna de mis datos se representará (“ciudad”), especifiqué el tipo de representación (“vista”) y proporcioné la ruta de vista que se usará ( “PopupViews/SimplePopup”). Tenga en cuenta que no he proporcionado NINGÚN valor de viewParam; todo debería provenir de sus datos, ya que es dinámico/diferente para cada fila.

Deberá modificar su estructura de datos para que cada fila obtenga una ruta a una imagen y una ruta de página o URL para navegar.

But this method is to place the same image in each of the cells of the column and what would be the method to place a different image in each cell of the column so that when the filter is performed it is eliminated along with the row?

Thanks in advance

That’s just it, YOU need to modify your data so that each row contains the path to the image you want that row to display.

# script transform on Table.props.data binding
bad_image_path = "/system/images/Bad.png"
good_image_path = "/system/images/Good.png"
for row in data:
    if row.someProperty == 0:
        row["img_path"] == bad_image_path
    else:
        row["img_path"] == good_image_path
# now each row contains an img_path key which will be passed into any instanced view

Ok, so here is the thing that my colleagues and I figured out and believe is under documented in the ignition documentation.

Here is what you have to understand:
Whenever you see the viewParams property in a table component whether it is under the columns property or the row property, you have to understand that when a page loads, ignition will always put a parameter called value into viewParams even if you haven't defined it in the designer.

Let me provide some examples:

In the columns section after you render the cell as a subview, you don't have to pass any parameters. This is what you should have.
viewParams = {

}

What your embedded view actually receives when the page loads looks like this:
viewParams = {
value:
}

Note, you never told ignition to pass this, but it does anyways and even if you tried to pass in your own field called value, ignition will override this with the value from the cell.

If you are trying to pass data from the rows section, the value is actually an object containing the field names of all your columns. For example

Your definition of view params under the rows section of the table in the designer is:
viewParams = {

}

What the subview actually gets is:
viewParams = {
value: {
col1: <col1's value>,
col2: <col2's value>,
and so on
}

Note, in your viewParams, you didn't actually define anything, but once a page loads, they are there, even if you can't see it. Now to actually get access to this value in your subview, you have to put value in Params. Then you can bind your components to these.

Params = {
value:
or if from a row
value: {
col1FieldID:
col2FieldID:
}
}

Now you might be wondering why viewParams is even there in the first place, this is your opportunity to essentially pass constants or values that may not necessarily come from the table itself.

I hope this helps clear up any data passing issues to subviews from tables.

1 Like