Creating a backoffice Application

In the last Chapter we build our Custom Section and bind it to our Application.

Now w'll expand our Application and bind server side code.  So you will be able to create, bind and update data.

for the backoffice application Umbarco offers AngularJs View/Controller solution.

Now I’ll show you how to add views so that your sections can do something meaningful.

 

In the pervious Section we defined our custom Section and bind it to an Application callend "MyPackage"

we did this in the TreeController Class.

 

Umbraco will look in  the "App_plugin" Folder for a Folder called "MyPackage" and Umbraco expects a predefined folder structure which looks like this.

(Important: Please Notice that the folder under backoffice have to math the same name as the Application suffixed with Tree)

 

 

In the TreeController we added the Attribue "PluginController' to our Class. Which tells Umbraco that our Application is a Plugin (for the Umbraco backoffice).

So Umbraco will route the cliend side requests to a folder in the app_plugins-folder.

 

 

The route looks like

/App_Plugins/{applicationName}/{treeAlias}/{action}/itemId

 

so in our case the routing will be

/App_Plugin/ExampleSection/myTree/edit/someiD

 

and Umbraco will search the View under

/app_plugins/MyPackage/backoffice/myTree/edit.html

 

so let’s create the Plugin.

 

under App_Plugins/MyPackage/backoffice/MyTree create 2 files

  • edit.html
  • edit.controllers.js

and under App_Plugins/MyPackage/ create a textfile

  • package.manifest

Put following code

edit.html

<div ng-controller="EventSection.editController">
    <h1>Hello World</h1>
</div>

the "ng-controller" value attribute has to be a unique name.

 

edit.controllers.js

angular.module("umbraco").controller("EventSection.editController",
    function ($scope, $routeParams, notificationsService, navigationService, assetsService, dialogService) {

    });

Notice the ...controller("EventSection.editController)". here you tell AngularJs how the corresponding view is called. As long you do not specifie something else in the package.manifest files, angular will search in the same folder with the same called html file.

 

package.manifest

{
    javascript: [
        '~/App_Plugins/MyPackage/backoffice/myTree/edit.controller.js',
    ]
}

The package.manifest tells Umbraco where to find needed files like resources, controllers, css and View fiels.

In our case we define the path to the edit.controller

 

So if you now go to the Umbraco backoffice and open you your "Example Section" and select one of your nodes you should see

 

 

angular.module("umbraco").controller("EventSection.editController",
    function ($scope, $routeParams, notificationsService, navigationService, assetsService, dialogService) {
        debugger;

        if ($routeParams.id == "1") { //edit mode
            $scope.mode = "Edit mode"
        }
        else if ($routeParams.id == "2") { // create mode
            $scope.mode = "Create mode"
        }
        else if ($routeParams.id == "3") { // maybe some other mode...
            $scope.mode = "Delete mode"
        }

    });

 

where the hell does the $routeParams.id parameter comes from ?

Remember our TreeController !

 

 

and change your edit.html file like this

<div ng-controller="EventSection.editController"
     style="margin:20px; display:block; box-sizing:border-box">
    
    <h1>Hello world</h1>
    <p ng-model="mode" ng-bind="mode"></p>

</div>

 

so here we check the passed id and bind a value to our custom $scope.mode attribute.

$scope is a AngularJs variable like it acts like a glue or container between the view and controller. Both, the view and the controller have simultan access to these variables at runtime. 

So you don't have to care to update your html view after manipulating data. Angular will handle this automatically and you will save you a much of code/time

 

If you refresh your code (you dont have to re-run the debugger) yoou should now see:

My Node 1

 

 

 

So if you are in the Umbraco backoffice and you select you custom section, Umbraco will try to load your predefined Application by the following route

/umbraco/backoffice/{pluginname}/{controller}/{action}

 

in our case the route will be

/umbraco/backoffice/ExampleSection/SettingsSectionWebApi/Index

 

Please note that we yet have to create the SettingsSectionWebApiController which will do the server side code

 

Here's the offical umbraco documentation according Controller routing

 

So let's create our Server Side Controller. create a .cs class under /YourApplication/Controllers/SettingsSectionWebApiController.cs

 

 

 

 

Author

Caglar Tasci

Beauty is more important in computing than anywhere else in technology because software is so complicated. Beauty is the ultimate defence against complexity. — David Gelernter

comments powered by Disqus