Copied to clipboard

Flag this post as spam?

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


  • Manish Agrawal 25 posts 218 karma points
    Aug 31, 2017 @ 10:30
    Manish Agrawal
    0

    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.

    1. 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(); } }
  • Manish Agrawal 25 posts 218 karma points
    Aug 31, 2017 @ 10:33
    Manish Agrawal
    0
    1. 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" />
    
  • Manish Agrawal 25 posts 218 karma points
    Aug 31, 2017 @ 10:36
    Manish Agrawal
    0
    1. 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.

  • Manish Agrawal 25 posts 218 karma points
    Aug 31, 2017 @ 10:41
    Manish Agrawal
    0
    1. 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)
            })
    
  • Manish Agrawal 25 posts 218 karma points
    Aug 31, 2017 @ 10:58
    Manish Agrawal
    0
  • Manish Agrawal 25 posts 218 karma points
    Aug 31, 2017 @ 11:08
    Manish Agrawal
    100
    1. 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();
            }
    
  • Manish Agrawal 25 posts 218 karma points
    Sep 06, 2017 @ 06:45
    Manish Agrawal
    0
    1. 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.

  • Manish Agrawal 25 posts 218 karma points
    Sep 06, 2017 @ 06:50
    Manish Agrawal
    0
    1. 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;
    
        }
    
  • Manish Agrawal 25 posts 218 karma points
    Sep 06, 2017 @ 06:53
    Manish Agrawal
    0
    1. 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;
      });
      });
      
  • Manish Agrawal 25 posts 218 karma points
    Sep 06, 2017 @ 06:55
    Manish Agrawal
    0
    1. Dashboard.html

       <div ng-controller="MyApp.Home.Controller">
       <div>{{Panel}}</div>
       </div>
      
  • Manish Agrawal 25 posts 218 karma points
    Sep 06, 2017 @ 06:59
    Manish Agrawal
    0
    1. 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"
    ]
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft