It doesn't take a large model or even a great deal of data before your views can start becoming hopelessly tangled hairballs. One way to help tame this sort of hairball is by using linked parameterized views; one as an overview/high level view, and one the allows your users to focus on elements of interest.

This article will explain the basics of how to link two views in this way.

Step 1: Create your two views

If you are not already familiar with creating a view, we recommend starting with this article about how to quickly create your first view. You should also be familiar with setting up parameters in a view. If not, then check out this article about how to use parameters to filter a view to a particular element or elements.

It is usually best to start with the high level overview view. This is normally a simple view of some element type from your model that you or your users are interested in exploring. For this article we have a simple view of elements containing text from Lorem Ipsum that have been ran through the AI Assist Termscape tool to extract keywords (read more about that process here).

Now, the "Lorem Ipsum" elements here have more connections in the model tan just the terms, but want to start with a fairly clean and simple view. 

What we'll do next is create a view that uses a parameter for Lorem Ipsum and shows all it's connections, as well as any other Lorem Ipsum elements that share any of those connections.

Here's a fairly simple example:

Note that we have pulled in the Lorem Ipsum elelemnt "Lorem Ipsum dolar sit" and all it's connected elements, an we can see the other Lorem Ipsum elements that share some of those connections. As you can imagine, including all of this in the original view would have made it much busier and difficult to read. There is minimal styling done to this view, but it is a good idea to have a similar set of colors and style between views you will link like this.

It's also a good idea to clear out the parameter and save the view "empty" one last time before going onto the next step.

Step 2: Linking the views

Now we will use View Controls to allow us to go directly from the first view to the second by opening the more detailed view with an element selected in the first view as the parameter.

In the Overview view, go to the Setting Cog > Controls ...

Then scroll down and click the "+" next to the element type you wan to open in the new view (Lorem Ipsum in this case) ...

Select the "Redirect" option ...

And click on the Edit button next to the control that creates.

You can change the Icon or Label as you desire, but the URL is the key thing to edit. We are going to edit this to point at the more detailed view we created. It's URL is: https://<subdomain> (you can copy this out of the url bar with the view open) you can use the full url or just the part after the "":


But now we need to add the parameter piece to this. Parameters are passed in the url in the format:

?param.<param_name>[]=<element uuid>

Where <param_name> is whatever we used in the pattern builder of the view we're linking too when creating the parameter (this is why the best practice is to use the element type name converted to lower case and, if more than one word, converted to camelCase or underscore_separated convention and removing any special characters) and <element uuid> is the unique identifier of the element clicked on in the Overview View.

You may have noted that the default redirect control includes {{element.uuid}} and have guessed that this is how we will pass the element uuid through to the parameters. In the case of this example view, we used "lorem" when making the parameter so our parameter section will look like this:


And the full url to use in the control becomes:


Now we just copy/paste this into the URL field of the control.

Now if we click on any Lorem Ipsum Element in our Overview view, we get a redirect element (in this case still labeled "Lorem Ipsum" as we haven't edited the Control's label or Icon).

And clicking on that button will open the detailed view in a new window with the selected element!