Hi all, PI Vision developers !
Step 1 : How to add a custom option group inside the configuration pane
If you plan to create complex custom symbols, or to add many options to existing native symbols, you will probably have to deal with the configuration pane's option groups, in order to organize the symbol's features.
There are surprisingly various configuration pane layouts implemented inside the native symbols and shapes : different HTML tag structures, different CSS classes, different margins, different paddings, etc...
I strongly recommand to keep it as simple as possible, and to copy-paste existing code blocks when modifying any of the "sym-[SYMBOL NAME]-config.html" files.
First things first, let's add a very simple "About" option group to the Value symbol, which displays the current version number of the symbol :
- Open the file "sym-value-config.html".
- Copy the second "<li> ... </li>" block that corresponds to the "Visibility" option group, then paste it under the third option group, just before the closing "</ul>" tag.
- In this new block, keep the "<span> ... </span>" that corresponds to the title of the option group, and update it :
- Remove everything inside the "<div> ... </div>" block.
- Add a label inside the div to display the version number :
<label>Version : <b><font color="#657281">2020.10.02.</font>01</b></label>
- Add the class "k-state-active" to the top-level "<li>" tag, so that the option group is expanded by default :
Your code sould now look like :
And the configuration pane should render correctly (don't forget your iisreset ):
In the next blog post, I'll add a bulleted list to this new option group (not as straightforward as expected !), and style the option group header with CSS in order to distinguish it from the native ones :
Don't hesitate to post any comment or suggestion, I'll really appreciate.
And stay tuned for the next steps !