Chapter 5. Applying Filters to the Dashboard

Now that you are able to build a dashboard using CDE on your own, you now should see how to take advantage of the most important components. After building some fancy dashboards, you will notice that you are not using all the components, just a subset of them. We will cover these components now.

We've split the chapter into two. The first part covers the filters and the other part covers the data being displayed. Filters, or selectors, can be applied to the dashboard as one way to create an interaction and filter the data you want to be displayed on the dashboard. If you deliver a dashboard with too much information, it will be hard for the final user to understand it at first glance. We already said that a dashboard should be easy to understand and get results from at first look, so by filtering the information, the user will be able to access all the information and it will be simple to understand.

Firstly, you need to know that there is a difference...

The select component

The select component is part of the input components group. Based on the results of a query or based on a values array, it can be set on the properties or on the pre-execution of the component, and the user will be able to select an option from a dropdown. A select component can look like the following image:

To have a select component properly working, the first step is to create a placeholder for the filter, using the layout perspective. The following step is used to set up the query, but it is not needed when you want to set the values on the values array. Another step, and an important one, is to create the dashboard parameter to store the value that is selected by default, and to set the name of the parameter on the corresponding property. The last step is to add the component to the dashboard and set all the properties needed.

By clicking on Select Component inside the Select group, the component will become available. Once available, you will need to set: the name...

The multi-select component

The multi-select component, identified by the name MultiSelect, is very similar to the select component. The big difference is that we may select multiple options in the selector. When we need to provide the ability to choose multiple values from the selector, this is the component to use.

For you to be able to test it and see how it works, you can create a component with a values array that will display more than the four rows in the preceding example. Render the component and check that you now have multiple selections. The properties that are available are the same as those for the select component.

One important feature that is common to all the components inside the Selectors group is that they can be nested, so the selection of one can depend on the selection of another and so on. The concept behind this is the same as for the remaining components: having to pass parameters to the data sources and listening to the parameters that trigger this update to fetch...

The filter component

The filter component is a new and recent component, with more advanced options that will make the interaction of the dashboard even better. It is used as a simple selector or as a more advanced selector with multiple choices. The selection of all or none options is also available and achievable by setting some properties. The component also provides server-side capabilities that can be used when the number of elements to be displayed is too high.

I would dare to say that it's replacing the select and multi-select components. It's more powerful, able to provide single and multiple selections, and has a lot more improvements, besides the fact that it is even more user-friendly when using a select component with a plugin. If you also need to extend its capabilities, you are able to. Do not hesitate—just use it.

As with any other component, you need to at least set the Name and the HTML Object property where the component should be rendered, and if it's a select component...

Date range input component

With the date range selector, you can select dates within a range of dates. For instance, you can select the last seven days, the last month, or even an interval of dates. Besides the common properties, there are the following ones available:

• Today: This option will select today's date as the start and end date.

• Last 7 days: This will select the last seven days by setting today's date. The end date will be today's date and the start date will be today's date less seven days.

• Month to date: This will select the period starting at the beginning of the current month and ending at the current date.

• Previous month: This will select the last day of the last month as the end date and the first day of the last month as the start date.

• Specific date: This will let the user select one specific date. The start and end date will be the same.

• All dates before: This will select all dates before the selected day. When setting the component, we need to specify the earliest date...

The multi-button component

From my perspective, the multi-button component can and should be seen as a selector. I have also used it as a tab selector and/or as a radio and checkbox selector, and that's because it's simple to style, and has the same look and feel on all the browsers:

• Datasource: When setting a data source, the options available will be the ones from the result of the execution of the query.

• Values array: This is used if we want to have to set fixed values without the use of a datasource. It accepts a multidimensional array. Each option should be set using an ID and a value to be displayed.

• Value as ID: This was already covered for other selectors. It tells you whether the values and id should be considered as the same.

• Multiple selection: This is used to allow or not allow multiple selections. The default value is false, so it will not accept multiple options selected at the same time. Set the value to true if you want to make it possible.

Tip

Values array set dynamically...

Summary

By reading this chapter, you learned about using selectors on a dashboard built with CDE. You should know which components are the most useful and are used to filter data in the dashboard, which does not mean that you can use only components from the selectors group. You will see in the next two chapters that we can also use a table, a chart, or a template component to create interaction on the dashboard.

You should be aware that you can replace the use of the select and multi-select components and make use of the filter component instead. Button and multi-button components can be used to filter data, but can also be used to create interaction on the dashboard, and you can use the multi-button component to replace selections using radio buttons and checkboxes. This is the reason why we didn't cover the radio-button and checkbox components. The multi-button component is much easier to style, and with the knowledge you have gained about the use of other selectors/filters, you should...