Trying to modify the text of a label within an accordion row using an element within the accordion details

My project involves an accordion that utilizes the datasource named Competency. This specific datasource stores a list of core competencies for employees along with related metadata, such as descriptions. Within the Accordion's detail section, there is a panel that relies on the Comment datasource. Users can input comments that will then be associated with the Competency datasources through some unrelated logic.

Currently, I have a blank checkbox (check_box_outline_blank) in each Accordion Row. When a user enters text, I want the checkbox to automatically display a check mark (changing from check_box_outline_blank to check_box). The issue I'm facing is finding a way to select the checkbox programmatically.

An attempt using 

widget.parent.parent.parent.parent.parent.parent.children.DetailAccordionRow.children.CompletionIcon.text = "check_box";
resulted in an error message:

 Cannot read property 'children' of undefined
at CheckinSubmit.RootPanel.FormPanel.AccordionPanel.DetailAccordion.DetailAccordionDetail.AccordionDetialPanel.CommentFormPanel.CreateCommentForm.CreateCommentFormBody.Field.onValueEdit:1:78

Another approach involving 

app.pages.CheckinSubmit.children.RootPanel.children.FormPanel.children.AccordionPanel.children.DetailAccordion.children.DetailAccordionRow.children.CompletionIcon.text = "check_box";
also led to an error:

Cannot read property 'children' of undefined
at CheckinSubmit.RootPanel.FormPanel.AccordionPanel.DetailAccordion.DetailAccordionDetail.AccordionDetialPanel.CommentFormPanel.CreateCommentForm.CreateCommentFormBody.Panel3.onValueEdit:1:140

These commands were inserted into the Submit button's onValueEdit trigger.

I've relied on AppMaker's auto-suggestions to generate these commands, but am struggling to find another way to select this item. For reference, here's a screenshot of the UI and its structure: https://i.sstatic.net/hFzzZ.png

javascriptgoogle-app-maker

Answer №1

Have you considered using binding? It appears that you are adding Comments to the Competency, so perhaps utilizing binding for the label's text could be a solution?

@datasource.item.Comments.length > 0 ? 'check_box' : 'check_box_outline_blank'

When a user inputs text, I want the checkbox to show a check mark

If you desire this specific behavior and your bindings are set up correctly, you can bind the label's text to something like this:

@datasource.relations.Comments.modes.create.item.Comment !== null ?
    'check_box' : 'check_box_outline_blank'

Please note that bindings will be reevaluated when the Comment input loses focus (although there is a workaround for this).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sending information from an AJAX request to a Laravel 5.2 controller using the POST method

Hello everyone. I'm reaching out to the great community for some assistance with my first question here. I've recently started working with Laravel framework version 5.2 in a project of mine. My issue lies in trying to pass data using the post m ...

javascriptphpajaxlaravel-5

How can I retrieve the name of a React component in the most effective way?

My current challenge is figuring out how to retrieve the name of a React component. I initially attempted using the this.constructor.name property, but discovered that it doesn't function properly in production mode due to code minification by Webpack ...

javascriptreactjstypescript

Creating a like and dislike button using Jquery's ajax functionality

Hey everyone, I'm currently working on implementing a like and dislike button similar to Facebook's on my website. I have a list of posts displayed using PHP loops and I want a single button to change color to blue if liked and remain the default ...

javascriptphpjqueryajax

Modify the displayed text according to the content of the input field in HTML

I need to update the value of an <h3> tag based on user input in an input field. Here is my current code snippet: <input id="Medication" name="Medication" size="50" type="text" value=""> <script> $(document).ready(function () { $(&apos ...

javascriptjqueryhtmlinput

Struggling to comprehend the filtering arguments in VueJS?

While going through the VueJS Filter(orderby) API documentation, I came across some confusion regarding the arguments. Below is a sample for reference: Arguments: {String | Function} targetStringOrFunction "in" (optional delimiter) {String} [...s ...

javascriptvue.js

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

Using Vue Js to bind two values to an href attribute in a tag

As a Vue.js beginner, I am encountering an issue where I need to update two values simultaneously during rendering. <ul class="category-list"> <li v-for="category in categories"> <a v-bind:href="location/category.slug/all" v-tex ...

javascriptlaravelvuejs2vue.js

Endless Loop Issue with Google Maps API Integration in NextJS-React

Currently struggling to troubleshoot an infinite loop issue in my React function component map. I've spent a considerable amount of time analyzing the code and suspect that it might be related to the useEffects, but I'm unable to resolve it. Atta ...

javascriptreactjsnext.js

Having trouble getting card animations to slide down using React Spring

I am currently learning React and attempting to create a slide-down animation for my div element using react-spring. However, I am facing an issue where the slide-down effect is not functioning as expected even though I followed a tutorial for implementati ...

javascriptreactjsreact-spring

A guide to JavaScript: Fetching and Parsing JSON Data from an API

Hey there! I've been working on using this code snippet in my defult.js file to call an API, but I'm having trouble figuring out how to read the output. It always seems to end up in the last else part. function fetchDataDist(APPID, flag, call ...

javascriptnode.jsjson

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

javascriptjqueryhtmlarrayshtml-table

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Select one href by clicking and apply addClass

I have a one-page HTML document with links in the header. I want to make it so that when I click on a link (<a>), only that specific link changes its class to (.links). I've tried various methods, but the current jQuery method I'm using ad ...

javascriptjqueryonclick

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...

javascriptjqueryhtmlkeypresskeydown

Tips for effectively packaging the React 17 library alongside the latest JSX transformation feature as an ES Module

I am currently in the process of creating a basic library consisting of React components that I intend to publish as an ES Module package for NPM. With the utilization of React 17, I have incorporated the new JSX transform into my code. To generate the ES ...

javascriptreactjstypescriptwebpackrollup

Using 'jquery.get' in combination with a servlet is

I need a servlet that can handle GET requests and return a specific string. A simple example of the code is shown below: public class QueryHandler extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) ...

javajavascriptjqueryajaxservlets

Suggestions for activating a particular accordion divider?

I've come across a seemingly simple question that has been causing me some trouble. I am attempting to expand, open, or collapse a specific accordion panel, but have not been able to find an answer so far. Let's say I have three panels identified ...

javascriptjqueryhtmlaccordion

Storage in Ionic and variable management

Hello, I'm struggling to assign the returned value from a promise to an external variable. Despite several attempts, I have not been successful. export class TestPage { test:any; constructor(private storage: Storage) { storage.get('t ...

javascriptangularvariablesionic-frameworkpromise

Generate a complete screenshot of a website using Chrome 59 through code

Is it possible to programmatically capture a full-page screenshot of a website using the latest Chrome 59 and chromedriver with Selenium Webdriver, even if the website is larger than the screen size? ...

javascriptnode.jsselenium

Excluding node modules when not included in tsconfig

Within my Angular project, there is a single tsconfig file that stands alone without extending any other tsconfigs or including any additional properties. Towards the end of the file, we have the following snippet: "angularCompilerOptions": { ...

javascriptangulartypescriptnpmtsconfig