Today, we are going to tell you about a new element for dashboards – Button. This special element allows you to execute various scripts by click or depending on a condition.
Scripts
A script can be created using Blockly or a platform language syntax on which the Stimulsoft product is implemented. You should remember that a script created using Blockly is universal for all platforms and will work in the Interpretation mode. More detailed information about it is here. But first things first. So, let’s start with a simple one: adding an element to a dashboard.You can add the Button element to a dashboard both from the Insert tab and the Toolbox. Also, this element can be copied to the clipboard and pasted from it or copied using the Control button in the report designer. After the Button is added to a dashboard, you should define its type, create a script and customize its visual design. This element doesn’t have its own editor, and all of its customization is carried out using the element properties.
Button types
The Button element may be of three types. All of them are familiar to users. One way or another, everybody would face with them on web pages or applications.-
First type, which is used by default for this element is called Button. As a rule, its main purpose is to execute a script by click. -
Second type which can be applied to the element - Check Box. The main difference from the Button type is that the Check Box may have two conditions – Checked and Unchecked. This type can execute a script by click but, what’s more relevantly, can define a script depending on a condition. In addition, using the Checked element property, you can define a condition by default for the checkbox – Checked or Unchecked. -
Third element type – Radio Button. This type is similar to the checkbox, but the Radio Button can be grouped into one control using the Group property. Buttons are grouped according to the general rules of grouping elements in a dashboard. Only one button from a group can be in the Checked condition.
Button events
After the button element is created, you should create a script of the button event. At the moment, two scripts - Click and Checked Changed are available for the button. First event is relevant for all types of the element, the second appears only when a condition defined using the Checked property changes from value by default. Accordingly, the button state change event is relevant for the Checkbox and Radio Button.You can call the script editor for the Click event using double click on the Button element or having clicked the Browse button on the property grid on the Event tab. You can call an editor for the Checked Changed event on the Event tab.
Main properties
Main properties allow you to define the element behavior and are placed on the property grid, the Button group. We have already told you a little about some properties above. They help to define element type, its group, and element condition by default. Also, you can specify the text you need on the button using the same name property and an icon. In this case, an icon can be common or depending on a condition – Checked or Unchecked.Besides, the main feature contains element geometry type selection. The Button can be presented as a rectangle or a circle. A rectangle can be turned into a square, if you make the height and width of the element the same.
One more important thing is the element behavior, which can be defined using main properties.Reminder!
A dashboard is a dimensionless area when viewing it, and it is stretched to the size of the viewer window if the dashboard settings do not define another one. Dashboard elements are stretched proportionally to their sizes, too.The button has a behavior setting when stretching as an element. It can be stretched both in height and width, and only in width. It is defined using the Stretch element property.
Main settings help you define the behavior, type, and form of the button. Here’s visual design is carried out using other properties and requires additional consideration.
Visual element customization
Visual element customization is a definition of the button design settings depending on an action of users. You can define settings by default when hovering, clicking, and, in cases with the checkbox and Radio Button, when checked. Visual design can be defined by settings from a style of the button element or using properties in the design group.Besides, all design properties can be divided into:
- Common.
The properties that are present for other elements of a dashboard. For example, brush, style, shadow, rounding radius. - Special.
The properties which are available only for this element, and in this case, they are properties from the Visual States group.
After the button element is added and customized, all you should do is define a script for the event.
Button scripts
Actions that will be performed when events occur, and there is a script. Due to the functionality available when publishing this article, you can determine the scenario to change the design of dashboard elements. For example, change their styles, round, change transparency, enable and disable watermark, etc. Also, using the button, you can organize data filtering. In addition, you can filter both data of elements and queries in a data source. To tell you the truth, in order to filter data, you should use a report variable. This way, you can create a panel of parameters in a dashboard and adapt its design in the style of the dashboard.We have prepared several samples of dashboards for you to see simple scripts:
- Dashboard with buttons, that demonstrates how to change design settings.
- Dashboard with data filtering in a query. The sample shows filtering in data transformation but the same principle applies to filtering a data storage query.
Also, you can find several samples in our online report storage by Button request. In particular, the sample of data filtering in dashboard elements.
In addition, we have prepared a detailed video with demonstration of main features of a new dashboard element.
We hope this article is clear for you and will help you create dashboards with the Button element. If you have any questions, don't hesitate to contact us.