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
