SharePoint Designer + XSLT Quick Build Data presentation page

Prepare to display data

　　Prepare a test list to add some test data

　　

Generating Master Pages

1. Use Designer to open the Web site where you want to create a page

2. Click "All Files" on the left, drag the static page that needs to be the master page into the designer (the relevant CSS and JS files are also dragged in, of course, you can also build a folder exists, not in the root directory)

　　　　

3. Open this static page in advanced mode and save as master page

　　　　

4. Edit the master page in Advanced mode, replace the area that needs to be dynamically displayed with placeholders (multiple placeholder IDs do not repeat), and save after replacing.

　　

Using a master page to create a presentation page

　　1. Build the display page based on the motherboard page

　　

2. Open the presentation page in advanced mode, use the Content tab to implement what the placeholder needs to show, and the value of ContentPlaceHolderID must match the placeholder ID corresponding to the parent Board page.

　　

3. Place the cursor in the placeholder, click menu Bar-Insert-Data View-empty Data View, click to save the page

　　

4. Place the cursor in the DataSource tab and click the menu bar-insert-data source to select the list that you prepared in the first step. Save the page after clicking

　　

5. After inserting the data source, the Data source pane appears (if not, click View-task pane-data Source details on the menu bar), select the field you want to use, then select Insert as Multiple view, then save the page.

　　

6. Operation to this step, if there are special requirements for the data, you can set in the menu bar-options inside, according to the parameter display sentence Ah, pagination ah, etc., can be set here.

　　

7. Remove the excess code.

(1) First find Manualrefresh, delete the following code

(2) Go down to the label of the template for Name= "dvt_1" and delete the following code

　　

(3) To find the label of Name= "Dvt_1.rowview", delete the following code

　　　

(4) To find the label of Name= "Dvt_1.empty", delete the following code

　　

8. Apply a style. In fact, the operation to this step, it should be clear that the generated template using the table layout, if your template is also in table layout can be used automatically generated code. But now a lot of the use of Div layout, but also involves the invocation of jquery, so the introduction of the following style, template application is mainly focused on dvt_1.body and Dvt_1.rowview two tags.

(1) Dvt_1.body is the place to realize the data display, For-each loop output each data. For example, to output <ul><li></li><ul> this data, we will apply the outer ul to Dvt_1.body, Li tags applied to dvt_1.rowview inside.

Effects after applying a template:

Dvt_1.rowview templates

After applying:

　　

As for other conditional judgments, the specified output can be implemented with reference to XSLT tags according to actual requirements.

　　

9. The final step, after the template is finished, you can preview the effect, preview before you need to delete the template automatically generated two tags, these two tags will be inserted in the view of the time generated, if the preview error, it may be that the two tags are not deleted.

10. The last of the following:

　　

This is hereby recorded to make a memo.

Please do not reprint, thank you!

SharePoint Designer + XSLT Quick Build Data presentation page