ParagraphTextField (MVC) custom template - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

ParagraphTextField (MVC) custom template

  • ParagraphTextField (MVC) custom template
  • For some reason when using the paragraph text field the textarea control doesn't add the Bootstrap 'form-control' class as it does with regular text boxes which makes it render next to the label and doesn't stretch the full 100% width. 

    I can fix this easily enough in CSS but I wanted to figure out custom form widget templates anyway. 

    So I head over to Design > Widget Templates and click Create Template and select ParagraphTextField (MVC) in "This template is applied to". 

    Then.... nothing. The code area remains blank, no tips or clues on what Sitefinity expects in terms of HTML elements, required attributes, etc. 

    I'm searching online but can't see anything documenting this specific question. 

    Where can I find documentation describing specifically what code is expected for Form Field Widget templates? 

    I found the following code at the URL:

    01.@model Telerik.Sitefinity.Frontend.Forms.Mvc.Models.Fields.ParagraphTextField.ParagraphTextFieldViewModel
    03.@using Telerik.Sitefinity.UI.MVC;
    04.@using Telerik.Sitefinity.Frontend.Forms.Mvc.Helpers;
    05.@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
    06.@using Telerik.Sitefinity.Modules.Pages;
    08.@Html.Script(ScriptRef.JQuery, "top", false)
    10.<div class="@Model.CssClass sf-fieldWrp" data-sf-role="paragraph-text-field-container">
    11.    <input type="hidden" data-sf-role="violation-messages" value='"maxLength":"@Model.MaxLengthViolationMessage", "required": "@Model.RequiredViolationMessage"' />
    12.    <label for='@Html.UniqueId("Textarea")'>@Model.MetaField.Title</label>
    13.    <textarea id='@Html.UniqueId("Textarea")' data-sf-role="paragraph-text-field-textarea" name="@Model.MetaField.FieldName" placeholder="@Model.PlaceholderText" @MvcHtmlString.Create(Model.ValidationAttributes)>@Model.Value</textarea>
    15.     @if (!string.IsNullOrEmpty(Model.MetaField.Description))
    17.         <p>@Model.MetaField.Description</p>
    21.@Html.Script(Url.WidgetContent("Mvc/Scripts/ParagraphTextField/paragraph-text-field.js"), "bottom", false)

    I've added this as the code to the new widget template, gave it a name and saved it. 

    However, when I go to form, edit it and edit the paragraph field the template doesn't show up in the list? 

    Is this the right code and why does it not show up in the list of available templates? 

  • So found the Write.Default.cshtml file in the ResourcePackages > PackageName > MVC > Views > ParagraphTextField which I had somehow missed before. 

    I made a copy of Write.Default.cshtml and called it Write.CustomName.cshtml, made changes, saved it then went back to the form to select it from the paragraph's template list... nothing, still just the default template. 

    What am I missing? 

  • Hi Jacques. You miss one thing. 

    Your template should be located into Project root\Mvc\Views\ParagraphTextField

  • For detailed info, please check this link 
  • Just read through the link... 

    Any idea why all other widgets can be customized in the specific package and not form fields? 

    Same goes for why you can't create custom widget templates in the admin section, considering that form fields are actually listed in the "This template is applied to" select list? 

  • Form templates is not related to resource package. It's applied to whole website. For example you can place the same form for two different pages which use different Resource Packages

    And i can't answer to your second question. 

  • Thanks, accepting your answer.