Grid form picker control not rendering form.

[jaandrews]

The form doesn't render correctly when embedded inside the grid.

Reproduction

Bug summary

There are two problems.

1. The markup injected into the grid includes a form tag. Since the grid is already inside a form tag, the nested form element can break the markup because it strips out the form tag.
2. The markup is not flagged as trusted html with $sce.trustAsHtml. Angular strips out all of the inputs because of this.

Specifics

• Umbraco Version: 8.15.1
• Umbraco Forms Version: 8.7.6

Steps to reproduce

1. Create a form with form fields.
2. Add the form to the grid.

Expected result

The form renders in the backoffice.

Actual result

The form didn't render the fields and just displays the labels in misaligned fashion. This is because of broken markup.

Before Fix

After Fix

I only had to make a couple tweaks to fix this in my local instance. I added the $sce dependency to the Umbraco.Forms.GridEditors.FormPickerController function. Then I cleaned up the resulting markup to make it safe to embed.

$scope.preview = htmlResult;

becomes

htmlResult = htmlResult.replace('<form', '<div').replace('</form>', '</div>');
$scope.preview = $sce.trustAsHtml(htmlResult);

Note that the fixed form won't look exactly like what I have, since it's styled for a custom theme.

[AndyButland]

Thanks for the report and fix @jaandrews. This looked like quite an easy one to get into the product, but it's confused me a bit in trying to apply what you've suggested. From what I'm seeing, when Umbraco forms are rendered in the grid, they are within Umbraco.PropertyEditors.Grid.MacroController (defined in the CMS project) not Umbraco.Forms.GridEditors.FormPickerController (defined in Forms). So changes to the latter are having no effect.

I feel I must be missing something obvious. I'm adding the form to the grid via "Add Content > Macro > Insert Form With Theme". Is there another way you are adding your forms to the grid that uses the angularjs controller you've modified? Thanks,.

[jaandrews]

The form is added directly into the grid and isn't injected via a macro. It's using the following from the umbraco forms package manifest.

"gridEditors": [
  {
    "name": "Form",
    "alias": "umbraco_form_picker",
    "view": "/App_Plugins/UmbracoForms/Backoffice/GridEditors/formpicker.html",
    "render": "macro",
    "icon": "icon-umb-contour"
  }
]

The markup of formpicker.html is

<div ng-controller="Umbraco.Forms.GridEditors.FormPickerController">
    <div class="umb-editor-placeholder" ng-click="setFormMacro()">
        <div ng-if="!preview">
            <i class="icon icon-settings-alt"></i>
            <div class="help-text">{{title}}</div>
        </div>
        <div ng-if="preview">
            <div
                    ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
                    ng-bind-html="preview">
            </div>
        </div>
    </div>
</div>

This is where the reference to Umbraco.Forms.GridEditors.FormPickerController is coming from.

[AndyButland]

Got it now, thanks very much. We'll add this update to the next release.