• State Resolved
  • Locked Locked
  • Replies 3 replies
  • Answers 1 answer
  • Subscribers 83 subscribers
  • Views 124 views
  • Users 0 members are here
Support feedback
Options
Options
Similar topics

This thread has been locked.

If you have a related question, please click the "Ask a related question" button in the top right corner. The newly created question will be automatically linked to this question.

CCSTUDIO3: ERRATE Button Click Boilerplate Code - GCS GUI V3

Marco Noll
Prodigy 30 points
Part Number: CCSTUDIO3

Unfortunatly the documentation for GCS V3 is not very comprehensive. Expecially the examples given are not working as is*

For me the following worked when I added this to the index.js file in my project, having a button named with id "btn_start"

//file index.js
(async () => {
 GcWidget.querySelector('#btn_start').then(button => {
 button.label = 'Click Me!';
 button.addEventListener('click', () => alert('I am clicked'));
});
//...
})

*gc-widget-button api link
*Getting Started - GUI Composer Library V3

Please update the specifications, it's cumbersome to get simple things going, when the examples are outdated or contain bugs.

  • 0
    TI__Genius 16366 points

    Hi Marco,

    I can file this as a bug and the SDTO team will handle this being fixed.

    Thank you for your feedback.

    Best,

    Ryan Ma

  • +1 in reply to Ryan Ma
    TI__Genius 14840 points

    Hi Marco, 

    The documentation in component help for the button click even handler does work. What is missing is where that code needs to be placed. 

    If you copy and paste documented code snippet and add it inside Init function then it should work. Init function should be in default index.js when a new project is created. 

    The code snippet that you attached is executed as soon as index.js is loaded... without waiting for all graphical tags/elements to be instantiated. Thus when querySelector is executed it can't find button element because it does not exist yet. 

    Init function is called after application receives "DomContentLoaded" event that signals HTML tags/grapical elements being instantiated. Thus document.querySelector will be able to find button element. 

    GcWidget.querySelector is GUI Composer specific version of querySelector that also waits for that same DomContentLoaded event, thus it is a safer alternative to use as it makes developer code a bit simpler to write. 

    It is good feedback to adjust documentation to try and leverage GCWidget method of the adding an event handler. 

    Martin

  • 0 in reply to MartinS
    Prodigy 30 points

    Thanks for the quick response. My bad, for some reason I overlooked that there is the init() at the bottom of the index.js template.