Using a Javascript object model

App Building
1

Hey, all -

I'm new to Retool, and loving what I'm seeing so far, but not sure I'm going about things quite the right way.

I've been able to begin building the UI and tying it tables, add items, edit, etc. Very straight-forward for a completely data-based app. Unfortunately, I have a good bit of business logic I'd like to incorporate, and not sure how to do it.

What I've traditionally done in other languages (where I'm also responsible for building the UI from scratch, which I'd like to avoid ;o) is...

Build a model representing my business objects in smalltalk/javascript/Ruby...with the relationships between objects captured by composition, etc. An example would be something like a collection of recipes, which contain a collection of ingredients and quantities, all subject to an inventory of available ingredients, determining which recipes could be made.

I'd like to define this model up front, populate it from the various database tables I have, then manipulate these objects via the UI.

Can this be done with Retool? Am I way off track and making this harder than it needs to be?

Thanks!

2

Hi @fisherstreetllc,

Welcome - love your thoughts/ideas around how you would like to use Retool. I have very similar concepts implemented.

The way that you can do this is by using Temporary State variables and JS.

  1. Create a TS variable -> appModel
  2. Create a JS Query -> appController
  3. Create a SQL Query -> modelQuery

In appController run this:

// load model from DB
await modelQuery.trigger() // this will run the query to get all of the data
// get the data from your query
const model = formatDataAsArray(modelQuery.data)
// do any data manipulation you need (Map, Reduce, Filter etc....)

// store the updated data in the model for use in your UX
appModel.setValue(model)

Now you can manipulate that data in any component using:

{{ appModel.value.property }}

And then if you need to save data your actions can call additional Resources (SQL, REST, etc...) with the updated data from your model.

Make sense?

3

Hey, thanks!

This does make sense, though being new I'm not 100% sure where to create the TS variable...

4

@fisherstreetllc,

In the Code Panel click the '+' icon and choose Temporary state.

Screen Shot 2023-03-21 at 2.56.30 PM

1 Like
5