How To Create Custom Form Tasks
This article applies to: Cireson Portal, version 3.6 and above.
Adding custom Work Item Task To Task Console
- Add & Define custom task in CustomSpace/custom.js
- Add any custom HTML templates your CustomSpace directory (optional)
- Add any custom styles to CustomSpace/custom.css (optional)
Add & Define custom task in Custom/custom.js
To add a new task simply register it with app.custom.formTask via the add function like so (in custom.js):
app.custom.formTasks.add( {string} WorkItemType (Incident||ChangeRequest||ServiceRequest), {string} TaskLinkText, {function} ClickFunction function(fromObj,ViewModel){ //custom code starts here });
WorkItemType – The work item type to add the custom task to. TaskLinkText – The text that will be used as the anchor for the link in the task panel, can also be NULL (see advanced Custom Tasks). ClickFunction – The function that will be called when the anchor text is clicked, or event trigger (see advanced Custom Tasks). The formObj and the bound viewModel for the current form will be passed as arguments to this function. *Custom Task will be displayed in the order that they are defined
EXAMPLES
in custom.js
app.custom.formTasks.add('Incident', "Hello World", function (formObj, viewModel) { kendo.ui.ExtAlertDialog.show({ title: "Alert", message: "Hello World" }); return; });
The above code will add a “Hello World” Task to the Incident Form’s Task Panel, when clicked the user will see a stylized alert window with the message “Hello World”
Some more practical examples
Opening a new tab in the browser, with a defined URL.
app.custom.formTasks.add('Incident', "Search Google", function (formObj, viewModel) { var win = window.open("http://www.google.com", '_blank'); win.focus(); return; });
Change Status
app.custom.formTasks.add('Incident', "Make Pending", function (formObj, viewModel) { $.when(kendo.ui.ExtYesNoDialog.show({ title: "Change Status", message: "Are you sure you want to change the status to pending?" })).done(function (response) { if (response.button === "yes") { //set new status viewModel.Status.set("Name", "Pending"); viewModel.Status.set("Id", "b6679968-e84e-96fa-1fec-8cd4ab39c3de"); } }); return; });
Window with static HTML
app.custom.formTasks.add('Incident', "Last Item in History", function (formObj, viewModel) { //static HTML var cont = $('[Your HTML]'); win = cont.kendoWindow({ title: "History", resizable: false, modal: true, viewable: false, width: 400, height: 300 }).data("kendoWindow"); win.open().center(); });
Using custom HTML Templates and Advanced JavaScript
In order to give your custom task a richer UI you can define HTML templates that your custom task can use. This requires a deeper knowledge of JavaScript and some more advanced techniques, that are out of scope for this article. Create a HTML Template Start by creating a new HTML file in your CustomSpace directory, or even create a new template directory inside your CustomSpacedirectory and add a new HTML file there.
For this example the below HTML code will make up our template in changeStatusComment.html
We can then register the new task in custom.js
app.custom.formTasks.add('Incident', "Change Status to Awaiting Outside Resource", function (formObj, viewModel) { console.log(formObj); //use requirejs to load the template first require(["text!/CustomSpace/templates/changeStatusComment.html"], function (template) { //make a jQuery obj cont = $(template); //create a view model to handle the UX var _vmWindow = new kendo.observable({ comment: "", okEnabled: false, charactersRemaining: "4000", textCounter: function () { var maximumLength = 4000; var val = this.comment.length; (val > maximumLength) ? this.comment.substring(0, maximumLength) : this.set("charactersRemaining", maximumLength - val); (val > 0) ? this.set("okEnabled", true) : this.set("okEnabled", false); }, saveStatus: function () { //set new status viewModel.Status.set("Name", "Pending"); viewModel.Status.set("Id", "b6679968-e84e-96fa-1fec-8cd4ab39c3de"); //set action log var newActionLog = { EnteredBy: session.user.Name, Title: localization.Analyst + " " + localization.Comment, IsPrivate: false, EnteredDate: new Date().toISOString().split(".")[0], LastModified: new Date().toISOString().split(".")[0], Description: this.get("comment"), Image: app.config.iconPath + app.config.icons["comment"], ActionType: "AnalystComment" } //beta method actionLogModel.push(newActionLog); }, okClick: function () { this.saveStatus(); customWindow.close(); }, cancelClick: function () { customWindow.close(); } }); //create the kendo window customWindow = cont.kendoWindow({ title: "Change Status", resizable: false, modal: true, viewable: false, width: 500, height: 300, close: function () { }, activate: function () { //on window activate bind the view model to the loaded template content kendo.bind(cont, _vmWindow); } }).data("kendoWindow"); //now open the window customWindow.open().center(); }); });
Add any custom styles to custom.css
If you need to add any custom css styles for your task you can add them in custom.css
For additional assistance, please visit the Cireson Community or contact team@cireson.com.
