Change widgets for parameters in Razor Functions

Normally, a parameter gets its default widget, e.g. a parameter of the String type, will get a TextBox widget in the GUI.

If you want to change the parameter's widget, use the 'WidgetMarkup' as a parameter in the FunctionParameter attribute on the Razor function's parameter and set it to the widget markup.

You can provide the widget markup via the <f:widgetfunction> element specifying its name and its namespace. If the widget have parameters, you can specify the parameters, too, via the <f:param> element. To get the correct widget markup:

1. Log in to the CMS Console.
2. In the Functions perspective, expand All Widget Functions, Widgets, and then the namespace of the widget you need (e.g. Composite.Widgets.String).
3. Select the widget function (e.g. Composite.Widgets.String.TextArea) and click Information on the toolbar.
4. Copy the widget function markup from the information view.
5. Paste it as a value to the WidgetMarkup parameter, replacing double quotes ("...") with single quotes ('...') in the value.

Normally, you will want to change the widget if you need to use:

• a non-default widget (e.g. TextBox to TextArea)

  @functions {
      
      [FunctionParameter("Description"  , "A short description of the product",
      WidgetMarkup = "<f:widgetfunction name='Composite.Widgets.String.TextArea' xmlns:f='http://www.composite.net/ns/function/1.0'></f:widgetfunction>")]
      public string Description { get; set; }
  }
  

  Download source
• a default widget with parameters set to non-default values (e.g. SpellCheck: 'True' to 'False')

  @functions {
      
      [FunctionParameter("URL"  , "The website's URL",
      WidgetMarkup = "<f:widgetfunction name='Composite.Widgets.String.TextBox' xmlns:f='http://www.composite.net/ns/function/1.0'><f:param name='SpellCheck' value='False' /></f:widgetfunction>")]
      public string Url { get; set; }
  }

  Download source