Extend Sitecore Forms Designer with Publish Functionality

Posted 16 Aug 2024 by Marek Musielak

One day I was asked by one of our clients if we could extend the Sitecore Forms Editor with an option to publish a Sitecore form directly from the Forms Editor, instead of having to go back to the forms list, find the form, and publish it there. At Blastic, we always want to make sure that our clients are more than happy, so we found a way to add a button to the Sitecore Forms Editor and allow content authors to publish the form they are editing without navigating out of that tool.

I wrote this blog post while working for Blastic, a company that delivers great Sitecore solutions and much more.

The first task we need to address is extending the /sitecore/shell/client/Applications/FormsBuilder/Pages/FormDesigner/FormDesigner.js JavaScript. You need to add:

"form:Publish": this.publishForm,

in this.on function call:

and after saveFormAs function, add:

processPublishForm: function() {
    this.PublishFormSubAppRenderer.show([{$itemId: this.FormDesignBoard.FormModel.itemId
        , $language: this.FormDesignBoard.FormModel.currentLanguage}]);
},

publishForm: function() {
    this.confirmUnappliedFieldChanges(this.processPublishForm());
},

The next thing on the list is adding a Publish item under /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/ActionControl/ActionColumn/Form in the Sitecore core database. Use Action template and set the fields as follows:

Text value: Publish
Icon value: ~/icon/Office/16x16/publish.png
Tooltip value: Publish form
IsFavorite value: checked
Name value: Publish
Click value: trigger:form:Publish

Then, we need to add another SubAppRenderer rendering to the Page.Body placeholder of the /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner item in the Sitecore core database and set its Id to PublishFormSubAppRenderer and its ConfigurationItem to sitecore/client/applications/formsbuilder/dialogs/publishformdialogwindow. You may need to use Sitecore Rocks or manually edit the serialized item, so to make it easier for you, here is a content package with both items: Publish-Form-For-Sitecore. This content package was prepared using Sitecore.NET 10.3.1 (rev. 009452), but it should be compatible with other Sitecore versions as well. It's best to take a backup of your items before you install the package, just in case.

Finally, switch back to the master database and open the Sitecore Forms Designer. Edit the chosen form and click on the new Publish button. You should see a modal window like the one below, and the form should be published.

By following these steps, you have successfully extended the Sitecore Forms Designer with the ability to publish forms directly from the editor. This enhancement streamlines the content authors' workflow, allowing for quicker and more efficient publishing within Sitecore.