Filter a list webpart

filter-a-list-webpart.markdown

Filter a list webpart

A Pen by Adam on CodePen.

License.

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>

<div id="filterForCorpService">
    <div class="filterDropdown">
        <h3>Theme:</h3>
        <select filterData="0%2Ca510c186%2D81f6%2D4a25%2Daba9%2D95f024beb35d" id="ThemeDD">
            <option value="">Please select</option>
            <option value="2">Help</option>
            <option value="11">None</option>
            <option value="9">People</option>
            <option value="12">Quality</option>
            <option value="13">Travel</option>
        </select>
    </div>

    <div class="filterDropdown">
        <h3>Language:</h3>
        <select filterType="" id="LanguageDD">
            <option value="">Please select</option>
            <option value="4">English</option>
            <option value="0">Spanish</option>
        </select>
    </div>

    <div class="filterDropdown">
        <h3>Location:</h3>
        <select id="LocationDD">
            <option value="">Please select</option>
            <option value="6">Spain</option>
            <option value="3">UK</option>
            <option value="1">USA</option>
        </select>
    </div>

    <div class="filterDropdown">
        <h3>Type:</h3>
        <select id="TypeDD">
            <option value="">Please select</option>
            <option value="7">Form</option>
            <option value="5">Help</option>
            <option value="14">None</option>
            <option value="10">Picture</option>
            <option value="1">Policy</option>
            <option value="video">Video</option>
        </select>
    </div>

    <div class="filterDropdown">
        <h3>Department:</h3>
        <select id="DepartmentDD">
            <option value="">Please select</option>
            <option value="18">Continuous Improvement</option>
            <option value="8">Customer service</option>
            <option value="19">Facilities</option>
            <option value="20">Finance</option>
            <option value="21">Health ＆ Safety</option>
            <option value="22">Human Resources</option>
            <option value="23">IT</option>
            <option value="24">Learning ＆ Development</option>
            <option value="25">MMG</option>
            <option value="26">Operations</option>
        </select>
    </div>

    <div id="applySinclairFilters">Apply filter(s)</div>


</div>

script.js

    $(function () {

        var pageUrl = '/hub/corporateServicesLibrary/Pages/default.aspx';
        var hash = '#InplviewHash7117f27d-7e53-4f3f-8839-861689d9ef0b=';

        $('#applySinclairFilters').on('click', () => {

            var filterDropdownsIds = ['Theme', 'Language', 'Location', 'Type', 'Department'];
            let fullQuery = window.location.origin + pageUrl + hash;
            let numberOfQueries = 1;

            console.log(filterDropdownsIds);

            (filterDropdownsIds).forEach((dropdown, index) => {
                console.log(dropdown);
                let selectedOption = $(`#${dropdown}DD`).val();

                console.log(selectedOption);

                if (selectedOption !== '') {
                    let query = `FilterField${numberOfQueries}=${dropdown}-FilterValue${numberOfQueries}=${selectedOption}-FilterOp${numberOfQueries}=In-FilterLookupId${numberOfQueries}=1-FilterData${numberOfQueries}`;
                    fullQuery += query;
                    console.log(query);
                    numberOfQueries++;
                }
            })

            console.log(fullQuery);
        })
    })

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.13/es5-shim.min.js"></script>

style.scss

#filterForCorpService {

    display: flex;
  
  div {
    margin-right: 10px;
  }
}