Datapage field label selection from a different table and case dependent?

[PeterER8]

Hi

Apologies upfront if my questions have been asked before (I could not find the answer). In my defence I am new to Caspio, started testing it last week and now have lots of questions. This one is regarding dynamically selecting data labels on submission datapage based on a field.

Assume I have a shift field and in that field I can select “morning” or “afternoon”. Based on that selection I would want the labels for the next 4 fields to either say “08:00” , “10:00”, “12:00”, “14:00” or, if it is afternoon, “16:00”, “18:00”, “20:00”, “22:00”

The exact times can be stored in a table called Shift_times that would look like this

Shift_name, Period_1, Period_2, Period_3, Period_4

morning, “08:00” , “10:00”, “12:00”, “14:00”

afternoon, “16:00”, “18:00”, “20:00”, “22:00”

 

Depending on what I select on the submission form I would want the labels to pick the time labels from the Shift_times.

Can this be done and if yes how ?

 

I really appreciate any help you can give me!!!

[Kurumi]

Hi @PeterER8,

Welcome to Caspio!

Are you referring to this result?

If yes, you can do this using the Cascading feature. You can create a lookup table first for all the Shift Name and Times then include it in your Form element. For more information, you can check these references:
https://howto.caspio.com/datapages/datapage-components/cascading-elements/

I hope this helps!

[PeterER8]

Hi @Meekeee

Thanks for that, unfortunately that is not what I am after (the cascading element was the first one I learned

See where it says "Shift Time" - ideally I would make the label text say "Shift start 06:00" or "Shift start 14:00"  depending on the shift I select. 

In other words, this is not about data entry. This is about dynamic information change on the  page for labels that explain data entry fields to the user.

[CoopperBackpack]

Hello @PeterER8,

This should be possible with JavaScript.

Add this code to the Footer section. Disable the HTML editor before pasting.

<script>

document.addEventListener('DataPageReady', changeLabelHandler)

let timeDropdown = document.querySelector("#InsertRecordShift_start"); // replace Shift_start with your field name 

function changeLabelHandler() {
  timeDropdown.addEventListener('change', selectedTime);
}

function selectedTime(event) {
 document.querySelector("label[for='InsertRecordShift_start']").innerHTML = 'Shift start ' + timeDropdown.value; // replace Shift_start with your field name 
}

</script>

You need to replace the field name twice in the code. This article can be helpful https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/

Please update this thread in case you have further questions.