UPDATE! The community will be go into read-only on April 19, 8am Pacific in preparation for migration on April 21. Read more.
UPDATE! The community will be go into read-only on April 19, 8am Pacific in preparation for migration on April 21.Read more.

Live Javascript Development using Chrome DevTools

Live Javascript Development using Chrome DevTools

chrome_console_example1_20150420-205000_1.png

The Chrome DevTools command line is an extremely powerful tool for developing/debugging/testing JavaScript in real time on your forms.  You can manipulate the UI by typing commands that use the AE JavaScript library, or even define/execute your own methods while viewing states or executing transition forms.  You can write, test, and refine your custom JS code directly in the browser, and not go back to Composer until you're pasting in the final result!

To access the Console, simply navigate to the desired SBM page and then press the "F12" key. Then, select the "Console" tab and look for the > prompt:console_1.png

Hold on though, because you can't just start typing commands and expecting them to work.  The "secret sauce" to using this method is in selecting the correct frame from the drop-down menu in the Chrome console:

console_2.png

With a dozen or more frames involved in rendering some types of SBM forms, it can be tricky to know in which frame's "context" your JavaScript should execute.  But you can always find the correct frame using these steps:

  1. Right-Click on an element or some white-space within the body of the SBM item that you are trying to manipulate, and select "Inspect Element"

  2. Scroll up through the displayed HTML, allowing the mouse to move over the sections of code as you do so.  You will notice as you move upwards that larger and larger areas of the current item are highlighted automatically by Chrome.

  3. Continue to move up through the page until you come to the "#document" element which encompasses your entire form.  You will see the parent element of this document is <frame name="something">.  That Name is your frame's context!

    console_example_image2.png

  4. As a basic cheat-list, a State form is usually named "Detail" and a Transition form is usually "View".  There are some exceptions however, such as when moving through the results of a listing report - enough that after doing this a few times you'll generally get pretty quick at selecting the correct frame name from memory, but will occasionally have to resort to the "trick" in the steps above to figure it out.

  5. You will know when you have the right form if you start to type in a command from the AE JavaScript library such as "GetFieldValue...", because Chrome will auto-suggest completion from the list of function calls available:

    chrome_console_example1_20150420-205000_1.png

Now that you've found the right frame, any commands that you type will execute just as though you had attached them to the form as a stand-alone JavaScript, or through Form Actions!

You can use this technique to:

  • Hide/Show form elements
  • Debug and test custom functions (you can redefine them on the fly)
  • Trigger change events
  • Make AJAX calls
  • Track down those hard-to-reproduce errors

...And anything else you can imagine!

 

Labels (1)

DISCLAIMER:

Some content on Community Tips & Information pages is not officially supported by Micro Focus. Please refer to our Terms of Use for more detail.
Comments
Great information Jeff. We used this method internally this week to track down an issue with one of our forms.
Great tip! I'll keep this in my back pocket. 🙂
Nice concise way to get started using Chrome debugger tools!:)
Thanks Jeff.
Thanks for sharing. This came in handy today.
Nice work. This will come in very handy!!
This is fantastic, thanks for sharing!
Top Contributors
Version history
Revision #:
2 of 2
Last update:
‎2020-01-30 18:16
Updated by:
 
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.