Open screen in new Tab through Navigate to Tutorial

[immohacker]

Hi
Here is an tutorial to open an screen in an new tab.
We use an navigate to action in url mode.
But i will show, how you can use variables in navigate to screen,
but remember its not possible to open in new tab with naviagte to and then screen.
So you can skip this section and go to navigate to with url option if you want use open in new tab

But we prepare our screen first

Definition of URL variables:

URL variables are appended to the screen's name.
A variable is always in the format of /:varname.

/screenname/:id

To define multiple variables, you can include them in the URL by appending them with a forward slash (/). Each variable follows the format of /:varname. For example:

URL with multiple variables: /screenname/:varname1/:varname2/:varname3

This allows you to pass and access multiple variable values within the URL.

In your example, the variable "id" and the variable "view" would be defined as follows:

URL with variables: /:id/:view

This means that you can pass values for both "id" and "view" in the URL, and they can be accessed separately as individual variables in your application or system.

So the screen url variables are defined.
How we can access this variables in this screen?

In the screen, you can access the variables "id" and "view" using the following syntax:

{{ URL.id }} and {{ URL.view }}

By using these expressions, you can retrieve the values of the "id" and "view" variables from the URL and utilize them within your screen or application.

To open a screen and pass variables, you can do so either manually in a Link component or through the action "Navigate to." You can also manually append them to the address bar for debugging purposes, resulting in a different view.

Using a Link component:

Now, in the properties of the Link component, assign a name and a destination.
Variables are simply indicated with a slash.

/screenname/value

To pass multiple variables, simply concatenate them with slashes.
Pay attention to the order, as the variables will be assigned in the same order as they were defined.

/screenname/value1/value2

In my example:

/vertragsdetails/{{ Table.vertraege._id }}/true

Click on the lightning bolt icon to proceed.

And then enter it there.
You can again pass variables as well as static text.
The static text in this case is "true."
The variable is the ID of the row where the link is located.
Dont forget to check in new tab, if you wish to open in an new tab

If we checked open in new tab. The screen will open in new tab.
But in an link i cant define other action like an button.
So now the button method

To navigate to a screen using a button with the "Navigate To" action:

Click on the button component.
In the properties panel, click on the "Actions" section to define the actions.
Add a new action by clicking on the "+" or "Add Action" button.
Select the action type as "Navigate To."
In the configuration for the "Navigate To" action, enter the screen name and the variables to be passed.

For example:
Screen: vertragsdetails
Variable 1: {{ Table.vertraege._id }}
Variable 2: true

then Click on the "Save" or "Apply" button to save the action configuration.
my URL string in the action field
/vertragsdetails/{{ Table.vertraege._id }}/true

But with navigate to screen, we have no chance to open it in new tab also we use naviagte to and select url

Using the URL, you have the option to open the screen in a new window or tab. However, to ensure that a screen can be opened, a "#" needs to be added before the screen name in the URL. Otherwise, you may encounter an access error.
Our url string
#/vertragsdetails/{{ Table.vertraege._id }}/true

Now the screen open in an new tab, if the button or link in the table was clicked.

The last if it interest you, the way to decide with url variable to display the save button or not
Retrieving the URL variables in the new screen, for example with a button that should not be displayed:
Setting a condition.

Since we have set the "view" variable to true, the "Save" button will not be displayed in the new window/tab. This is because in the screen, we have added a filter condition to hide the button when the "view" variable is set to true.

To configure the conditions for the button that should not be displayed when the "view" variable is true, follow these steps:

Click on the button in the screen editor.
Look for the option to configure conditions (it may be named differently depending on the specific tool or platform you are using).
Click on "Configure Conditions" or a similar option.
Set the condition to check the value of the "view" variable.
Specify that the button should not be displayed if the "view" variable is true.
Save or apply the condition configuration.

By setting up this condition, the button will only be displayed when the "view" variable is false or has a value other than true.

Hide the component if the condition is met. With "show," the element would only be displayed if the condition were valid.
We use Hide component
If the {{ URL.view }} variable is equal to true, the component will be hidden.

Result on the page:
If true is passed, no button will be displayed.

If false is passed, the button will be displayed.

This way, I can accomplish multiple things with a single screen and avoid designing duplicate screens ;-)

[ConorWebb96]

Hey @immohacker,
Nice work, very thorough. I changed this from help to show and tell, I hope thats alright with you!

Thanks for posting this! 🚀

[melohagan]

Nice one @immohacker Thanks for sharing! 😄