0

Currently, a selected item in a connected LVWP is only indicated by a filled, black diagonal arrow icon. I would like to add background color formatting for the selected item row. Note: I am not referring to checkbox-selected items.

I have been successful using Eric Fang's solution on a site page containing only the LVWP and connected InfoPath Form Web Part. His javascript, added to a CEWP on the site page, is as follows:

<script src="/_layouts/1033/unitingcare/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("IMG[alt='Selected']");
$Text.parent().parent().css("background-color", "lightgreen");
});
</script>

However, to complicate matters, I am trying to apply this on a page based on a master page that comes from Softlanding's Tabbed Webpart Zone.

The issue is, when the CEWP javascript is added to the Tabbed Web Part Zone page, the tabbed zone on the page disappears and the page is broken (edit page ribbon button non-working, etc.). I have searched high and low for other methods of changing the selected item row background but have come up empty handed. My best guess is there is interference between the Tabbed javascript and the CEWP javascript that I am too inexperienced to recognize.

The Tabbed Web Part Zone javascript is below:

<PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
    <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>"
        After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
</PublishingWebControls:EditModePanel>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<SharePoint:CssRegistration Name="http://mysite/_catalogs/masterpage/jquery-ui.css" After="Themable/corev15.css" runat="server" />

<SharePoint:ScriptBlock runat="server">
    //for reference, http://kyleschaeffer.com/sharepoint/wp-tabify/
    //              http://jqueryui.com/tabs/
    //  > for this script to work properly, the proper css classes and styles should be included.

    (function (jQuery) {
        jQuery.fn.wpTabify = function () {

            // if we're not in edit mode
            if (jQuery('.ms-WPAddButton').size() == 0) {

                // for each 
                this.each(function (i) {

                    // create variables needed for assembling tabs within this web part zone
                    var idName = jQuery(this).attr('id');
                    var tabList = jQuery('<ul class="wpt-ui-tabs-nav"/>');
                    var panels = jQuery('<div class="wpt-ui-tabs-wrapper"/>');

                    // for each web part in the web part zone, assemble the tab headers and tab content in the format JQuery UI tabs() method expects.
                    jQuery(this).find('div.ms-webpartzone-cell > div:first-child').each(function (j) {
                        jQuery(tabList).append('<li><a href="#ui-tab-panel' + idName + i + j + '"><span>' + jQuery(this).find('h2.ms-webpart-titleText').text() + '</span></a></li>');
                        var thisPanel = jQuery('<div id="ui-tab-panel' + idName + i + j + '" class="wpt-ui-tabs-panel"/>');
                        var panelContents = jQuery(this).detach();
                        jQuery(thisPanel).append(jQuery(panelContents).find('.ms-wpContentDivSpace'));
                        jQuery(panels).append(thisPanel);
                    });

                    // if we created any tabs, then push the new tabs structure back into the DOM, then call the jquery ui method .tabs()
                    if (jQuery(tabList).find('li').size() > 0) {
                        jQuery(this).prepend(panels);
                        jQuery(this).prepend(tabList);
                        jQuery(this).tabs();
                    }

                    // remove original webpart zone now that we've tabified what we wanted out of it
                    jQuery(this).find('div.ms-webpart-zone').remove();
                });
            }
        };
    })(jQuery);

    function TabifyFnWrapper() {
        // tabify the appropriate web part zone for this page layout
        jQuery('#TabbedWebPartZoneWrapper').wpTabify();

        //regardless of the tabify result, display the web part zone
        jQuery('#TabbedWebPartZoneWrapper').css('display', 'inline-block');
    }

    // add to sharepoint javascript function queue to be called after page load
    _spBodyOnLoadFunctionNames.push('TabifyFnWrapper');

</SharePoint:ScriptBlock>

Any help is appreciated, thanks.

4
  • Why you need a content editor webpart? Can't you edit the page in SharePoint Designer and add the <script>? – Amal Hashim Jan 19 '15 at 19:20
  • Only that it was the implementation suggested in Eric Fang's solution. I tried editing the master page to add in the javascript and was met with the same behavior. However, I realize that this could be because of improper syntax. Would you be willing to post Eric Fang's code in the correct syntax and the location to add it in the Tabbed master page code? Thank you for your response. – 3rswing Jan 19 '15 at 19:37
  • Amal, it appears I was overthinking what was necessary to insert the highlighting code block into the master page code. As per your suggestion I simply pasted the code in a likely spot and it worked perfectly, thank you. How can I assign you credit? – 3rswing Jan 21 '15 at 3:24
  • I have added it as an answer. – Amal Hashim Jan 21 '15 at 3:30
0

Instead of adding content editor web part you can open the page and add the script directly inside it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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