Hello.
I am very new to Retool and would like to create a basic app with following functionality.
I have a Database called "database" within I have a number of data type but am only focused on 2 currently. These are ID, Description.
For the app, I would like a to be able to lookup a single ID and have the Description data display in a panel. The content of the Description tends to be long in nature.
Thats it!
Hey @MarkAC007
Here are the steps you need to create your app:
1- create a resource: from the home page navigate to resources and click on create new
2- from there choose the type of your database (PostgreSQL example) and fill in the required information for it:
3- Navigate back to the home page and click on create new and choose app
4- If this is your first app you will be prompted with a small 5 minutes tutorial that will help you create an app very similar to what you're trying to build now. I highly advise that you follow that tutorial as it will introduce you to the UI
5- from the bottom panel you can click on the + sign and create a new resource query.
6- choose the resource you just created from the resources tab. if you did it all correctly you should see the schema for you DB pop up on the right
7- type the following SQL code (This is just an example based on what you specified in the question)
SELECT
id,
description
From
database
8- save and run the query and check the results
9- from the right panel drag a table to your canvas:
10- click on the table to highlight it and click on inspect in the right panel
11- Delete the default data in the data section and replace it with {{query1.data}}
12- by now you should see the results on your query in the table.
13- drag a text input component from the right panel to your canvas
14- go to query1 in the bottom panel and add a where clause to it to filter on the id
15- you will find that whenever you input any new id in the text input the query reruns.
16- take your application to the next level by using components that fit your needs better. you will find them all in the right panel.
Firstly, thank you for your support and suggestions. I have my first app built!
What component is best to show a large amount of text? The data within description is multi line in many cases.
Hey @MarkAC007
That's really good to hear!
If you only need to show the text info that is saved in description you can use something that looks like that
This is a Container component. inside of it there is a Text component. and in the header of it I placed the text input
Got it. What should I have in the text component to show just the description data?
I assume the query does not need to change, correct?
I ask because I am getting the following error.
The value has to be of type 'string', you provided a value of type 'object'
Maybe related to the DataBase data type?
This is due to your query always returning an array of values instead of a simple string. Even tho your query only returns one result, it's still an array (with one key and one value).
This is how the returned data looks like. A key with an array of values:
{
"id": [
1
],
"description": [
"some text"
]
}
As soon as your table has a second entry, it will look like this. A key with an array containing multiple values:
{
"id": [
1,
2
],
"description": [
"some text",
"some more text"
]
}
So, to get only the first result as a string, you'll need to specify the index!
Use query1.data.description[0] instead of query1.data.description.
Very helpful feedback. Thank you.
However, in my case I think I am not using the Text Box Component correctly.
As you can see I have the correct value off {{getcontrol.data.nist_control_description}} coming from the query but the Error is relating the default value `strings for the text box. Maybe I am using the wrong component?
The goal is to display the FULL content of {{getcontrol.data.nist_control_description}} in a text box.
@MarkAC007
To do so, you need to enable a Transformer.
After clicking on enable, you can add the following piece of code to it:
return formatDataAsArray(data).
What you have done right now is change the format of data from object of arrays to array of objects
now your data is will look something like this
[
{
id: 1 ,
description: "lorem ipsum"
},
{
id: 2 ,
description: "lorem ipsum"
}
]
as it originally looked like this:
{
"id": [
1,
2
],
"description": [
"lorem ipsum",
"lorem ipsum"
]
}
now you will find it much easier to show the description in the Text component.
@Mahmoud Great tip! And the error has cleared. However, I still am unable to get the data to display in the Text box within the container component. Here is what I have
Oh since you return an array now from the getcontrole query, you just need to access the first element's description.
{{getcontrol.data[0].nist_control_description}}
You sir, are a GOD! Thank you. 
