SharePoint: Extended DVWP-Part 2: concatenate all content

Document directory

• Complete Guide
• Add DVWP
• Format DVWP
• Expand DVWP
• Reuse our WebPart
• Goal!
• Complimentary part

The title "real" is: how do I create a SharePoint list to replace an Excel spreadsheet that was originally circled by 15 managers every month, create a Web parts page for each manager to display a filtered and editable table about employee information, which is easy to read and modify. The Tab page, website bar, cascade drop-down box, DVWP, EasyTabs, form operation workflow, PreSaveAction (), SPServices/jQuery, XSL, and CSS are used.

Finally, we expanded part 1 of the DVWP series. In the past 18 weeks, we have analyzed the tool itself, the technology, and made various attempts to fix the errors. In fact, we are targeting the same solution, the ultimate goal is to solve the following simple problem:

Problem:"I have an Excel document that needs to be re-created every month and sent to 15 managers. Each manager is responsible for one of the 15 documents, but I want to send all the workbooks to each manager and want them to update the correct section. I should also be very careful that I can only fill in data in specific fields, and be careful not to cover the previously set formula.
Is there a way to improve all this through SharePoint ?"

Our solutions meet the following requirements:

• Avoid sending files by email
• Each manager can conveniently view and modify their own data.
• Provides a high-level manager with an attempt to view all employees in all regions
• The modification of the current data should be audited, and the history report should be supported.
• Make regular modifications as easy as possible
• Make unconventional changes as intuitive as possible
• Provides managers with a diverse view of employees, aggregated by employee category
• Provide subtotal and Aggregate functions

The final effect is similar to the following:

Complete Guide

The WebPart, which looks like an Excel spreadsheet, is a data view Web Part (DVWP). Through it, we can display all employees in a certain area on the page and edit them directly on the page. Therefore, we will start with DVWP and extend it to meet our needs.
All content about this project is included in its own sub-website. Therefore, the home page and Quick Start area are related to the Full-Time Employee (FTE) project. Therefore, the easiest way to create a page is to directly create a page with the same functions as the default homepage (which also includes Quick Start). You can directly create a page based on the existing page through SPD.

Right-click default. aspx and click New from Existing Page in the context menu.
 
We do not need the preceding webparts, but we can easily modify them based on this page:

The newly created web parts page is based on the default. aspx page of the site.
 
Suppose we will use the shared document library in the future, for example, to share some documents ...... It doesn't matter. Let's create another document library to store our newly created page. Here we will create a new document library named Locations.

• Under the Web Site tab, right-click the window to open the context menu.

In the window, right click New> SharePoint Content...
 
• Select the Document Library under Document Libraries and name the new Library

Select Document Library under Document Libraries and enter a name
 
• Under the tab where the document you created is located, click Save to Save it to the newly created library.

Save the new page to the new document library. Here I name it LocationsMaster.
 
Now, you have a page to start operations. In this example, we do not need the web parts area on the right. Instead of directly deleting the region, it is better to delete the outer TD of the space between the areas on the right side of the package.

Very simple, such as step 1-2-3... Oh, 4 more

1. In the split view, click the image WebPart in the design view. The HTML/XSL content of the entire webpart will be selected in the Code view, and the content will also be highlighted on the flag crumb navigation bar.ImageWebPart.
2. If we clickWebPartZone # RightThe HTML/XSL of the entire web part area will be selected, including the webpart, but not the outer part ID.
3. The tag is next to TD on the left side. Clicking this tag selects the entire TD.
4. At the same time, we also want to delete the previous TD, so press the Shift key and click the left side of the TD mark in row 244th above (your row number may be different) to select it.

This is again throughDeleteKey to delete all of these.

In the design view, we can see that there is still a large blank area on the right.

Delete the Web parts area on the right and leave a large blank area. We will fill it in.

 

To stretch the Left area to the right:

1. Click a webpart in the red area on the left, and then
2. Click the nearest td in the tab
3. Locate the top of the td tag in the Code view. Here you will
4. The width is set to 70%.
5. If it is changed to 100%, our loss will be recovered. At the same time...
6. We found that there is a td below, so
7. Delete it so that our DVWP can fill the entire area.

ForAnnouncementsAndCalendar, We do not need to delete the WebPart region, but only the webpart. Therefore, for each webpart:

1. Click the webpart in the design view,
2. Hover the mouse over the highlighted flag in the flag crumb navigation bar,
3. Click the down arrow to open the context menu, and then
4. SelectRemove Tag

Now we can add DVWP.

Add DVWP

Now we have a page that can be used as the shell of our DVWP. Create our DVWP now.

1. Click the link in the WebPart area to highlight it in SPD.

 

Operate based on the link instructions

 

In this way, the WebPart area can enter the status where the WebPart can be inserted to accept DVWP.

Click Insert-> SharePoint Controls-> Data View

 

 

SPD continues to prompt us to proceed to the next step.

  

Under the Data Source Library tab, click the drop-down box next to the list containing the Data you want. Then, click Show Data.
 
• SPD will switch to the Data Source Details tab, where we can select the fields to be included.

 

Note:SPD stores the selected fields in the left-to-right order of the selected fields on the data source details panel. Press Ctrl and then click to select multiple columns and determine the future display sequence.
• When we have the desired field, we can click Insert Selected Fields...

...... Select Multiple Item View.

 

 

Initial loading status of DVWP

Format DVWP

Now that DVWP is available on the page, you can start to customize it. First, you can modify it through the configuration interface, so that you can minimize the XSL modification.
A clear requirement for my project is to use multiple DVWP to manage data, instead of reading 10 items each time.

Format data view attributes: pagination

 

The link in the red box opens the data view attribute (Data View Properties) Dialog box (Paging) Tab.
 
You can also open Data View> Paging...

 

By default, the page size is set to 10. We will select Display all items.
 
In this window, I modify some other settings by the way.

Format data view attributes: Column Title sorting

It is a good experience to allow users to sort in pages.GeneralTab to enable this setting.

 

By default, no toolbar is set. Enable sorting and filtering on column headers ).

Format data view attributes: Edit

We allow users to insert, edit, and delete data on DVWP "(Editing) Tab.

All operation links are disabled by default. Select all three.

 

Several DVWP extensions started: Direct editing without paging, and column title Sorting/filtering.
 
It took me a while to load data in SPD, because I have 486 records. Of course, I don't want my users to load so much data at a time, so let's add some filtering and grouping conditions.

Format data view attributes: Filter

 

 

Filtering DVWP allows usLocationDivide the list data into several parts.
 
Pagination (Paging), You can also open the Filter condition dialog box through the menu: Data View-> Filter...

Format data view attributes: sorting and grouping

We want to sort and group existing data.

By default (Created) In ascending order. We change to pressGroupGroup and pressWorkerSort in ascending order.

Format data view attributes: Edit columns... (Edit Columns ...)

Now we willLocationFilter andGroupSo you do not need to display these two columns.

Highlight a column and click <Remove to Remove itLocationAndGroupColumn.

Format data view layout: WebPart title, column title, and display format

Before starting to scale out our solutions, there are some other minor fine-tuning work.

Title

Since we intend to use the same WebPart for multiple regions, we need to modify the title of the WebPart conveniently.

The default title of this WebPart is the name of the displayed list. We will change itOperationsTo reflect the filtering items we have set.

Column Title

Now that I have a part for loading data, the HR department decides to change the column Title to their own terminology: they want to see "Job Title" instead of "Position, "" Employee "instead of" Worker, "" Shift "instead of" Work Shift, "" valid tive "instead of" EffDate."
Each column title is contained in a template named "deep. headerfield" and a display name is transmitted.

Click the column title in the design view to highlight the corresponding template call in the Code view.

 

In this template, fieldtitle and displayname must be modified when you modify the line text of the title. (See row 245-6 ):

<xsl:call-template name="dvt.headerfield" ddwrt:atomic="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
    <xsl:with-param name="fieldname">@Positions</xsl:with-param>
    <xsl:with-param name="fieldtitle">Job Title</xsl:with-param>
    <xsl:with-param name="displayname">Job Title</xsl:with-param>
    <xsl:with-param name="sortable">1</xsl:with-param>
    <xsl:with-param name="fieldtype">x:string</xsl:with-param>
</xsl:call-template> 

After modifying the column title

 

Display format

Valid tive DateThe time section of is actually meaningless; it can be seen that it is always displayed at AM. Let's hide the data by modifying the data format.

By default, the date format displays the time. Deselect the Show Time check box to display only the date. You can also modify the date display format.

Expand DVWP

Now that we have completed formatting, we can start to expand DVWP.
The first thing to do is to rearrange the columns andEditAndDeletePlace the link on the right side of the page. You must perform operations on the default template, edit template, and insert template.

Next, we place all the form operation links in a row and convert several of them into buttons.

After modifying the appearance according to our needs, we will open these operation links, study their working principles, add a PreSaveAction (), attach a workflow, and re-arrange the execution sequence, and fix the errors.

Then, we will pass some workflow variables to the workflow, pass some information through the variables, add more information, and add more variables for jQuery and PreSaveAction (), for Form Verification or writing of audit records.

To make it easier for users to input or modify data, we have created some website columns and loaded the data, create a link list between the website columns (and fill in data in either of the two ways ). Then we can process these website columns and link lists into cascading drop-down boxes (two levels and three levels of linkage are achieved respectively ).

Sometimes, we fill in a large amount of data, so setting some default values will be very beneficial to us. For example, in our link list, the Title is basically redundant. It is only used to tell us what data is in the two columns with links. We can allow SharePoint to use jQuery to automatically enter the data. Or we can initiate a workflow to do this.

Now our data flow is very good. We can set an audit trail function to capture any modifications to this list.

Because our edit template (Edit template) And our default template (Default template. Therefore, we need to modify and edit the template to make the status more obvious through some simple graphical elements. At the same time, we can create an editing template for another version to capture the information when a list item is deleted. This remove template can be formatted separately to meet our needs. We can even modify the form operation workflow independently of the template.

To present a large amount of data to different users, we need to reuse the previously created WebPart, and use the Easy Tabs code of javase Humbert and the Content Editor (Content Editor Web Part, add the required number of DVWP to correspond to different blocks. You only need to modify the filtering and sorting conditions for each block.

Before saving the WebPart, we should make some modifications to the insert template to fill in the default value. However, we must note that we have multiple DVWP instances, so we need some special considerations to ensure that our default values are set to the correct tab page.

Finally, to make it look better, we formatted the appearance of the total and subtotal rows, and replaced some form operation links with icons.

Reuse our WebPart

It took us 18 weeks to get there. If you do not create a tab page, or redo each step after a new Location, it is obviously terrible. Fortunately, we don't have. We only need to export the modified WebPart and use it again.

We will operate in the browser.

1. Click website operations (Site Actions)-> Edit page (Edit Page).
2. Click Edit in the upper-right corner of the WebPart menu (Edit)-> Export (Export...)

 

Save it to a location that is easy to find.

Then, when we want to use it, we only need:

1. ClickAdd a Web PartButton
   
2. ClickAdvanced Web Part gallery and options
   
   
3. ClickBrowse...Button
   
4. Go to your WebPart and clickOpen
   
5. ClickUploadButton
   
6. Drag the WebPart to the page
   
7. Repeat this step for each tab on the page
8. In each tab, adjust filtering, sorting, and grouping for the tab.
9. Finally, clickExit Edit Mode

 

Goal!

Although we have reached the end of the extended DVWP series, we are only touching the tip of the iceberg of the entire function of the Data View WebPart. More DVWP functions need to be explored in future work.

I am honored to present this series of content and hope to hear your whimsy about the usage of DVWP.

Complimentary part

Recently, a friend from the Community asked me how to process the insert Form operation link in the blank list. My solution will be attached to the complimentary part of this series. Coming soon!

 

References

SharePoint: Extending the DVWP-Part 35: Putting it All Together