Currently Being Moderated
Zaheer Moosa

WPC wysiwyg Calendar (Part 1)

Posted by Zaheer Moosa in SAP NetWeaver Portal on May 15, 2012 7:30:40 AM

With the ability of Web page composer to create custom form types and having worked with the brilliant FullCalendar jQuery plug-in, I decided to try my hand at match making and getting the two married . The idea would be to store, edit and display a calendar with events using the underlying WPC technology.

 

An intro to FullCalendar

FullCalendar is a jQuery plug-in that provides a drag & drop event calendar and can use AJAX to fetch event data.FullCalendar is highly customizable and can easily be configured to adapt to your own needs. Below is a screen shot showing a calendar using one of the jQuery themes.

full_cal1.JPG

however the purpose of FullCalendar is mainly for displaying events, so extra event manipulation and management is left to the developer

 

Outline of Tasks

Below is a summary of the main tasks carried out and related documents that were referenced:

 

I'll discuss each briefly and the approach taken to realise them.

 

Creating a new Web Form

This task is to provide the document presentation details and perform the necessary KM configuration for making a new WPC form available in the portal.

I'll briefly just mention the workings and requirements of WPC for creating a custom form: WPC content is created and stored as XML documents within KM,

in order to display these XML documents to the end user the XML documents are transformed using a corresponding XML stylesheet. WPC requires two files: 1 presentation file (.xsl file) and 1 web form (.xml file), the Web form file describes what editor components will be used to create the KM XML content.

 

Web Form: wpc_cal.xml

<documenttype id="wpc_cal" description="xml.xlbl.wpc_cal" showpreview="true" showelementlist="true">

      <properties>

            <property id="fileName" description="xml.xlbl.filename" type="inputfield" size="25" isrequired="true" isfilename="true"/>

            <property id="title" description="xml.xlbl.title" type="inputfield" size="25" isrequired="false" />

      <elements>

            <element id="cal" description="cal" type="wpccal" default="true" />

      </elements>

</documenttype>

 

Creating a custom component editor

The gist of this task is to create the editor component that will determine how the editor is displayed and how a component's data is saved, this involves creating the portal par project and implementing the required editor classes.The approach taken here was to save the calendar's json data between XML CDATA sections, the resultant wpc (xml stored in km) document is shown below:

 

wpc xml doc:

<document document="wpc_cal">

  <properties>

    <property type="fileName" prop_ns="http://sapportals.com/xmlns/cm" prop_name="displayname"/>

    <property type="title">events</property>

  </properties>

  <elements>

    <element type="cal">

      <![CDATA[[

[{"id":1281,"title":"Fund  raiser","start":"2012-05-10T05:30:46Z","url":"http://fund.raising.fr/events/1281","end":"2012-05-10T07:30:46Z","allDay":false,"location":"eastern  block"},

{"id":1265,"title":"Golf  Day","start":"2012-05-22T12:18:59Z","url":"","end":null,"allDay":true,"location":"golf  course"},

{"id":3262,"title":"Important  Conference","start":"2012-05-28T12:22:22Z","url":"","end":"2012-05-31T12:22:22Z","allDay":true,"location":"far  far away"}]

]

]]>

    </element>

  </elements>

  <relatedlinks/>

  <relatedfiles/>

</document>

 

The editor in WPC will show something like this:

wpc_cal1.JPG

the usual way for editor components to extract the editor data from the form is by reading the form fields, this is typically, since most components have and keep track of only one value, the (maybe simplest? but not best) approach taken here was to store the entire json string in a hidden form field.

Apart from this, some client side javascripting is also employed to synchronize the hidden form field with the calendars state when events are dragged, added, edited or update.

Below are more screen shots showing the event editing functionality and the navigation view.

 

newly added event being dragged:

wpc_cal2.JPG

 

 

event details being updated,the form fields are used only on the client side to manipulate event json data:

wpc_cal3.JPG

 

 

exact time slots are specified by dragging the event in day view, by default an event is 'all day':

wpc_cal4.JPG

 

 

the form is saved usually as any other WPC form:

wpc_cal5.JPG

 

 

the calendar is also used in a WPC page as any other form:

wpc_cal6.JPG

 

wpc_cal7.JPG

 

result in site navigation:

wpc_cal8.JPG

 

in the next blog I'll discuss extending the calendar to allow the user to save a calendar event as an MS outlook appointment.

Comments

Actions

Filter Blog

By author:
By date:
By tag: