- SPWidgets is a set of Sharepoint widgets meant to facilitate the - building of custom UI's. This demo contains a showcase of the widgets - that are available and serves to only scratch at the possibilities - of what can be accomplished with them. Visit the project at - purtuga.github.io/SPWidgets -
-| File | -Last Modified | -Last Modified By | -
|---|
A basic setup on an input element.
(Note: Once a person is selected here, Demo number two will be initiated and made visible below.
- Click below to select a list followed by a column from
- that list. Reminder: Column must be of a type supported
- by the widget (Lookup, Choice).
- The Board is configured to be displayed with a fixed height
- of 500px.
-
- Events fired by the widget will populate data here. -
- - - -- The Board widget displays a Kan-Ban type board for list items, allowing - the user to quickly move items around between states. The example below - is using the Tasks List commonly used in all Sharepoint Sites, and - specifically, the Status Field of that List. -
- -Click below to select a List.
- - -Field below allows user to pick only 1 value.
-Field below allows user to select - mulitple values (multi-select).
-Field below allows user to select - mulitple values (multi-select) and displays - the selector, which allows the user the ability - to "browse" the list looking for the correct value. - In addition, the List items are sorted by ID in - Descending order.
-- Area below will capture out of events from the demo. -
- - - -- The Lookup Field widget provides a custom interface for List/Library - field of type Lookup. It turns an input field into a Type-Ahead/autocomplete - field allowing the user to start typing values and select a match from - the suggestion. -
- -This demo uses one of lists available on this site (picker below) and displays a filter panel for the fields on that list.
- -Click below to select a List.
- - -- The results from the filter defined are displayed below. - Results are limited only to the first 10 matches and the - first 3 columns.. -
- -- Click the filter button to see CAML generated from filter values entered. -
-- The List Filter widget displays a filter panel to collect information from the - user. Data can be used to then retrieve rows from the list - using the criteria provided by the user. -
- -Set the ID column value via setFilter method. The column should be populated with a value of 'one;two', a match type of 'Contains' and a sort order of 'Ascending'. The column should be shown as dirty.
-- Run -
- -Set the ID column sortOrder only via setFilter method. Only the sort order should be set to 'Ascending' and the column should show dirty.
-- Run -
- --
Default functionality.
--
Allow multiple dates.
--
Override date input format to Euro - mm/dd/yyyy
--
- In this example, the input field used to bind SPDateField widget - was already storing 2 dates: August 1, 2013 and August 2, 2013. -
--
- In this example, the widget is set to also show a time picker - along with the date picker. Time is displayed along with date - and the date string for use with SharePoint's API will include - the time element in it. When picker is displayed, it will have - the currently selected date pre-selected or if not has been set - yet, it will defaul to current time/date. -
--
- Similar to Example 5, where a date and Time picker is displayed, but - allows user to define multiples. -
--
- In this example, the input field used to bind SPDateField widget - was already storing 2 dates: August 1, 2013 1:05 AM and - August 2, 2013 4:30PM. This instance also shows the use of - localized labels, like Time, Hour, Minutes. -
--
- Example showing the Date picker being used on a non-input element. - The dates selected by the user would have to be handled by the callback - to the JQuery UI Datepicker widget. -
- - - --
- Example showing the Date and Time picker being used on a non-input element. - The dates selected by the user would have to be handled by the callback - to the JQuery UI Datepicker widget. -
- - - - -- As the dates are selected, the demo will output data to this - area when the input element's change event is triggered. -
-- SPDateField is a widgets wrapped around jQuery UI Datepicker that - allows the user to pick one or more dates using their own locale - format, while storing the SharePoint friendly format (YYY-MM-DD) - in the input field to which this widget was bound to. -
-- Below are the version of software currently being used for this demo showcase. -
- -SPWidgets is a set of Sharepoint widgets meant to facilitate the building of custom UI's. This demo contains a showcase of the widgets that are available and serves to only scratch at the possibilities of what can be accomplished with them. Visit the project at purtuga.github.io/SPWidgets
| File | Last Modified | Last Modified By |
|---|
A basic setup on an input element.
(Note: Once a person is selected here, Demo number two will be initiated and made visible below.
Click below to select a list followed by a column from that list. Reminder: Column must be of a type supported by the widget (Lookup, Choice).
The Board is configured to be displayed with a fixed height of 500px.
Events fired by the widget will populate data here.
The Board widget displays a Kan-Ban type board for list items, allowing the user to quickly move items around between states. The example below is using the Tasks List commonly used in all Sharepoint Sites, and specifically, the Status Field of that List.
Click below to select a List.
Field below allows user to pick only 1 value.
Field below allows user to select mulitple values (multi-select).
Field below allows user to select mulitple values (multi-select) and displays the selector, which allows the user the ability to "browse" the list looking for the correct value. In addition, the List items are sorted by ID in Descending order.
This demo uses one of lists available on this site (picker below) and displays a filter panel for the fields on that list.
Click below to select a List.
The results from the filter defined are displayed below. Results are limited only to the first 10 matches and the first 3 columns..
Click the filter button to see CAML generated from filter values entered.
The List Filter widget displays a filter panel to collect information from the user. Data can be used to then retrieve rows from the list using the criteria provided by the user.
Set the ID column value via setFilter method. The column should be populated with a value of 'one;two', a match type of 'Contains' and a sort order of 'Ascending'. The column should be shown as dirty.
Set the ID column sortOrder only via setFilter method. Only the sort order should be set to 'Ascending' and the column should show dirty.
Default functionality.
Allow multiple dates.
Override date input format to Euro - mm/dd/yyyy
In this example, the input field used to bind SPDateField widget was already storing 2 dates: August 1, 2013 and August 2, 2013.
In this example, the widget is set to also show a time picker along with the date picker. Time is displayed along with date and the date string for use with SharePoint's API will include the time element in it. When picker is displayed, it will have the currently selected date pre-selected or if not has been set yet, it will defaul to current time/date.
Similar to Example 5, where a date and Time picker is displayed, but allows user to define multiples.
In this example, the input field used to bind SPDateField widget was already storing 2 dates: August 1, 2013 1:05 AM and August 2, 2013 4:30PM. This instance also shows the use of localized labels, like Time, Hour, Minutes.
Example showing the Date picker being used on a non-input element. The dates selected by the user would have to be handled by the callback to the JQuery UI Datepicker widget.
Example showing the Date and Time picker being used on a non-input element. The dates selected by the user would have to be handled by the callback to the JQuery UI Datepicker widget.
As the dates are selected, the demo will output data to this area when the input element's change event is triggered.
SPDateField is a widgets wrapped around jQuery UI Datepicker that allows the user to pick one or more dates using their own locale format, while storing the SharePoint friendly format (YYY-MM-DD) in the input field to which this widget was bound to.
Below are the version of software currently being used for this demo showcase.