SharePoint: Extending the DVWP – Part 32: Filling in Default Data on the insert Template with Multiple DVWPs

Author: Jim Bob Howard

Last time, we talked about setting a control to a default value using jQuery. In the example, we were setting the value of a dropdown list on which we had implemented Marc Anderson’s SPCascadeDropdowns. It’s a pretty straightforward process with a couple of caveats depending on which browser your users are using and/or how many items are in your dropdown list.

However, we enlisted Christophe Humbert’s Easy Tabs on this project, too. We did that so we could have a couple of groupings of data on one page, but organized by tabs. They’re basically the same DVWP, just with a different filter. Which means that all of the form fields are laid out the same way regardless of which tab you’re on.

So, if we implemented the script from the last article, every insert template on the page (IOW, there are as many insert templates as there are DVWPs) will get the same defaults. But that doesn’t make sense for most implementations of multiple DVWP.

How do we tell them apart?

ID-entifying the Solution

One of the easiest selectors to use in jQuery is the ID Selector ("#id"). To limit the scope of our default settings, we only have to give each form its own ID and then use that in our set call.

1. In the SharePoint Designer (SPD) Design pane, click on the left-most column in the header row

Clicking on the Employee header highlights the call to dvt.headerfield, which is at the top of the table that draws all of our forms
2. Just above the highlighted area, the arrow points to the table tag that wraps the entire display area including the edit, remove, and insert templates. This is where we’ll add our ID.

        <table border="0" width="100%" cellpadding="2" cellspacing="0" id="FTE"></table>

When we get this webpart just the way we want it, we’re going to save it and reuse it for every page we create for the various managers who only need to see their own data. It’s best to give this table a descriptive but reusable ID. If we need to put two very similar DVWPs on the same page, we can give a more descriptive and distinct ID to each when we come to that type of page.

3. Repeat the process for the rest of the DVWPs on your page, giving each a unique ID.

For tabset above, I used these ID values: ACB_FTE, ARC_FTE, ADC_FTE, PRN, and Other. The first three are an example of importing the same saved DVWP three times, once for each Location in this grouping. For each of those three, I set the filter to that specific location and edited its ID to indicate which Location I was working with.

Now, let’s go back to the jQuery we’re using to set defaults.

    $(document).ready(function() {
        $("select[title=Location]").val("ACB");
        $("input[title=Location]").val("ACB").next("img").trigger("click");
        $().SPServices.SPCascadeDropdowns({
            relationshipWebURL: "/operations",
            relationshipList: "LocGroup",
            relationshipListParentColumn: "LocDept",
            relationshipListChildColumn: "Group12",
            relationshipListSortColumn: "Group12",
            parentColumn: "Location",
            childColumn: "Group"
        });
        .
        .
        .
    });
</script>

To make .val() settings DVWP-specific, we’ll just add the ID at the beginning of the jQuery selector:

        $("#FTE select[title=Location]").val("ACB");
        $("#FTE input[title=Location]").val("ACB").next("img").trigger("click");

In my case, I’ll also need to make copies of these two lines for each additional DVWP on the page:

        $("#ACB_FTE select[title=Location]").val("ACB");
        $("#ACB_FTE input[title=Location]").val("ACB").next("img").trigger("click");
        $("#ARC_FTE select[title=Location]").val("ARC");
        $("#ARC_FTE input[title=Location]").val("ARC").next("img").trigger("click");
        $("#ADC_FTE select[title=Location]").val("ADC");
        $("#ADC_FTE input[title=Location]").val("ADC").next("img").trigger("click");
        $("#PRN select[title=Location]").val("PRN");
        $("#PRN input[title=Location]").val("PRN").next("img").trigger("click");

A note about the way jQuery works: The above script does not say "find a specific variable and set its value". That would result in an error if the variable wasn’t defined. Instead, it says "for every match you find on this selector, set its value". If it doesn’t find anything, no harm, no foul; it just moves on to the next statement.

Likewise, the following call to SPServices.SPCascadeDropdowns() does its work on every dropdown it finds with the name Location, so it will work for all DVWPs on any given page. Since they’re all using the controls with the same name, we only have to include the cascade call once inside the .ready() function.

One caveat to that, though: It is  possible to have the insert template (or the edit template, for that matter) open on several tabs at once. You’ll only see one at a time, but they’ll all be open. The cascade will not work with more than one set of the dropdowns open. Ninety-nine times out of a hundred, the user won’t open an insert or edit template without clicking Save or Cancel, before clicking on another tab. But for that one time they do, I wanted you to know what the issue was.

Default the Second Tier of a Cascading Dropdown

You probably noticed two things in the screenshots above:

1. I didn’t show you the Other tab, and
2. The PRN tab had the second tier dropdown set already

In the first place, I don’t default the top tier for the Other tab because I’m not sure what it will be. I do, however, default the second tier for it.

In the second place, for PRN, I know which of the three Locations actually has PRN employees, so I default the second tier as well as the first.

So, how do you set the second tier?

Not too surprisingly, same as the first tier.

        $("#PRN select[title=Group]").val("ACB");
        $("#PRN input[title=Group]").val("ACB").next("img").trigger("click");
        $("#Other select[title=Group]").val("ACB");
        $("#Other input[title=Group]").val("ACB").next("img").trigger("click");

In the case of the Other tab, I’m setting the Group but not the Location. When the user picks the appropriate "other" Location, the Group will not change. On the other hand, if the user picks a "non-other" {grin} Location, the Group will be blanked out.

If you were counting line numbers, you’ll notice that I set the second tier after the first call to SPCascadeDropdowns. But, the Other tab begs the question:

"Is that necessary for the second tier if I’m setting both?"
No. You can set both before the SPCascadeDropdowns call.

"What if I’m only setting the second tier?"
It still doesn’t matter. SPCascadeDropdowns binds the cascade function to the onChange() event of the dropdown, the actual cascade doesn’t happen when the page loads; only after the parent dropdown has been changed.

Smell That Yummy Dessert

We’re closing in on the finish line in the Extending the DVWP series. See you next time, when we’ll clean up the totals and subtotals.

Author: Jim Bob Howard

Jim Bob Howard is a web designer / webmaster in the healthcare industry. He has been working with SharePoint since March 2009 and enjoys sharing what he has learned. He is a moderator and frequent contributor to Stump the Panel, and answers SharePoint questions on Twitter (@jbhoward) and via email ([email protected]).