In this post I am not going to focus on how to work with SharePoint API, create a first app, and deploy it because Microsoft already prepared sample projects and documentation together with a 6-part YouTube tutorial (link : http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part). But, to say it short, I wrote how to run a created project. 

  1. At first you should create a project using this command:  “yo @microsoft/sharepoint”
  2. Next  you must choose React JavaScript framework (if you don’t know what it is, I recommend a course: https://www.tutorialspoint.com/reactjs/index.htm )
  3. Run IDE, in my case that would be a Visual Studio code.
  4. Helper command line editor to : cmder (http://cmder.net/)

In the picture show structure file you see the project has path src/webparts. This is the main folder were we can create own webparts. I created a webpart which was auto generated and I focused only on one file “DatePickerExample.tsx”. This file is in a main view. React called it “JSX”. “JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.” (https://facebook.github.io/react/docs/jsx-in-depth.html)

                                  1

A code  with a simple date picker:

2

A file can be divided into 3 parts:

  1. Import part
  2. Entered properties
  3. Main class rendering

Ad a) The most important is to load a module datepicker and choose properties which it would use. I’m using directive “DatePicker” and enum “DayOfWeek”

Ad b) A standard mechanism which allows transferring properties to the JSX

Ad c) The main method in the class  is render. Render returns html tags.

In the method “render”, I used the tag DatePicker, that is a react directive and has one property required: strings. This property  is the object “IDatePickerStrings” which renders  names in picker.

3

I prepared helpers private method and properties.  When you run gulp you should see that control:

4

Of course this names took the object  “IDatePickerStrings”. It is a beta and many CSS are maybe not  as pretty in all web browser.

Events:

onSelectDate: (date:Date) => run when we click a new date. Fig.1

formatDate (date: Date) => custom format string in display label in the DatePicker. Fig.2

parseDateFromString (dateStr: string) => Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true. Fig.3

Properties:

allowTextInput : Boolean => Whether the DatePicker allows input a date string directly or not. Fig.4

firstDayOfWeek : DayOfWeek => The first day of the week. Fig.5

label: String => Label for the DatePicker Fig.6

isRequired : Boolean => Whether the DatePicker is a required field or not. Fig.7

ariaLabel: String => Aria Label for TextField of the DatePicker for screen reader users. Fig.8

isMonthPickerVisible : Boolean => Whether the month picker is shown beside the day picker or hidden. Fig.9

Placeholder: string => Placeholder text for the DatePicker. Fig.10

Value:Date => Default value of the DatePicker, if any. Fig.11

Images events and properties

5

Figure 1: onSelectDate

6

Figure 2: formatDate

8

Figure 3: parseDateFromString

7

Figure 4: allowTextInput

9

Figure 5: firstDayOfWeek

10

Figure 6: label

11

Figure 7: isRequired

12

Figure 8: ariaLabel

13

Figure 9: isMonthPickerVisible

14

Figure 10: placeholder

15

Figure 11: Value

Bugs

I have noticed a few bugs, for example the mobile mode is not responsive (Fig.12).

Also not all CSS work correctly (Fig.13).

16

Figure 12

17

Figure 13

Summary

I think this API is cool. We must know many tehnologies, for example TypeScript, Node.js, gulp, React, Knockout or Yeoman, but this knowledge gives us many open source components. Client side is a good wayto go, because JavaScript is experiencing a rebirth. This way of development is way easier and quicker than server side. But this way has its disadvantages, as all apps use user context, and base on user roles. I think it is a new breath for SharePoint development and users will no longer  fear creating anything on that platform.

All code found in my github : https://github.com/PawelHaracz/SharepointApi/tree/master/Presentations/DatePicker

If you have more thoughts about this post please leave a comment  🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s