How to build codeless logic for selecting a single database table column value?

This is a really simple question. I think I missed a basic concept…

When retrieving a value from a database table’s column, what kind of logic block construction can be (or should be) used?

I’ve been using the familiar demo table “SayHelloToTheDatabase” (from the Missions tutorials) to test how to do it.

Just to be clear, I want to access (for example) “Spiderman” in the following hierarchy:
SayHelloToTheDatabase → name → “Spiderman”

The first step is fine - getting the object data On Page Enter:


The above logic is very similar to that in the lesson: 8-2 Database to drop-down

In that lesson the Changed Value block is used:

OnChangeEvent-ChangedValue

But I am trying to learn how to do it with a Custom Component, so the setup is a little different - value changes such as user input typing are detected, but no Changed Value block appears for easy access to this logic:

I have tried using lists, using loops, and lots of other things…

I usually get a result of [object Object],[object Object],[object Object],[object Object]

Or if I include a Convert to Text block:

[{"name":"Spiderman","age":27},{"name":"Ironman","age":38},{"name":"Batman","age":35},{"name":"Daredevil","age":30}]

…or just errors.

But what I want is,
when list index = 0 : Spiderman
when list index = 1 : Ironman
and so on…

I noticed the Delete Object Property block and thought it would be handy if there was a Get Object Property block for this sort of purpose.

get-object-property

Then plugging heroes into object, and name into property would give access to the data.

Well, I’m sure there is some simple way to structure the blocks that enables access to a table column’s value, and I just don’t know what it is. Any help would be appreciated!

Hello @Causality

You need to add 2 more blocks:

  1. In list get …
  2. Get property of … (point one)

So In list get will return the required object. And with Get property of you will get the name.
Is that what you need?

Just keep in mind that for In list get block the minimum value is 1.

Regards,
Inna

1 Like

Inna, thank you for your reply!

I tried the setup you shared, but I got the following error in the browser’s console:

TypeError: getObjectProperty(...) is undefined
    placeholderLogic https://manyfrog.backendless.app/api/files/ui-builder/containers/default/pages/test-cust-component01/components/3b98e9e1c80a2b9855a7a6882f867bc8/bundle.js:29
    run https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    <anonymous> https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    fk https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    unstable_runWithPriority https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    gg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    Oj https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    ek https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    V https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    onmessage https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
sdk.js:16:988271
    Ni https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    callback https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    Eg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    Yi https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    dk https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    unstable_runWithPriority https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    gg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    Uj https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    Lj https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    jg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    unstable_runWithPriority https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    gg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    jg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    ig https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    fk https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    unstable_runWithPriority https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    gg https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    Oj https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    ek https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    V https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16
    onmessage https://manyfrog.backendless.app/api/files/ui-builder/library/sdk/sdk.js:16

It’s similar to errors I saw before when I was trying various block configurations.

Might it make a difference that your example is of an API Service and mine is a Custom Component?

I followed this tutorial, and then I wanted to see how it should be done if needing to communicate with the database, so I tried the concept introduced in lesson 8-2 Database to drop-down. That’s when I realized there was a gap in my understanding.

Here’s my test project’s info, if you don’t mind taking a look:
App ID: BC8A3EBD-0504-A89D-FFE1-E7DB3CEA3100
Page: test-cust-component01

The problem on that page was that you were trying to access data before it was loaded and became available. See the changes I made in the placeholder label logic to make it work.

1 Like

Thank you, Mark!

I will post a screenshot for other readers who may be wondering about the solution:

I’d like to understand this a little better. I hope you don’t mind me asking a few more questions…

  1. Does this work because test is more persistent and will continue to try to access data until it gets something and evaluate to one or the other (true/false)?

  2. Would it be accurate to say the empty string is serving as a placeholder because the if false socket can’t be left empty?

  3. To avoid running into similar confusion in the future, in what scenarios should the test block be tried as a solution?
    You were able to determine that the origin of the problem was an attempt being made to access data before it was loaded. I’m not confident (with my present knowledge) that I could determine the cause, and know to try using test to solve it - but I would like to be able to identify such situations and troubleshoot them effectively, as you did.

Hi @Causality

  1. Does this work because test is more persistent and will continue to try to access data until it gets something and evaluate to one or the other (true/false)?

no, the “test” block is just a condition which returns value A if true or value B if false. The “Placeholder Logic” handler runs on each render and changing any DataModel (AppData,PageData,FormData, ContainerData, etc) provokes a new render.
That’s why when your data is loaded it modifies the PageData and then it a new render and as a result it runs the “Placeholder Logic” handler but at this moment the PageData contains “heroes” value

  1. Would it be accurate to say the empty string is serving as a placeholder because the if false socket can’t be left empty?

It’s just for consistency when a Logic Handler expects a value (in this case it’s String) the handler should to returns the value. In case if you do not connect any value it means it returns “undefined” value and it most cases the UIBuilder can handle it but we recommend always return a value

  1. To avoid running into similar confusion in the future, in what scenarios should the test block be tried as a solution?
    You were able to determine that the origin of the problem was an attempt being made to access data before it was loaded. I’m not confident (with my present knowledge) that I could determine the cause, and know to try using test to solve it - but I would like to be able to identify such situations and troubleshoot them effectively, as you did.

The “test” block is just a tool which allows you to create a conditional return. You can replace it with a regular “IF” block and “return” from the “Logic” Codeless Category. Or you can hide some UI Components when data is not loaded yet and all children in those components will not be rendered. However, the more important thing is you can not read a property of undefined (nullable) value, it will lead to an exception in the code.

Regards,
Vlad

1 Like

Thank you, Vlad. Your explanation is very helpful for understanding better what processes are going on.

Appreciation to Mark and Inna as well. You’ve all been very helpful.

1 Like