Is it possible to change Web Part attributes via CSS or XSLT?

Question

I am working on a dynamic SharePoint design using DVWPs. I have a hidden DVWP which controls other webparts based on values in a list. I'm running into a slight snag, though.

I need to know if it's possible to change another webpart's properties, so that I can set a specific webpart to "hidden" based on a list value or conditional XSLT. The ID of the webpart will be static in case that helps.

I can conditionally apply CSS or a script, either one - I just need to know how (or IF) I can target another webpart on the page and set the Visibility attribute.

Thanks in advance for any assistance.

Answer 1

I don't think you can do that in xslt but you can do that on client side using ecma script:

<script type="text/javascript">
var siteUrl = 'Your site url';
var serverRelativeUrl = 'your page url';

function retrieveWebParts() {

    this.clientContext = new SP.ClientContext(siteUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);

    this.limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    this.collWebPart = limitedWebPartManager.get_webParts();

    clientContext.load(collWebPart);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.deleteWebPart), Function.createDelegate(this, this.onQueryFailed));
}

function deleteWebPart () {

    if (!collWebPart.get_count()) {
        alert('No Web Parts to delete.');
    }

    var webPartDefinition = limitedWebPartManager.get_webParts().get_item(4);

    var webpart = webPartDefinition.get_webPart();
    webpart.set_hidden(true);
    webPartDefinition.saveWebPartChanges();


    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Web Part deleted.');
}
function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}</script>

Answer 2

If they are connected web parts, you should be able to do something in the XSL to set the wrapper of the visible web part to display none given some condition. Like if the resulting row count is zero give the wrapper a hidden class or use a different template.

Without more context, this answer is a little vague.

Answer 3

Set up your page so the web parts are contained in DIVs with their own IDs. That way you can use script to hide the DIV along with the contained web part if needed. You can do the same using the ID of the web part but these tend to be fairly complex values and will also change if you add other web parts.

Answer 4

Sorry - I realize this question probably could have used a little more detail. The webpart IDs shouldn't change from site to site (all based on a template that doesn't change), so what I ended up doing is putting a hidden DVWP on the page that used conditional XSL:IF statements to apply the appropriate CSS according to which option was selected on the SharePoint list. This was a slightly round-about way of doing it, but the user experience works as desired. Once a user chooses to check/uncheck the "Hide X menu" in the modal popup we have for site options (not sharepoint site options, but the custom SP list we set up), the page refreshes and the XLST applies the CSS based on which value is there.