# Image selection input

## Prerequisite data

No connectors will be used in this example, but data from table steps will be utilized. Please download the file below; it will be used to import into the required table steps

{% file src="<https://1716064794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIIgl6sNaTky0iALxYWHH%2Fuploads%2FKUhmkn5xGdKSKQH8maIL%2FImage%20selection.csv?alt=media&token=b9494321-2f3a-46c8-a95b-40ec731f8215>" %}

## Add a data grid

1. Open an existing [application ](https://docs.novacura.com/flow-connect/working-with-connect/create-and-design/applications/create#create-application)or create a new one in an [application package](https://docs.novacura.com/flow-connect/working-with-connect/create-and-design/application-packages) and open it in the Designer.
   1. Add a User step.&#x20;
   2. Add a Table step.
   3. Open the Table step and select **Import File**.
   4. Choose the semicolon separator and click **OK**.
   5. Select the "Image selection.csv" file downloaded in the prerequisite section above.
   6. Set the table variable name to "Articles" and click **OK**.
   7. Change the step name to "Articles". It's good practice to name steps after their content.
   8. Right-click on the "Articles" step, select **Add data arrow**, and connect it to the User step created in step 1.

<figure><img src="https://1716064794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIIgl6sNaTky0iALxYWHH%2Fuploads%2F8vrpDnAHW4S4qnrzTqx7%2Flist%20seletion.png?alt=media&#x26;token=b3ac8b0e-af8f-4d59-9c3d-9b7b2b015216" alt=""><figcaption></figcaption></figure>

2. Open the User step.
   1. Add an Image Selection Input.&#x20;
   2. In the Target Variable, write "Article".
   3. In the Data Source, in the Table Variable, choose the table "Articles".
   4. In the Prompt, write "Choose an article".&#x20;
   5. In the Item Text, write "{Name}".
   6. In the Image Source, write "{Picture}".
   7. Check the "Allow Multiple Selections" checkbox.&#x20;
3. Click the **Play** button in the top right-hand corner to run the application in diagnostic mode.

<figure><img src="https://1716064794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIIgl6sNaTky0iALxYWHH%2Fuploads%2FZ803YZuiaxyEYJR3RkgO%2FPicture1.png?alt=media&#x26;token=500fbe0d-79bd-442c-9eee-654cdeb8cb66" alt=""><figcaption><p>The grid shows all articles, with picture and name. </p></figcaption></figure>

2. Condition to hide&#x20;
   1. In the Condition To Hide, write “{userId = “*your user id”*} *(the user Id you log in to Connect with)*
   2. Run the application in diagnostic mode again.

<figure><img src="https://1716064794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIIgl6sNaTky0iALxYWHH%2Fuploads%2F30JbA6gLpdXaMHuSOvLR%2FWith%20border.png?alt=media&#x26;token=589bec14-8458-499f-ac8b-73b3da8387ab" alt=""><figcaption><p>The articles are now hidden since the condition is fulfilled.</p></figcaption></figure>