Short of “rolling your own” with images?
You can’t without some coding and some images to represent selected/unselected state.
You could Make your own out of a group of components pretty easily. The only really hard part is that you have to make your own checked and unchecked images. In 5 easy steps:
- Take an Image component and a Label component and group them.
- Add a ‘selected’ dynamic property to the group.
- Use an expression binding to switch between checked and unchecked images based on the groups ‘selected’ property.
- …
- profit!
You could take it one stop further and make multiple sizes of checkbox and use a dynamic property to choose which size to use.
Is this still True. I have to make my own? I just wanted to check before spending the time, thx.
1 Like
Hi,
Did you ever find a response to your question? Is this still true?
At least within Ignition 7.9, it is still not an option. I wouldn’t worry about spending the time, you could make it into a small template pretty quickly by following Robert’s instruction above.
I’m not sure if anything will change for Ignition 8, but I wouldn’t get hopes up too much.
Thank you for your response. Will check for it in 7.9
Ok, I misread your response. Checkbox cannot be made bigger in 7.9 also as you mentioned. I will try Robert’s instructions.
I am trying to follow Robert's directions. I cannot seem to get the checkbox (image) to occupy the same row and column as the label. My effort to group these two components was unsuccessful.
I would like to see 'Missing Info' either be to the left of the checkbox with little space between the components or see 'Missing Info' above the checkbox. I am using a Flex Column to get the checkbox to appear in the center of the column. The row height is 48, the label height is 48 and the image is set to 24 with the actual PNG file in absolute mode with 16x16 pixels.
Any advice would greatly appreciated?
Are you trying to do this in Perspective which wasn't invented when Robert wrote that in 2011? If so, I suggest you start a new thread and delete the post in this one.
I am sorry for wasting some of your time, Transistor. I spent quite a bit of time messing with the checkbox component and decided to research why it wasn't doing what I wanted. I then spent some time accomplishing what I needed to with images.
After reading your reply I got back after it using the checkbox component. I was able to accomplish what I wanted to do with using both methods. Thank you for your time. I do apologize for not figuring out how to use the checkbox component the first time around.
1 Like
Could you elaborate the ways you were able to accomplish this?
I'd be happy to share the two methods here.
The problem I had with the approach mentioned many years ago was grouping the label and image component together. Transistor pointed out that I was having the problem because I am using Perspective. I am newbie with Ignition so I completely overlooked what the OP was usig as a design tool. My prior experience comes from developing software with a MVC (model-view-controller) approach.
I ended up creating two PNG files with the text (label) and checked/unchecked checkbox combined. One image had the text with an unchecked box and the other image had the text with the checked box. I used https://alternativeto.net/ to find a free alternative to Photoshop. GIMP was the application used to create the two images. I would be happy to add more details about the sizing of the image, text, scripting, etc. if there is interest.
I am not sure why I didn't have luck the first time around with the checkbox component. It ended up being more straight forward the second time around. Having it pointed out to me that the approach I was taking was over 10 years old suggested, to me, Perspective must be able to handle simple checkbox editing and to give it another shot.
To get the checkbox the color I was after, the checkedIcon and uncheckedIcon (under PROPS) was set to the color choice (#60C9FF). Under style, borderStyle was set to hidden, borderColor set to the color choice, and outlineColor set to the color choice. The hex color #60C9FF was used throughout. To make the text the correct color, a manually created theme was utilized which was found under PROPS->style->classes and fontSize was set to 12. I am not certain how to control the size of the checkbox. We used a height of 48 for the row. A height of 48 was used for the checkbox component so it was centered in a pleasing way to the eye.
If someone wanted a different style checkbox or wanted it a different size then the image route is one way to do it.
1 Like
Thanks. Would you be willing to upload the two PNG files you created?
This is a big load of trouble, requires a tedious workflow for each label, doesn't support translations, doesn't use vector graphics and won't follow the project's CSS theme.
A simpler alternative would be to use icons and set the borders on them. In this case I have set the border radii by expression function to be a fraction of the icon width, {this.position.width} / 5. This will scale well when the icon is resized. The unchecked icon has its path left empty. The icon and border colors are bound to the built-in theme variable '--callToAction'. You can find more on that here:
https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-Built-inThemeColors
You could then create coordinate or flex view with two parameters, caption and value, to make this component reuseable in the layout that you need.
The job can be improved further.
- Create the
checkboxparameter on the view. Make it Input/Output type. (Repeatedly click the little arrow on the right.) - Add an event script to the icon to toggle the checkbox parameter.
- Add an expression binding on the icon path.
if({view.params.checkbox}, 'material/check', '')
Now the check mark will appear and disappear with each click.
2 Likes
You can use borderRadius: 10 instead of having the 4 corners configured separately.
That being said, if you want the same visuals as the built-in checkbox, you don't even need to set borders. Just use the same two icons:
Create an icon, add a custom.checked property, bind the icon path to that prop and use a map transform:
or an expression transform:
You'll obviously need to set the color(s) as well. You can even use ignition's color variables for this:
Top row is the built-in checkbox, for comparison.
1 Like
Damn, why didn't I try that before. I've just been setting them all individually all this time like a dummy 
I used the style editor dialog and set the all corners option. It then splits them out to the individual corners. I didn't bother to condense the props.
1 Like
That's what the style editor does...