Columns

You can use this visualization to organize components in 2 columns.

This task shows you how to:

See Also
Configuring Visualizations

Organize the Layout with a Set of Columns

  1. Add a Columns visualization on the canvas.
    The visualization shows two empty columns.
  2. In the First column section, specify the Column width in percent.
  3. Click next to Components.
  4. In Component, select the visualization to add in the column.
  5. Specify the component Height in px.
  6. Optional: Add more components to the column.
  7. In the Second column section, add visualization components as you did in the previous steps.



Add a Condition to Show the Second Column

You can add a condition to display or hide the second column within the visualization. This allows you to reveal or not information depending on values.

Context:

This procedure shows an example with a Result list visualization in the first column, and a related Hit details in the second column. You can configure an on-click effect so that clicking a result in the first column opens the second column to show details in the Hit details visualization.

  1. In the First column section, click next to Components, and add a Result list component.
  2. Click the Result list in the visualization
    The Result list properties open.
  3. Go to Actions and in the Hit interaction section:
    1. From Variable, select the detail variable. Create this context variable if it does not exist.
    2. Click to add a new on click effect.
    3. Select Set variable, select a variable to store the condition values.
    4. In Information Source, select the hit attribute on which you want to add the on-click effect.
    5. In Target Studio variable, select the variable to identify the selected item within the list.
  4. Click the second column in the visualization.
    The Columns properties open again.
  5. In the Second column section, for Display if variable is not empty, select the detail variable previously defined.
  6. Click next to Components, and add a Hit details component.

Now if you open the Preview and click a hit in the Result list visualization, the second column expands to show the related Hit details page.