JavaScript Dashboards

  • JavaScript Dashboards

    Posted by Andrew Veggian on April 7, 2021 at 12:44 pm

    Here’s an example I created to teach people how to make JavaScript dashboards that turn layers on and off.

    The first file is a sample dashboard that I created so you can see how this all functions. Everything is on a single-page PDF. All markups and form buttons are assigned to layers. The form buttons are each assigned similar JavaScript codes that basically tell it which layers to turn on and off. There are four form buttons, three that change the color (these would be considered sub-pages to the dashboard), and a Home button that takes you back to the dashboard.

    The second file is the JavaScript code for the Home button which turns off all layers except the Dashboard layer. This code can be copied and pasted for all the other buttons and then modified slightly. The only thing that needs to change is to use “false” to turn layers off and “true” to turn layers on. When you use this in your dashboard you will need to change the layer names to match the layers in your file. This example has five layers, but you can add as many as you want by copy and pasting the last block of code and changing the name and state of the layer. Anything on a line of code after “//” is ignored by JavaScript and is just there as a guide to tell you what the code is doing. This can be deleted if you want to clean it up, but it is a good reminder when you come back to it and forget what to do.

    The last piece of the puzzle is where to enter the JavaScript code. After you select a form button in the Forms Panel, go to the Properties Panel and at the bottom, there is an Actions section. Click “Add Action”, go to the “Form” tab, click “Edit” to the right of the JavaScript area, then copy and paste the JavaScript in this window.

    Here are some miscellaneous tips/notes I took along the way that might help:

    -Set everything on the
    main dashboard page (including buttons) to the dashboard layer.

    -Sometimes you have to
    play with the order of the markups using “Send to back” or “Bring to

    -I like to lock the
    markups when I’m all done so users don’t accidentally move them.

    -I like to apply tooltips
    to my buttons that show up when you hover over them. (Hover over the
    buttons to see what I mean)

    -On the layers tab, you
    have to save the default configuration to only show the dashboard layer so
    when the file is opened that is the only layer that is turned on.

    If you would like to see a Youtube video of this in action, check out the following video by Pablo Giraldo:

    Andrew Veggian replied 3 years ago 1 Member · 0 Replies
  • 0 Replies

Sorry, there were no replies found.

Log in to reply.