Change text acording to dropdown value

Ask the community
,
1

Hi! I have a Dropdown connected to a database, and I have a text that display some content acording to the selected value on the dropdown, I achived to do it through code

export function dropdown1_change(event) {
 if ($w("#dropdown1").value === "1. Hoja de Vida") {
        ($w("#instrucciones").text = "Adjuntar Hoja de Vida sin soportes (agregar los soportes por separado)." );
    }   if ($w("#dropdown1").value === "2. Cédula de Ciudadanía") {
        ($w("#instrucciones").text = "Escaneo en formato PDF por ambas caras." );
    }   if ($w("#dropdown1").value === "3. Soporte de Estudios") {
        ($w("#instrucciones").text = "Bachiller, profesional, posgrados, etc." );
    }   if ($w("#dropdown1").value === "4. Certificado Experiencia Laboral") {
        ($w("#instrucciones").text = "Bachiller, profesional, posgrados, etc." );
    }
}

But, this has some problems, if I edit the database content, the code does not work obviously, and I have to change the code to match the database content.

Now what I want to do is the textbox display the content but query it from the database. Any idea?

2

Hello FX Agency,

yes you can do it in two ways, with the help of a dataset, or by quering a your data-collection.
Try to see it in a simple way, all you want is to get the right column and row in the right database, right? :grin::grin::grin:

So let’s do it! Here we go…(by using a dataset), you will need something like this here…

let chosenIndex = $w('#dropdown1').selectedIndex

$w("#dataset1").getItems(chosenIndex, 1)
  .then( (result) => {
 let items = result.items;
 
 let totalCount = result.totalCount;
 let offset = result.offset;
 let firstItemTitle = items[0].title
    console.log(firstItemTitle)
  } )
  .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
  } );

How it works ???
The chosen INDEX ot the DropDown = CURRENT ITEM in your DATABASE
Just modify the right column, and complete the code!
And of course do not forget to create a dataset.

P.S.: In this example i refered to the first column (title)

EDIT: (Damn, forgot to mention the other way…)

3

Hi, thanks for your help. I tried but does not work

let chosenIndex = $w('#dropdown1').selectedIndex
console.log(chosenIndex)

$w("#dataset2").getItems (chosenIndex, 1)
  .then( (result) => {
 let items = result.items;
 
 let totalCount = result.totalCount;
 let offset = result.offset;
 let firstItemTitle = items[0].instrucciones
    console.log(firstItemTitle)
    $w('#instrucciones').text = firstItemTitle
  } )
  .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
  } );

I put a console.log to see what is the chosenIndex, but the console say undefined.

This is what the console shows

1366×208 6.69 KB

4

Hello again,

i just tested your code, for me it works.
I will give you an example, in few minutes, have to reconstruct it.
See ya in a few minutes…:wink:

5

And here it comes.
Look at this example here. Take attention onto the labels of the dropdown.

https://russian-dima.wixsite.com/meinewebsite/test

What do you see? OK!
Now look into the console-logs (Press F-12 in google-Chrome-Browser and go to CONSOLE).

What do you see as OUTPUTS?

The used database has a very simple structure. It has just one column (“title”), the first one STANDARD-COLUMN, where are some inputs (Designer-1 - 10).

As you can see, the dropdown is connected to the database.
All you have now to complete, it the labeling and valuing of the DropDown.

The DropDown should of course have the right LABELING.

EDIT: here the code

$w.onReady(function () {
 //TODO: write your page related code here...
});



export function dropdown1_change(event) {xxx()}


function xxx  (parameter) {
 
 let chosenIndex = $w('#dropdown1').selectedIndex
    console.log(chosenIndex)

    $w("#dataset1").getItems (chosenIndex, 1)
    .then( (result) => {
 let items = result.items;
 
 let totalCount = result.totalCount;
 let offset = result.offset;
 let firstItemTitle = items[0].title
        console.log(firstItemTitle)
        $w('#TXT1').text = firstItemTitle
    } )
    .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
    } );
}
6

Additional-Info:
When you have seen this example and did understand it, you can do the next simple step to update the LABELING of the DropDown.

How to do that?
Just connect your DropDown to your DATASET, like shown in this pic…

936×822 45.4 KB

7

Yess it works. the problem was I didn’t write the first two lines, my fault.



export function dropdown1_change(event) {showIns()}

function showIns (parameter) {

let chosenIndex = $w('#dropdown1').selectedIndex
console.log(chosenIndex)

$w("#dataset2").getItems(chosenIndex, 1)
    .then((result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let offset = result.offset;
 let firstItemTitle = items[0].instrucciones
        $w('#instrucciones').text = firstItemTitle
    })
    .catch((err) => {
 let errMsg = err.message;
 let errCode = err.code;
    });
}

Now, I have another problem, only works on preview mode, I check the permissions of the database, its site content :frowning:
I don’t know what happened

8

Ok, then check one more time the following…

  1. Database-Permissions (set all to FULL-ACCESS for testing)
  2. Set DATASET to READ&WRITE
  3. Website is published?
  4. Event-Handler is connected with your CODE?
9

So sorry, noob error. I didn’t sync the database to live :sweat_smile:
It’s working fine now.
THANK YOU

10

No, problem! And do not forget to like it, if you liked it :wink: