Hi Adrian,
For displaying object entries like you describe, I would recommend using the Collection Display Fragment. The Collection Display Fragment let's you select a collection to display and then lets you configure the number of items to display, number of columns, etc. You can then use page fragments to define how each collection item should be rendered. When you create an Object, a Collection Provider is automatically created for that collection. Then you can map the different object fields to different fragments to define how your list of items should look.
The part that get's a little more complicated is setting the
background color, since it's not just mapping a field but using some
logic to determine what background color should be applied. For this
we can use an Information
Template. The Information template can contain logic written in
freemarker, then the whole template can be mapped to a fragment. If we
only wanted a separate icon or colored circle to display for the
different importance levels we could get away only including that bit
in our template and mapping the rest of our fields to other fragments.
If this was what we wanted our Information Template would look
something like this:
<#if (ObjectField_importance.getData())??>
<#assign importanceHash = { "Green": "var(--success)", "Yellow": "var(--warning)", "Red": "var(--danger)" } />
<div style="
background-color: ${importanceHash[ObjectField_importance.getData()]};
height: 8px;
width: 8px;
border-radius: 50%;
"></div>
</#if>But, if we want the items background-color to change, our easiest option is to have the Information Template contain the entire item like this:
<#if (ObjectField_importance.getData())??>
<#assign importanceHash = { "Green": "var(--success)", "Yellow": "var(--warning)", "Red": "var(--danger)" } />
<div class="card p-3" style="background-color: ${importanceHash[ObjectField_importance.getData()]};">
<h1>
<#if (ObjectField_title.getData())??>
${ObjectField_title.getData()}
</#if>
</h1>
<p>
<#if (ObjectField_description.getData())??>
${ObjectField_description.getData()}
</#if>
</p>
</div>
</#if>We would then map each of these fields to an HTML fragment inside of our Collection Display fragment. Using each of these approaches could result in something like this:
I hope this helps to point you in the right direction. We are working hard to make things like this easier, so please keep sharing what types of requirements you have.
One last note... when requirements get really complicated one option we always have available is to create our backend using objects and then use the auto generated apis following the OpenAPI spec to build a Remote App using React or some other JS framework. This is obviously no longer low code, but is much simpler and easier to maintain than building a bunch of custom modules.