So I came up with a solution to a problem, and it may not be pretty, but it works!
So here is my problem:
I have this step component in the sidebar, and it looks nice
That sure is a lot of wasted vertical space
Sadly, there is no GUI option for a caption, or second line
So, how do we solve this? I really would like to show something under each step, with something that is a summary of each step....
The Solution
It consists of one transformer
(StepListCSS) that generates the CSS and one variable
(StepListCSS_Data) that will store a mapping of the step keys to the value we want to show under each step.
The Variable
The initial value is simply the values as keys from the steps
{{ _.zipObject(app_steps.values, Array(app_steps.values.length).fill("")) }}
The Transformer
const steps = {{ app_steps.data }};
const currentStep = {{ app_steps.selectedIndex }};
const stepData = {{ StepListCSS_Data.value }};
return steps.map((step, i) => {
const content = stepData[step.value];
return `
._retool-app_steps ol > li:nth-child(${i+1}) > div > div:last-child:after {
/*border: 1px solid yellow;*/
display: ${currentStep > i ? "block" : "none"};
padding-left: 5px;
font-size: larger;
color: #870bc8;
content: "${content}"
}`;
}).join("\n");
Here we compose some blocks of CSS, that target the step containers' list items. For each index, we add some :after
that has content
. The value of content
is referenced from the variable
we setup earlier.
Finally, add the transformer
to your Custom CSS input for the app's settings.
Usage
In a query, or from a button, use the setIn
method on the variable
we defined erlier. For example, this is in a query that "saves" my "step 1"
const key = app_steps.data[0].value;
const formatted = numbro(rawValue).formatCurrency();
StepListCSS_Data.setIn([key], formatted);
Result
A beautiful summary of the step
Thank you for coming to my Ted Talk