edit content node inside custom section

Sean Dooley 288 posts 527 karma points

Jan 30, 2017 @ 14:29

Extending Umbraco and using the API

Umbraco 7

I'm looking at creating a custom section to display content nodes waiting for approval.

Instead of redirecting the user from my custom section to the Content section, I would like to be able to edit the node within the custom section.

Is it possible to display the edit view for a node inside a custom section?

Copy Link

David Peck 687 posts 1863 karma points c-trib

Jan 30, 2017 @ 22:20

Almost certainly yes. You've presumably Googled custom sections right?

This has a demo project: http://www.nibble.be/?p=440

You should be able to unpick this to get your tree to load /umbraco/views/content/edit.html.

Copy Link

Sean Dooley 288 posts 527 karma points

Jan 31, 2017 @ 08:26

Thanks David. I've got the edit form rendering now.

The next issue to tackle is an authorization error when attempting to save the content node. I am getting the following error

Unauthorized access to URL: /umbraco/backoffice/UmbracoApi/Content/PostSave

Below is the code for my edit.controller.js where I'm trying to use contentResourcesend.ToPublish(content, isNew, files)

angular.module("umbraco")
.controller("StagingEditController",
    function ($scope, $routeParams, $http, contentResource, notificationsService) {
        $scope.loaded = false;

        $scope.page = {};

        if ($routeParams.id === -1) {
            $scope.content = {};
            $scope.loaded = true;
        } else {
            $scope.content = {};

            contentResource.getById($routeParams.id)
                .then(function (response) {
                    $scope.content = response;
                });
        }

        $scope.preview = function(content) {
            console.log('preview', content);
        }

        $scope.save = function(content) {
            contentResource.sendToPublish(content, false, [])
                .then(function(response) {
                    console.log('sendToPublish', response);

                    notificationsService.success("Document sent for approval", "");
                }, function(err) {
                    notificationsService.success(err, "");
                });
        }
    });

Below is the code for my edit.html. Some elements are commented out while I'm attempting to put all of this together.

<div ng-controller="StagingEditController">
<umb-panel>
    <umb-header>
        <umb-content-name ng-model="content.name" />
    </umb-header>
    <div class="umb-panel-body umb-scrollable row-fluid">
        <div class="tab-content">
            <div class="umb-pane">
                <!--<iframe src="#/content/content/edit/{{content.id}}" style="width: 100%; height: 100%;"></iframe>-->
                <div class="umb-tab-buttons">
                    <div class="btn-group">
                        <a class="btn" ng-href="#/content/content/edit/{{content.id}}">Edit</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form name="contentForm"
          ng-submit="save(content)"
          novalidate
          val-form-manager>

        <umb-editor-view umb-tabs>

            <umb-editor-header menu="page.menu"
                               name="content.name"
                               tabs="content.tabs"
                               hide-icon="true"
                               hide-description="true"
                               hide-alias="true">
            </umb-editor-header>

            <umb-editor-container>

                <umb-tabs-content class="form-horizontal" view="true">
                    <umb-tab id="tab{{tab.id}}" ng-repeat="tab in content.tabs" rel="{{tab.id}}">

                        <umb-property ng-repeat="property in tab.properties" property="property">
                            <umb-editor model="property"></umb-editor>
                        </umb-property>

                    </umb-tab>
                </umb-tabs-content>

            </umb-editor-container>

            <umb-editor-footer>

                <umb-editor-footer-content-left>

                    <umb-breadcrumbs ng-if="ancestors && ancestors.length > 0"
                                     ancestors="ancestors"
                                     entity-type="content">
                    </umb-breadcrumbs>

                </umb-editor-footer-content-left>

                <umb-editor-footer-content-right>

                    <!--<umb-button ng-if="page.listViewPath"
                                type="link"
                                href="#{{page.listViewPath}}"
                                label="Return to list"
                                label-key="buttons_returnToList">
                    </umb-button>-->

                    <umb-button ng-if="!page.isNew && content.allowPreview"
                                type="button"
                                action="preview(content)"
                                label="Preview page"
                                label-key="buttons_showPage">
                    </umb-button>

                    <!--<umb-button-group ng-if="defaultButton"
                                          default-button="defaultButton"
                                          sub-buttons="subButtons"
                                          state="page.buttonGroupState"
                                          direction="up"
                                          float="right">
                    </umb-button-group>-->

                    <umb-button type="button"
                                action="save(content)"
                                state="page.saveButtonState"
                                button-style="success"
                                shortcut="ctrl+s"
                                label="Send to publish"
                                label-key="buttons_save">
                    </umb-button>

                </umb-editor-footer-content-right>

            </umb-editor-footer>

        </umb-editor-view>

    </form>

</umb-panel>

Hopefully someone will be able to point me in the right direction on this.

Copy Link

David Peck 687 posts 1863 karma points c-trib

Jan 31, 2017 @ 09:04

Sorry, not my area but I note that Umbraco is passing back properties that you're not.

contentEditingHelper.contentEditorPerformSave({
        statusMessage: args.statusMessage,
        saveMethod: args.saveMethod,
        scope: $scope,
        content: $scope.content,
        action: args.action
    }).then(function (data) {
        //success            
        init($scope.content);
        syncTreeNode($scope.content, data.path);

        $scope.page.buttonGroupState = "success";

        deferred.resolve(data);
    }, function (err) {
        //error
        if (err) {
            editorState.set($scope.content);
        }

        $scope.page.buttonGroupState = "error";

        deferred.reject(err);
    });

Also it is using contentEditingHelper

Copy Link

is working on a reply...

Flag this post as spam?

Edit content node inside Custom section