Tuesday, November 22, 2016

Kendo Editor in SharePoint forms

In SharePoint Forms Designer 3.1.2 we added some interesting features.

First, now Kendo-widgets detect your culture and use right format and language for date and time controls. So, it has become more comfortable to use kendo date and time pickers in forms:

Localizable Kendo date and time picker in SharePoint form

The second feature is a new template for Multiline Plain Text fields - Kendo Editor:

Kendo Editor template for SharePoint multiline text field

In a form, it appears like this:

Kendo Editor in SharePoint form

You can customize toolbar via JavaScript. Here is the complete list of available tools:

"bold",
"italic",
"underline",
"strikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
"insertUnorderedList",
"insertOrderedList",
"indent",
"outdent",
"createLink",
"unlink",
"insertImage",
"insertFile",
"subscript",
"superscript",
"createTable",
"addRowAbove",
"addRowBelow",
"addColumnLeft",
"addColumnRight",
"deleteRow",
"deleteColumn",
"viewHtml",
"formatting",
"cleanFormatting",
"fontName",
"fontSize",
"foreColor",
"backColor",
"print"

You can get the current list of tools via JavaScript:

fd.field('Text').control('kendoEditor').done(function(editor) {
    console.log(editor.options.tools);
});

And set a new list:

fd.field('Text').control('kendoEditor').done(function(editor) {
 editor.setOptions({tools: ["bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull",
                "insertUnorderedList",
                "insertOrderedList",
                "indent",
                "outdent",
                "createLink",
                "unlink",
                "insertImage",
                "insertFile",
                "subscript",
                "superscript",
                "createTable",
                "addRowAbove",
                "addRowBelow",
                "addColumnLeft",
                "addColumnRight",
                "deleteRow",
                "deleteColumn",
                "viewHtml",
                "formatting",
                "cleanFormatting",
                "fontName",
                "fontSize",
                "foreColor",
                "backColor",
                "print"
 ]});
});

Here is the editor with full toolbox:

Kendo Editor with all available tools in SharePoint form

Feel free to ask your questions

Thursday, November 17, 2016

More properties for fields and Kendo Date and Time pickers for dates

In SharePoint Forms Designer 3.1.1 we added a lot of new useful features and here is a short manual of using them.

First, we added changing color, size, and style of font in field`s title and control. Everything is displaying in the field properties.

Customize font style of SharePoint form fields

Second feature is maybe the most significant - now you can define own templates for fields. Just pick ‘Custom’ option in the ‘Template’ property. Next, set custom markup for the control using ‘HTML’ property and custom logic for it with ‘JavaScript’.

Customize view of SharePoint form fields

Another feature we added is pre-defined templates. Currently, they’re available for Date and DateTime fields only. You can change default rendering with Kendo Date and Time picker that looks much better and works faster than the default control.

Replace SharePoint Date and Time fields with Kendo Date and Time pickers Kendo Date and Time picker Kendo Date picker

Upgrade the solution and enjoy!