Answered

Clear filter with button on power pages.

(0) Share

Report

Posted on by Feder

Hello everybody.

I'm using power pages and I have added the filter for lists. But it only contains the "Search" button to show us the results of the filter. Is there somewhere "clear filters", "remove filters" button? or I'll have to do it via js? If so, any recommendations on how to start implementing js in Power Pages.

Thank you.

Categories:

General topics

I have the same question (0)

All responses (7)

Answers (1)

Sort by

Verified answer

H V 1,510 on at

Like
a
(2)

Report
Copy link

Link copied!
Hi @alandres2628

Go to your list and click on CODE button which is mentioned in a screenshot.

Please add below code within <style></style> tag.

Here, in my example, there are two filter:

Subject as a textbox filter

Status as Dropdown filter

Now, you have to find out ids(using inspect element) of all the filter components(textbox, dropdown) and add that ids in clearFilter() function. you can see the first two lines which are for textbox id and dropdown id.

$(document).ready(function(){ var clearButtonHTML = "<button class='btn btn-default btn-entitylist-filter-clear' onclick='clearFilter()'>Clear</button>"; $(".btn-entitylist-filter-submit").after(clearButtonHTML); }); function clearFilter() { $("#0").val(""); $("#dropdown_1").val(""); $(".btn-entitylist-filter-submit").trigger("click"); }

Result:

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

Was this reply helpful? Yes No
Feder 42 on at

Like
a
(0)

Report
Copy link

Link copied!
Hello @hardikv

Thank you for your help. I had achieved something similar, but with your answer the new button is propagated to the other filtered lists.

document.addEventListener('DOMContentLoaded', function() { var button = document.createElement('input'); button.type = 'button'; button.id = 'submit'; button.value = 'Borrar Filtro'; button.className = 'button2 btn btn-default'; button.onclick = function() { document.getElementById("0").value = ""; document.getElementById("dropdown_1").selectedIndex = 0; $('input[type=checkbox]').prop('checked', false); }; var container = document.getElementById('EntityListab44545454545'); container.appendChild(button); }, false);

Also, when I hit the clean button, I couldn't get the records to come back. With the 'tigger' that you show if I get it.
Thank you so much.

Best Regards.

Was this reply helpful? Yes No
H V 1,510 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @alandres2628

So, you have multiple entitylist on same page?

Was this reply helpful? Yes No
Feder 42 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @hardikv

Yes, I'm using tab and custom css on the same page. In each one you call the view with liquid template.

If you need it, tell me and I'll public here.

Regards.

Was this reply helpful? Yes No
H V 1,510 on at

Like
a
(1)

Report
Copy link

Link copied!

Hi @alandres2628

Yes, please share your code.

Was this reply helpful? Yes No
Feder 42 on at

Like
a
(0)

Report
Copy link

Link copied!
Hello @hardikv

 <div class="tabs"><input type="radio" name="tabs-example" id="tab1" checked="" class="tabs__radio"><label for="tab1" class="tabs__label">Invoice</label> <div class="tabs__content">{% include 'entity_list' key: 'Invoice active' %}</div><input type="radio" name="tabs-example" id="tab2" class="tabs__radio"><label for="tab2" class="tabs__label">Customers</label> <div class="tabs__content">{% include 'entity_list' key: 'Customer active' %}</div><input type="radio" name="tabs-example" id="tab3" class="tabs__radio"><label for="tab3" class="tabs__label">Products</label> <div class="tabs__content">{% include 'entity_list' key: 'Products active' %}</div> </div> 

When we create a list, at the bottom of that page we can see a piece of code that contains this:
{% include 'entity_list' key: 'Your list active' %}
You can add this code inside of new html. And my CSS custom:

/*Tabs*/ .tabs { display: flex; flex-wrap: wrap; max-width: 100%; } .tabs__label { padding: 10px 16px; cursor: pointer; } .tabs__radio { display: none; } .tabs__content { order: 1; width: 100%; line-height: 1.5; font-size: 0.9em; display: none; padding: 2.5rem 0; } .tabs__radio:checked+.tabs__label { font-weight: bold; color: #E57200; border-bottom: 2px solid #E57200; } .tabs__radio:checked+.tabs__label+.tabs__content { display: initial; }

Note that by default power pages puts each list in a div. What I have done is hide those 2 div, display none.

I hope this help you.
Best Regards.

Was this reply helpful? Yes No
KM-14051302-0 41 on at

Like
a
(0)

Report
Copy link

Link copied!

Thanks for the tips! I've got this working and it does a great job of clearing the filters. 😉

One question, is there a way to use seperate / create a larger space between the Search and Clear buttons? Right now they are too close. I suspect some CSS changes are required to be made.

EDIT: not sure if this is the recommended approach, but I added margin-left: 12px; to within .btn-default
It has done the job for now 😀

Was this reply helpful? Yes No