SharePoint: Extended DVWP-Part 2: Enter the default value on the Insert Template Using jQuery

Document directory

• Simplified User Experience
• Houston, we're in trouble.

We have built a solution for organizations to track employees. We have rearranged the layout of DVWP, re-compiled the form operation link program, and even passed some workflow variable parameters to it, added the cascading drop-down list box, and created a backup editing template, this allows us to include edit and delete operation records in the audit list.

Since several recent articles, we have entered the climax of extending the DVWP series. We now have multiple pages (each corresponding to a location/manager ). Each page can contain multiple DVWP, probably because a manager wants to manage multiple locations and/or because we need to track and calculate "other" types of employees.

Simplified User Experience

We have created a separate page for each location. Now the manager who visits each page wants to add a new employee is his own location by default, which is reasonable. Therefore, we need to set the default Location value based on the current page.

Of course, we will use jQuery:

1. On the page where DVWP is located, enter the editing mode in any of the following ways:
I. Click website operations> Edit page, or
Ii. Add? PageView = Shared & ToolPaneView = 2

2. if you have followed the steps in the article and implemented the cascade drop-down list box, open the existing content editor Web component (CEWP) and let us consider how to set some default values.

(Note: If you have not added the cascade drop-down list box, skip step 1 and ignore the drop-down box, but pay attention to the Code in line 2-3 .)

The following figure shows my scenario:

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="/js/jquery.SPServices-0.5.6.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">    $(document).ready(function() {        $().SPServices.SPCascadeDropdowns({            relationshipWebURL: "/subsite",            relationshipList: "LocGroup",            relationshipListParentColumn: "Location",            relationshipListChildColumn: "Group",            relationshipListSortColumn: "Group",            parentColumn: "Location",            childColumn: "Group"        });        $().SPServices.SPCascadeDropdowns({            relationshipWebURL: "/subsite",            relationshipList: "GroupPos",            relationshipListParentColumn: "Group",            relationshipListChildColumn: "Position",            relationshipListSortColumn: "Position",            parentColumn: "Group",            childColumn: "Position"        });    });</script>

3. The first SPCascadeDropdowns call is based on the Location cascading Group. Let's set the Location first so that the Group drop-down box can be set based on the preset Location:

    $(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>

It seems that we have set it twice, but in fact we have processed two different rendering controls: one is in Internet Explorer (IE), the other is in Firefox (FF). (Note: I have not tested it in Safari or Chrome, but I expect these two methods to basically cover all scenarios .)

I. Setting the default value in FF is simple: FindSelectAnd set. val. Firefox automatically performs subsequent processing.

$("select[title=Location]").val("ACB");

Ii. In IE, it works in a different way. If the number of drop-down items is greater than 20, IE rendering will become: An input control and some other controls, connected by programming.

In IE browser, it will become an input control. We must click the drop-down arrow to make it really set in the form, especially when it is called in the cascading drop-down list box.

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

In this case, after setting. val (), we locate the following sibling tag, which isImgControl (. next ("img") and trigger itsClickEvent.

4. For the main Location tab, we need to do all the work for implementing the default value. To ensure smooth operations, when rendering the drop-down box as input in IE, note the following points:

        $("input[title=Employee]").focus();    });</script>

 

In this way, the focus is set back to the Employee text box to avoid leaving the drop-down box option expanded in code mode on the page.

Houston, we're in trouble.

The above script runs well when there is only one DVWP on the page, because there is only one control named Location on the page. However, we always promise that more than one DVWP can be placed on the page.

If we run this script with multiple DVWP values, it sets "Location" to ACB for each INSERT template generated on the page. In the case of informal employees, we actually want Location to be set to the corresponding employee type, and its Group to the corresponding primary site.

(For example, a person may work in different places as needed and can be considered as a part-time employee. He may work in different places every day. One location (ACB) can be considered as its main site. In this case, we need to set its Location to PRN, so that we can calculate the total number of PRN people and distinguish it from the formal employees (FTE) in the same region. At the same time, we use Group to identify its main site as ACB .)

However, the above script cannot meet the requirements.

 

Next time: When we continue to expand DVWP, we will find a way to identify which DVWP is to be operated so that we can set the corresponding default value.

 

References

SharePoint: Extending the DVWP-Part 31: Filling in Default Data on the insert Template with jQuery