How to create selectable elements?

Is it possible to create selectable elements on a page?

For example if there were 4 squares in the middle of the page each square containing a name and an image. Let’s call these squares “characters”.

I want to be able to select one or multiple “characters” and then by pressing a button transfer the selected characters name to another screen.

Hope my description is clear enough, thank you in advance!

setup database to have data type called Character. In the data type setup a field called Name and be of type text. In the data type setup a field called Image and be of type Image.

In the page setup a repeating group with type of content be Character and datasource be do a search for Character.

In the repeating group add a group, and set the type of content to Character and datasource be current cell’s character. Add text element and image element to group and make datasource parent groups character Name (for text) and parent groups image (for image).

Then setup workflow action for when the group that contains the image and text element is clicked to to the action Go to page and select the page you want to navigate to. On that action select to send more parameters. Make the parameter key name be character and the value be this groups character unique id.

then on other page, you can use the get data from url and select parameters and the parameter name is character and the type of data is Character…use that get data from url expression in any element you want to use the selected character values.

Thank you very much for your detailed explanation! @boston85719

My only problem now is that when one of the characters is clicked I don’t want to navigate to the other page immediately but somehow highlight that a certain character was selected for example changing it’s background and then give the option to the user to be able to select multiple characters and when the user is done selecting then they can press a button and only after that should the navigation and parameter transfer happen.

Hey @davedv76 , you could use custom state to record the selected Characters. Keep the “state type” as “Characters” datatype and “This state is a list” option checked. Every time user selects/deselects a character from the repeating group cell, use action “Set state of an element” then add item or minus item (current cell character) to/from the custom state list. On the character group inside RG, add a condition “If this state list contains current cell character” then change background colour.

For sending data to other page, easiest way would be if you save the selection in DB. Maybe attached this data to Current User? Add a field in user table called “selected_characters” and save the selection before navigating to other page. In the other page, you could simply load current user’s “selected_characters” on the Repeating group. You could also save it in a different Datatype if you don’t want to store this in user table.

Saving the data to the database will cause an unnecessary use of workload units, and from the explained desire functionality, this seems like something a user would be doing quite frequently, so will likely cost way too much money to use the save the data to the database approach.

Best way to transfer the selected values is through the URL parameters as expressed previously. You can send the list of unique ids of the selected characters via a single URL parameter, and there are posts on the forum of how to structure a parameter to contain a list of things.

But, to initially save the selected values on the first page, you can use custom states if you wish, but if the page is refreshed for any reason the selections will be lost, so if you want to ensure the user while making the selections will not inadvertently lose them for some reason, you could instead be sending the selected values to the URL parameter and reference the URL parameters values in the conditions to change background colors etc.

@alan.thomas111997 @boston85719
Thank you guys for your amazing help!