how to create custom module in cms area with peta poco

Manish Agrawal 25 posts 218 karma points

Aug 31, 2017 @ 10:30

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...

Flag this post as spam?

How to create custom module in CMS area with Peta Poco