Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Michael Friedrich 20 posts 97 karma points
    Feb 07, 2017 @ 15:11
    Michael Friedrich
    0

    How to render form in the Umbraco Grid Editor?

    I need to integrate a Formulate form on a website using the umbraco's grid Editor.

    I tried to integrate the formulate form via a new document type and the plugin Doc Type Grid Editor. But it does not work. The "form" part was empty and both, success and failed messages appeard on the frontend page.

    Then I tried to create a new macro (with a partial macro view) and this time the form appears and even does work. But If I select a form on a page and save the document node I am no longer be able to change this page. When I click "Save and Publisch" there is a endless wait sign. I need to close the Browser and reopen it to be able to do anything in umbraco!

    This is my implementation:

    Partial View Macro:

    @using formulate.app.Types
    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
    
        // Boilerplate.
        Layout = null;
    
        // Get a view model for the picked form.
        var pickedForm = Model.Content.GetPropertyValue<ConfiguredFormInfo>("formular");
        var vm = formulate.api.Rendering.GetFormViewModel(pickedForm.FormId, pickedForm.LayoutId,
            pickedForm.TemplateId,
            // Include this parameter in Formulate 0.3.7 or greater.
            Model.Content);
    
    }<!doctype html>
    
    <html>
    <head>
        <title>Formulate Example</title>
    
        <!-- Include the CSS/JavaScript for jQuery, Bootstrap, Lodash, and AngularJS. -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
        <!-- The Formulate JavaScript for the Responsive / AngularJS / Bootstrap form template. -->
        <script src="/App_Plugins/formulate/responsive.bootstrap.angular.js"></script>
    
        <!-- This is some AngularJS JavaScript specific to your application. -->
        <script>
    
            // Include Formulate as a dependency.
            var app = angular.module("app", ["formulate"]);
    
            // Create a controller to handle form submissions.
            app.controller("formWrapper", function ($scope) {
                $scope.status = "pending";
                $scope.$on("Formulate.formSubmit.OK", function () {
                    $scope.status = "success";
                });
                $scope.$on("Formulate.formSubmit.Failed", function () {
                    $scope.status = "failure";
                });
            });
    
        </script>
    
    </head>
    <body ng-app="app">
    
        <!-- Handle the display of the form, the success message, and the error message. -->
        <div ng-controller="formWrapper">
    
            <!-- Display the form. -->
            <div ng-if="status !== 'success'">
                <div>
                    @Html.Partial("~/Views/Partials/Formulate/RenderForm.cshtml", vm)
                </div>
            </div>
    
            <!-- Display the success message. -->
            <div ng-if="status === 'success'">
                Your request has been received!
            </div>
    
            <!-- Display the error message. -->
            <div ng-if="status === 'failure'">
                Unable to submit request. Please try again.
            </div>
    
        </div>
    
    </body>
    </html>
    

    I know the html code on the page is not correct if I add new header and body sections into a partial view - I try to solve this later.

    I also create a property on my document type called "formular". Now I can choose a form in the "formular" property and then insert the form via the grid editor and adding the macro above.

    Is there a sample or doc or something else how to integrate the form render with the umbraco grid editor?

    What's the problem not being able to change a document any more once I added my partial view macro to the grid editor?

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Feb 07, 2017 @ 16:24
    Nicholas Westby
    100

    I'm afraid I can't help much with the grid editor (haven't jumped on that bandwagon personally).

    However, I would suspect there is some JavaScript error that should be visible in your developer tools console (e.g., in Chrome). If you see any errors there, let me know and I'll take look.

    You might also want to check in the Umbraco error log text file to see if there are any relevant errors.

  • Michael Friedrich 20 posts 97 karma points
    Feb 07, 2017 @ 16:35
    Michael Friedrich
    0

    Ah, I found a solution: just disable "Render in RTE and Grid Editor" and there is no more interference between the umbraco backend and the angular.js of the form.

    Now I only need a solution for the wrong html structure because of the added css and script files needed for the form to render correctly. I don't want to include all those files on the master template because only one page will have a form on it.

    Do you know a solution for this?

  • Michael Friedrich 20 posts 97 karma points
    Feb 07, 2017 @ 16:52
    Michael Friedrich
    1

    the css files are not needed because my site is based on a bootstrap template. I just deleted the head an title tag and changed the body tag to a div.

    It seems all is working now!

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Feb 07, 2017 @ 17:20
    Nicholas Westby
    0

    Awesome, I'm glad you got it working.

    When you have deployed the form to your production website, let me know and I may feature it on the Formulate website.

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Feb 07, 2017 @ 16:56
    Nicholas Westby
    0

    Now I only need a solution for the wrong html structure because of the added css and script files needed for the form to render correctly

    Not sure what would be "wrong" about the HTML structure.

    only one page will have a form on it

    Does that page have its own document type? For example, "Contact Us"? Assuming it does and that the alias of the document type is "contactUs", you could do this on the master template:

    if ("contactUs".InvariantEquals(Model.Content.DocumentTypeAlias))
    {
        // JavaScript and CSS rendered here.
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft