Kentico Modules: Adding a custom button to a Form using UIForm Extenders

By Mark Schmidt on February 13, 2016

Kentico Modules: Adding a custom button to a Form using UIForm Extenders

Kentico’s Modules are very powerful. They are very extendable, and they simply make customizing Kentico a joy. Kentico also provides great documentation on how to extend the main element of a module, the UniGrid. This means you can add your own buttons, your own actions and more to the grid component. But there are not a lot of good examples on how to do it for the UniForm. That's where Kentico Extenders come to the rescue.

Kentico Extenders for Modules

If you are not sure what I am talking about, check these links out:

The links above do a great job on showing how to extend the UniForm. Below, I will show you how to extend your Form. In this example, I am simply adding an additional button Run Compare to the Form.

 

Add a button to Kentico Module

 

First Step: Setup your Extender

Go through the normal steps on creating a new extender.
https://docs.kentico.com/display/K8/Creating+extenders+for+module+interface+pages

The screenshot below shows how we have this example setup.

 

Kentico Module configure UI Element

 

Second Step: Add Code inside CompareProjectNewEditExtender.cs

using CMS.ExtendedControls;
using CMS.ExtendedControls.ActionsConfig;
using CMS.FormControls;
using CMS.Helpers;
using CMS.UIControls;

namespace BizStreamToolkit.Tools
{
    public class CompareProjectNewEditExtender : ControlExtender<UIForm>
    {
        // This gives me access to the Object I am editing. Cast it to whatever ObjectType you are workig with.
        public CompareProjectInfo Project
        {
            get
            {
                return Control.UIContext.EditedObject as CompareProjectInfo;
            }
        }

        public override void OnInit()
        {
            InitHeaderActions();
        }

        private void InitHeaderActions()
        {
            // Only show the run compare button on the "EDIT" action (the project already exsits)
            if (QueryHelper.GetString("action", "") == "edit")
            {
                string url = CompareHelper.GetUrlForRunCompare(Project.CompareProjectGUID);

                AddHeaderButton(
                    Text: "Run Compare", // "BizStreamToolkit.Button.RunCompare",
                    Url: url);
            }
        }

        private void AddHeaderButton(string Text, string Url, ButtonStyle ButtonStyle = ButtonStyle.Default)
        {
            var page = (CMSUIPage)Control.Page;
            var buttonHeaderAction = new HeaderAction()
            {
                Text = ResHelper.GetString(Text),
                RedirectUrl = Url,
                ButtonStyle = ButtonStyle,
            };
            page.AddHeaderAction(buttonHeaderAction);
        }

    }
}

 

That's All You Need to add a custom button to a UIForm

As you can see in the code above, using theCMSUIPage.AddHeaderAction method is the real key. This is the step that really allows you to inject your button and its functionality into the standard admin interface. It's not really that hard at all.

For those of you who are paying special attention to the screen shots and object names like CompareProjectInfo, you might have already guessed it, but this example is actually from our new product that we are working on as part of the BizStream Toolkit. If you are interested in making deployments easier for your Kentico projects please checko out, Compare for Kentico. The tool is in open beta right now and free for anyone to use. We'd love to know your feedback on it.

 

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Tutorials posts
Start a Project with Us

About the author

Mark is passionate about building a team of highly skilled people who love what they do. He believes having smart, dedicated people on the team provide immeasurable benefits to BizStream’s clients. Mark has a crazy penchant for web tech, data, coffee, and music (the more obscure the better). He’s always on the hunt to see what technology trends might help his clients or anyone else he knows. In his down time, he loves spending time with his wife and 3 daughters.

View other posts by Mark

Subscribe to Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.