how to create custom module in cms area with peta poco

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 10:30

How to create custom module in CMS area with Peta Poco

I have created a customized CMS application in umbraco with petapoco. I am adding all steps to create.

Create Tree Controller

[Tree("myapp", "jobs", "Home")]
[PluginController("MyApp")]
public class HomeTreeController : TreeController
{


protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
{


TreeNodeCollection nodes = new TreeNodeCollection();


if (id == "-1")
{
    foreach (Link leftLink in LinkRepository.Current.GetAll())
    {
        if (leftLink.Id == 1)
        {
            nodes.Add(CreateTreeNode(leftLink.Id + "", id, queryStrings, leftLink.Name, "icon-thumbnails", false, "/myapp/dashboard")); 
        }
        else if (leftLink.Id == 2)
        {
            nodes.Add(CreateTreeNode(leftLink.Id + "", id, queryStrings, leftLink.Name, "icon-add", false, "/myapp/create"));
        }
        else if (leftLink.Id == 3)
        {
            nodes.Add(CreateTreeNode(leftLink.Id + "", id, queryStrings, leftLink.Name, "icon-folder", false, "/myapp/draft"));
        }
    }
}


return nodes;


}


protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
{
    return new MenuItemCollection();
}
}

Copy Link

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 10:33

Trees.config

Add this line at last in trees.config.

<add initialize="true" sortOrder="0" alias="jobs" application="myapp" title="Home" iconClosed="icon-folder" iconOpen="icon-folder-open" type="MyApp.Web.Controllers.HomeTreeController, MyApp.Web" />

Copy Link

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 10:36

application.config

Add this line in application.config.

<add alias="myapp" name="My App" icon="icon-newspaper" sortOrder="0" />

You can add this in any position where you want and change the sort order accordingly.

Copy Link

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 10:41

route.js

If you want to set this is page as default in CMS then need to modify route.js.

.when('/:section', {
            templateUrl: function (rp) {
                if (rp.section.toLowerCase() === "myapp" || rp.section.toLowerCase() === "umbraco" || rp.section === "") {
                    rp.section = "myapp";
                    return '/App_Plugins/myapp/backoffice/jobs/dashboard.html';
                }
                else {
                    if (rp.section.toLowerCase() === "default") {
                        rp.section = "content";
                    }

                    rp.url = "dashboard.aspx?app=" + rp.section;
                    return 'views/common/dashboard.html';
                }
            },
            resolve: canRoute(true)
        })

Copy Link

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 10:58

Petapoco

Below post will help to create petapoco tables

https://our.umbraco.org/forum/using-umbraco-and-getting-started/87084-how-to-use-peta-poco

Copy Link

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 11:08

Database Queries

I was facing connection issues with petapoco if I was calling queries separately, so I used QueryMultiple, This is good one.

@0 is indicating parameter what you are passing in QueryMultiple after sql. you can pass multiple parameters (@0, @1, @2, .... so on).

public class Model1
{
            public int JobCount { get; set; }
    public int JobDate { get; set; }
    }

public class Model2
{
    public Guid JobId { get; set; }

    public string Title { get; set; }
}

public class AppViewModel
{
    public Model1 Model1{ get; set; }

    public List<Model2> Model2 { get; set; }
}

string sql = @"Select * from table1 where date=@0
                      Select * from table2 where date=@0";

var result = new AppViewModel();

        using (var multi = EntitiesDB.QueryMultiple(sql, 
DateTime.Now.DefaultSqlDateTime()))
        {
            result.Model1 = multi.Read<Model1>().FirstOrDefault();
            result.Model2 = multi.Read<Model2>().ToList();
        }

Copy Link

Manish Agrawal 25 posts 218 karma points

Sep 06, 2017 @ 06:45

Folders and File Structure of custom module

enter image description here

MyApp is custom module so

View path is : App_Plugins/MyApp/BackOffice/Jobs/name.html

Controller path is : App_Plugins/MyApp/BackOffice/Controllers/name.js

We will use Angular Js to call actions.

Copy Link

Manish Agrawal 25 posts 218 karma points

Sep 06, 2017 @ 06:50

API controllers

public partial class HomeController : UmbracoAuthorizedApiController

Create a API controller which will inherit UmbracoAuthorizedApiController.

[HttpGet]
    public object ShowPanel(int linkId) {

        Link link = LinkRepository.Current.GetById(linkId);

        if (link == null) return Request.CreateResponse(HttpStatusCode.NotFound);

        return link;

    }

Copy Link

Manish Agrawal 25 posts 218 karma points

Sep 06, 2017 @ 06:53

Dashboard.js

angular.module('umbraco').controller('MyApp.Dashboard.Controller', 
  function ($scope, $routeParams, $http) {


$http.get('/umbraco/backoffice/api/Home/ShowPanel').success(function 
(response) {
    $scope.Panel = response;
});
});

Copy Link

Manish Agrawal 25 posts 218 karma points

Sep 06, 2017 @ 06:55

Dashboard.html

 <div ng-controller="MyApp.Home.Controller">
 <div>{{Panel}}</div>
 </div>

Copy Link

Manish Agrawal 25 posts 218 karma points

Sep 06, 2017 @ 06:59

package.manifest

Add entry of js file in package.manifest.

 {
"javascript": [
    "~/App_Plugins/MyApp/Controllers/CreateJob.js",
    "~/App_Plugins/MyApp/Controllers/EditJob.js",
    "~/App_Plugins/MyApp/Controllers/Dashboard.js"
]
}

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

How to create custom module in CMS area with Peta Poco