Perspective Properties - View all Component options

Hi All,

Just wondering if there was any function, script or list available to access all the available props for perspective components?

Would be great to fully understand where certain colours and the like come from.

Thanks Again.

I’m sure somebody has a script out there, but you could also just look in the browser of an active session -or even a Designer session if you’re so inclined.

In a browser, right-click the component you’re interested in investigating and select “Inspect”. The resulting browser window will provide information about the selected element. Sometimes when you do this on a component, you might right-click an internal “piece”, so you should probably traverse up the DOM tree until you find an HTML element whihc has a data-component attribute. In the following screenshot I’ve clicked the + button of a Map component, but I realy should look at the upper highlighted portion.


While you’re in this “Elements” tab of the browser’s designer panel, you should also see an internal tab of “Styles” This is where you’ll see how colors are applied from various theme files, Style Classes, and properties.
The next screenshot is of a Multi-State Button where I’ve applied a Perspective Style Class named “Exp” (you’ll see it as .psc-Exp) as well as a font-size inline property. The rules toward the bottom are applied first, then the next layer up, and so on. When a property is overridden, you’ll see it crossed out; this means a property applied higher up is used instead. In this screenshot you can see that properties are applied from several sources: a theme (light.css), a Perspective Style class (".psc-Exp" from style.css), and inline properties (the element.style portion).

This all can also be done within the Designer by clicking “Tools” in the menu bar and selecting “External Debugger”. You need to drill down through the DOM yourself to locate the element you want, but the same principals apply.