How to use the Checklist Dropdown component
A couple of weeks ago the designer on our project gave us some mockups. They were all quite standard: pages with a list and some filters, details page, etc.
Although, there was one design that, until now, we didn’t have in our application. A Dropdown with four or five items, each one with a checkbox. The behavior intended was straight and forward: “every time I uncheck an item, it will immediately change the content of the list”.
The first thing I did was a search throughout the Forge for a component. I tried three or four and none of them seemed to work as we intended. So… let’s make one from scratch!
Here is a basic tutorial on how to use our Checklist Dropdown component, hope you enjoy!
Step 1: After installing the Checklist Dropdown component on your environment, consume it on the module you want to use it. Don’t forget to consume every item there (Web Block and Structure)!
Step 2: Drag and drop the dropdown’s web block to your screen. You’ll see that you need some work from your side:
Step 3: Let’s start with the input parameter StaticEntityList
- Create a local variable of type CommonFilters List (you have to consume this structure);
- On the Preparation of the screen, query your static entity and assign the output list to the CommonFiltersList like this:
Note: The IsSelected attribute as True is the default value that we are setting.
Now just send this list as the input parameter of the web block.
Step 4: Create an action to filter our data
Before developing the handler we need to find a way to filter our data. We will do it with a server action, since this action will be used on our Preparation and in our Handler.
a) Our server action variables should look like this:
An input parameter of type CommonFilters List and as an output parameter we send our list that will be filtered.
b) We want to know which items from the CommonFiltersList are selected, so we use the ListFilter system’s action:
c) Now that we only have the MovieGenres that are selected, let’s do a ForEach to this list and filter an aggregate. Here is the filter we are using (take a look at the data conversion):
This Aggregate will get all the movies with the Current MovieGenre being iterated.
d) Append the Aggregate’s list to our Output list using ListAppendAll. Now our server action should look like this:
e) Drag and drop the new server action to the screen’s Preparation and send the local CommonFiltersList as an input parameter. You can save the output list within a local List of the same type. Here’s our Preparation example:
Our Preparation is ready to go!
Step 5: Now we need a handler to the block’s event
In our example, the handler will be the RefreshMovieTable screen action.
Step 6: Develop the handler’s logic
- On the web block click on New Argument:
As you can see, you have the arguments Row and IsSelected. Add them to your action. Right now our screen looks like this:
The IsSelected and Row values are passed by the dropdown block. All we have to do is:
- Assign the IsSelected value of the correct Row like this:
2. Refresh the filtered Movies. Just use our server action again
3. Update our local list with the new one from the server action.
Our handler should look like this:
Note: We already have a table on our screen which has the local MoviesList as a source. That’s why we do an Ajax Refresh to the table.
All you have to do now? Add your table/list records to the screen and set the Source Record List to be our local MovieList.
Style guide
The dropdown has an input parameter named “ExtendedClass”. This will set a class to the parent div, which will let you use it as a selector. For example:
.extended-class .dropdown-container{
background-color: #000;
}
Any questions? Post them on our component’s forge page.
Want to check this demo?
Try #OutSystems Free Edition for free and discover the benefits of using a market-leading technology 💡 ➡️ https://bit.ly/36sl8IF
