This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. CKG Edit ====== Button - Implementing responsive filter button ====== === Description === When we have filled some information in filter table than button with label “Filter” in top right corner changes its color to light blue instead of gray. It will help us recognize if the table below have all data we need and no filter is set. === How to do it === If filter is set search parameters won’t be blank. So we find out size of searchParameters. <code java>_isFilterEmpty() { const { searchParameters, forceSearchParameters } = this.props; if (!searchParameters) { // search paramters are empty return false; } if (!forceSearchParameters || forceSearchParameters.getFilters().size === 0) { return searchParameters.getFilters().size === 0; } return searchParameters.getFilters().reduce((result, filter, key) => { return result && forceSearchParameters.getFilters().has(key); }, true); }</code> then we depend level of the button on this boolean function. <code JavaScript><Basic.Button className="btn-xs" level={level} onClick={this._filterOpen.bind(this, !filterOpened)} showLoading={showLoading} icon="filter" {...others}> { this.i18n('button.filter.toogle') } {' '} <Basic.Icon icon={!filterOpened ? 'triangle-bottom' : 'triangle-top'} style={{ fontSize: '0.85em'}}/> </Basic.Button></code> And then it will automatically appear with every usage of FilterToggleButton. === Examples === You can find example in our git repository: https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-core/src/components/advanced/Filter/FilterToogleButton.js === See also === * [[tutorial:adm:server_preparation]] * [[tutorial:adm:czechidm_installation]] * [[tutorial:adm:basic_operations] by poulm Log In