Use JavaScript to implement a timeline

In the past two days, I have been busy modifying the team site of my department. The boss raised an expectation that I would like to put a timeline on the team site homepage so that my department has any new events and schedules, can be displayed on timeline. This is not especially troublesome, but our team site is placed in the SharePoint system of the company hosting (the company provides the SharePoint hosting service, and each person/department can follow the free requirements, the hosting system of the company does not allow the owners of various websites to use any server code (server code. From the perspective of IT management, this is also very reasonable, but it does limit the ability of users of various websites to customize their respective websites. In other words, the tools I can use are only the Web parts built in SharePoint AND THE SharePoint designer. (In SharePoint 2010, a new feature is provided: sandboxed solution to solve this problem. administrators of various website sets can use Upload, the solution package with limited deployment functions and permissions is included in the website set, but it does not affect the security and stability of other website sets and the entire server farm .)

After some consideration, I confirmed that without server-side code, I could implement a timeline by using JavaScript and HTML capabilities. The following figure shows the final effect:

This timeline is divided into three columns: day, week, And month. You can use the mouse to slide each column to view events of the previous and subsequent dates. Events in timeline are from the data in the calendar category list of the website. In this way, website users only need to add new events to the list, and the events are automatically displayed in timeline:

The key to implementation is:
1. Use js to obtain the list item data from the website list;
2. Use JS and HTML to render timeline on the SharePoint page.

First, I used the "calendar" list template on the website to create a new list. Because on the timeline control, I only want to display events that occurred within 30 days before and after the current day, in order to make it easier to get the list items of events for 30 days before and after the current day, I created a new view in the list, in which only the event start time is 30 days before and after the day is displayed. Why can we create such a view so that we can use js to retrieve the desired data on the page? You will understand it later.

To enable this new view to filter queries, I have created two new computing type fields for the list, "30 daysbeforestarttime" and "30 daysafterstarttime ", the "30 daysbeforestarttime" definition method is displayed:

The definition of "30 daysafterstarttime" is similar, but the formula is changed to "= [start time] + 30 ".

Many people do not know how to use formulas in calculated fields. On this page, you can describe all the formulas and functions that can be used. Here are some examples of the most commonly used formulas.

With these two fields, we can set filtering conditions for the new view. Through the conditions in, we can filter events such as those before and after the day:

With this new view, we can ensure that the data we need to display in the timeline will certainly be included in this view. Next we enter the JS stage...

If you want to use JavaScript to retrieve data from a Sharepoint website, the more reliable method is to use JavaScript to call the SharePoint web services interface. SharePoint provides many Web Services interfaces that can be called on various platforms and languages, including JS running on pages. What we need is the Web Services interface that can get data from the list. This interface is located in lists Web Service. It provides a getlistitems () method to get the list item data. The second parameter of the getlistitems () method is "viewname", which allows us to specify a view of the list as a filter condition for data extraction. Of course, we can also use the parameters following the getlistitems () method to re-specify the filter conditions. However, it is much easier to use the list view to set the filter conditions, and it is much easier to modify them.

I will not repeat how to call Web Services in JS to find many articles on the Internet. But I would like to recommend a good JS library. Using this JS library can save the trouble of creating a soap package manually, and it is quite simple to use. It contains many. JS file. upload the JS file to a document library of the website (in fact, it is not necessary to copy all. JS files. For example, for my requirements, I only need to copy "spapi_core.js", "spapi_types.js", and "spapi_lists.js ). I put all these messy files in a library named "supportingfiles:

Then, use SharePoint designer to open the master page file of the website (default is "default. master "), add the above several. JS file reference (the picture shows that also added a reference to the "http://simile.mit.edu/timeline/api/timeline-api.js", this stuff will be discussed below ):

Using the JS library described above, the code shown below allows me to retrieve list items from a list:

Function getcalendarlistitems ()
{
VaR lists = new spapi_lists ("website url ");
VaR items = lists. getlistitems (
"Timeline", // display name of the list of data to be retrieved
"{14cb7b04-46aa-421c-b6b2-c5fbeeba9f5b}", // view guid. Enclose the braces on both sides.
"", // Query Condition
"", // The field to be returned
100, // The maximum number of rows of data to be returned
"", // Query options
Null // website guid. null indicates the website corresponding to the website URL in the above spapi_lists Constructor
);

If (items. Status = 200)
{
VaR rows = items. responsexml. getelementsbytagname ("Z: Row ");
Return rows; // if data is obtained successfully, put all data in an array and return
}
Else
{
Return NULL;
}
}

After obtaining the required calendar event data through JS, the next step is how to render a timeline on the page with HTML + Js. As a typical ELC (exist library caller), I first thought of checking whether someone has done something similar on the Internet. I found one on Google Code, hey, hey...

The tool set named simile widgets contains a timeline implemented by Js. After a mess in the document, the following JS Code can help me achieve the desired effect (the first line is not the JS Code, but a div element used in the JS Code, timeline is displayed through it ):

<Div id = "My-timeline" style = "height: 120px; Border: 1px solid # AAA; font-size: 9pt"> </div>

VaR resizetimerid = NULL;
Function onresize (){
If (resizetimerid = NULL ){
Resizetimerid = Window. setTimeout (function (){
Resizetimerid = NULL;
TL. layout ();
},500 );
}
}
Window. onresize = onresize;

Function formatdatestring (origindatestr)
{
VaR yearstr = origindatestr. substr (0, 4 );
VaR monthstr = origindatestr. substr (5, 2 );
VaR daystr = origindatestr. substr (8, 2 );
Return monthstr + "/" + daystr + "/" + yearstr + "" + origindatestr. substr (11 );
}

Function createtimelineandevents ()
{
VaR items = getcalendarlistitems ();
If (items = NULL)
{
Alert ("cannot got items from list .");
Return;
}
VaR eventsource = new timeline. defaulteventsource ();
For (VAR I = 0; I <items. length; ++ I)
{
VaR ows_eventdate = formatdatestring (items [I]. getattribute ("ows_eventdate "));
VaR ows_enddate = formatdatestring (items [I]. getattribute ("ows_enddate "));
VaR ows_title = items [I]. getattribute ("ows_title ");
VaR ows_location = items [I]. getattribute ("ows_location ");
VaR eventdate = new date (ows_eventdate );
VaR enddate = new date (ows_enddate );
VaR event = new timeline. defaulteventsource. Event (
Eventdate, // start
Enddate, // end
Eventdate, // lateststart
Enddate, // earliestend
False, // instant
Ows_title, // text
Ows_location // description
);
Eventsource. Add (event );
}

VaR bandinfos = [
Timeline. createbandinfo ({
Trackgap: 0.2,
Width: "60% ",
Intervalunit: timeline. datetime. Day,
Intervalpixels: 100,
Timezone: 8,
Eventsource: eventsource
}),
Timeline. createbandinfo ({
Showeventtext: false,
Track Height: 0.5,
Trackgap: 0.2,
Width: "25% ",
Intervalunit: timeline. datetime. Week,
Intervalpixels: 150,
Timezone: 8,
Eventsource: eventsource
}),
Timeline. createbandinfo ({
Showeventtext: false,
Track Height: 0.5,
Trackgap: 0.2,
Width: "15% ",
Intervalunit: timeline. datetime. Month,
Intervalpixels: 400,
Timezone: 8,
Eventsource: eventsource
})
];
Bandinfos [1]. syncwith = 0;
Bandinfos [2]. Highlight = true;
Bandinfos [2]. syncwith = 1;

VaR timeline = timeline. Create (document. getelementbyid ("My-timeline"), bandinfos );
}

_ Spbodyonloadfunctionnames. Push ("createtimelineandevents ");

Alas, it's a little long. I didn't want to post it all, but I thought someone might want to use it, so... also, don't forget to add a reference to "http://simile.mit.edu/timeline/api/timeline-api.js" in the master page (as shown above ).

Put the above JS Code (and a "Div" tag into a single. htm file, and then put a content edit web part on the page where you want to display timeline. By setting the content to edit the Web parts, the Web parts can get the HTML source code to be displayed from the .htm file (This method allows us to directly use SharePoint designerto edit the HTML and JS source code in the .htm file, without having to use the clumsy editor embedded in the Web parts):

OK. In addition, a dedicated client Om is provided in SharePoint 2010, which directly supports the use of ecmascript (standard terminology: ecmascript is a type of Computer Manufacturers Association developed by ECMA International (formerly known as the European Computer Manufacturers Association) standardized scripting language through ECMA-262. This language is widely used on the World Wide Web and is often called JavaScript or JScript, but in reality the latter two are ECMA-262 standard implementations and extensions .) To access Sharepoint.