0

Team,

Scenario:

I have two web parts that are connected with a connection filter. When I select an item in list A, related items in list B are filtered. Hooray!

But list A is really long, so when an item is selected in list A, I would like to hide all the unselected list A items.

I currently have a HTML Form Web Part which I use to filter out different types of list A items. Which allows me to select from a drop down list, apply a filter, and a button to clear the filter (reload the window).

<div class="column_left" style="align:center">
 <div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <select name="Team">
        <option value=""> Select Team </option>
        <option value="Change Management"> Change Management </option>
        <option value="Client Delivery"> Client Delivery </option>
        <option value="Incident Management"> Incident Management </option>
        <option value="Network Management Center"> Network Management Center </option>
        <option value="OBTAC Cloud&DC"> OBTAC Cloud&DC </option>
        <option value="OBTAC UC&CC"> OBTAC UC&CC </option>
        <option value="OBTAC Network&Security"> OBTAC Network&Security </option>
        <option value="Problem Management"> Problem Management </option>
        <option value="Professional Services"> Professional Services </option>
        <option value="Service Desk"> Service Desk </option>
        <option value="Singtel/NCS"> Singtel/NCS </option>
    </select>
    </br>
    <input type="button" value="Apply Filter" onclick="javascript:_SFSUBMIT_"/>
 <input onclick="window.location.href=window.location.href" type="button" value="Clear Filter"/>  
 </div> 
</div>

I understand that "row.style.display = 'none';" can be used to hide rows. I have a piece of code that loops through a list and checks the date and hides list items that do not match specific date criteria.

I think I could do something similar, but in order for it to work I need to know how I can check which list item has been selected in a web part connection filter. Any idea what to check for?

So what I would do is add another button to my HTML FORM web part called "Filter Unselected". When clicked it would loop through list A list items and hide each row that is not selected. In theory this should leave the one item that was selected using the connection filter action.

UPDATE #1:

This page has code that appeared to help. It detects the right list item ID (elemID), I couldn't get the contents of "selectedImg$" or "linkText" to display (I have poor Javascript skills), but I think I can filter ok with the ID anyway.

<script type="text/javascript">

function ShowSelectedItems() {

var selectedImg$ = $('img[alt^="Selected"]');
var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];
var linkText = selectedImg$.closest('tr').find('div#'+elemID).find('a').text();

alert("selectedimg: " + selectedImg$ +"\nelemID: " + elemID + "\nlinkText: " + linkText );

}
</script>

<input type="button" value="Show Selected Items" name="btnShowSelectedItems" id="btnShowSelectedItems" onclick="ShowSelectedItems();" /> 

UPDATE #2:

As mentioned in the comments below. I think my solution is to use a HTML Form web part that passes the selection ID parameter through a web part connection. Again, not being proficient at JavaScript, I'm unsure how to pass the value without manually inputting it i.e. pass automatically when button is clicked.

This is what I have so far...but its not working.

<script type="text/javascript">

var selectedImg$ = $('img[alt^="Selected"]');
var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];

</script>

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="hidden" name="itemSelected" value=elemID/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

And once I've got the filter working, I want to make the button toggle between filtering and clearing using code found here.

UPDATE #3:

Progress... If I put the following code into a HTML form, and connect "itemSelected" to the ID column in list A, then select item ID #7, then click the "GO" button in the HTML form. List A filters item #7 perfectly.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <input type="hidden" name="itemSelected" value="7"/>
    <input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

The only thing I'm struggling with now is how to pass the value stored in "elemID" below into the value of my HTML Form?

var selectedImg$ = $('img[alt^="Selected"]');
var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];

UPDATE #4:

Success! I discovered how to move the "SFSUBMIT" to the function properly and pass the elemID to the input. Last step is to convert the button into a toggle button so it alternates between being a filter and clearing the filter. I'll be using the code I found here.

<script type="text/javascript">
    function filterSelected() {
        var selectedImg$ = $('img[alt^="Selected"]');
        var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];
        document.getElementById("filterButton").value = elemID;
    _SFSUBMIT_;
    }
</script>

<input type="hidden" name="itemSelected" value="" id="filterButton"/>
<input type="button" value="Go" onclick="filterSelected();"/>

regards Michael

4
  • The code given in update section solved your problem or not? What exactly your looking for now? Sep 12, 2018 at 15:58
  • Sort of, I think I may have a solution - but I don't know how to code it yet... (step 1) create a HTML Form Web Part (step 2) use something like the code shown here -> developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button to create a button that toggles between two different states (step 3) make state #1 do a SFSUBMIT but instead of selecting from a drop down box, pass the ID value of the selected list item, state #2 is a "clear filter" button to reload the page (step 4) add a connection. Currently stuck at how to pass the ID value to SDSUBMIT without using a dropdown list?
    – Michael
    Sep 12, 2018 at 16:31
  • Have you tried this using OOTB SharePoint List filter web part?? Sep 13, 2018 at 1:52
  • Unfortunately, my company, for whatever reason, doesn't have filter web parts as an available option.
    – Michael
    Sep 13, 2018 at 9:50

1 Answer 1

0

Team,

I couldn't get the toggle feature working, time/effort/reward ratio wasn't there for me, but I did get the filter working and in the end I have two buttons filter on, filter off. Below is the final result.

<script type="text/javascript">

function filterSelected() {
    var selectedImg$ = $('img[alt^="Selected"]');
    var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];
    document.getElementById("filterButton").value = elemID;
    _SFSUBMIT_;
    }
</script>

<div align="center">
    <input type="hidden" name="itemSelected" value="" id="filterButton" />
    <input type="button" value="Filter Selected" onclick="filterSelected();" style="font-weight: bold; width: 45%; height: 30px; background-color: #e6e6e6; border-radius: 5px;" />
    <input onclick="window.location.href=window.location.href" type="button" value="Clear Selected" style="font-weight: bold; width: 45%; height: 30px; background-color: #e6e6e6; border-radius: 5px;"/>
</div>

regards Michael

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.