Copied to clipboard

Flag this post as spam?

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


  • Lukaz 20 posts 161 karma points
    Sep 19, 2019 @ 13:41
    Lukaz
    0

    Umbraco 8 Custom section, trees

    Hi, I'm trying to create custom section "Event Manager" with Events, and Attendees node items with Create/Edit/Delete actions in Umbraco backoffice and need some step-by-step guidence as iIm doing this for the first time. I also need some custom tables ie. (events and attendees) and some dashboard.

    I searched forum for answers and official Umbraco docs, but need help.

    Helpful links:

    https://our.umbraco.com/Documentation/Extending/Section-Trees/trees

    https://our.umbraco.com/forum/umbraco-8/98439-create-custom-database-table-in-umbraco-8

    https://our.umbraco.com/forum/umbraco-8/95939-create-custom-tables-migration-umbracodatabase-npoco

    https://our.umbraco.com/forum/developing-packages/97123-insertupdate-data-to-custom-table-not-work

    Here is what I've done so far:

    enter image description here enter image description here

    package.manifest:

    {
        "sections": [
            {
                "alias": "eventsMgr",
                "name": "Events Manager"
            }
        ],
        "dashboards": [
        {
          "alias": "eventsDashboard",
          "sections": ["eventsMgr"],
          "view": "~/App_Plugins/EventsMgr/dashboard.html"
        }
      ],
      "css": [
        "~App_Plugins/EventsMgr/css/eventsmgr.styles.css"
      ],
      "javascript": [
        "~/App_Plugins/EventsMgr/js/eventsmgr.controller.js"
      ]
    }
    

    js/eventsmgr.controller.js

    angular.module('umbraco').controller('EventsMgrController', ['$scope', 'notificationsService', function ($scope, notificationsService) {
        $scope.Name = 'Hello world';
    
    
        $scope.attendees = [];
        $scope.getGreeting = function() {
            notificationsService.success("Hello!", "It was successful");
            return this.attendees = ['test1', 'test2', 'test3'];
        }
    }]);
    

    dashboard.html

    <div ng-controller="EventsMgrController">
        <h2>Events Manager Dashboard</h2>
        <p>{{ Name }}</p>
        <button class="btn btn-primary" ng-click="getGreeting()">Greeting</button>
        <ul>
            <li ng-repeat="item in attendees"> {{ item }}</li>
        </ul>
    </div>
    

    lang/en-us.xml

    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <language alias="en" intName="English (US)" localName="English (US)" lcid="" culture="en-US">
      <area alias="sections">
        <key alias="eventsMgr">Events Manager</key>
      </area>
    </language>
    

    models/Attendee.cs

    using NPoco;
    
    namespace SCLE.Events.Models
    {
        [TableName("Attendees")]
        [PrimaryKey("Id", AutoIncrement = true)]
        public class Attendee
        {
            public int Id { get; set; }
    
            [MaxLength(20)]
            public string FirstName { get; set; }
    
            [MaxLength(20)]
            public string LastName { get; set; }
    
            [MaxLength(20)]
            public string Email { get; set; }
    
            [MaxLength(50)]
            public string Phone { get; set; }
    
            [MaxLength(200)]
            public string Company { get; set; }
    
            [MaxLength(50)]
            public string WorkDepartment { get; set; }
    
            [MaxLength(50)]
            public string Country { get; set; }
    
            [MaxLength(8)]
            public string TicketCode { get; set; }
            public bool UseOurProducts { get; set; }
            public bool Present { get; set; }
            public DateTime DateCreated { get; set; }
            public DateTime DateUpdated { get; set; }
        }
    }
    

    Controllers/EventsController.cs - here I tried to create some node trees but don't understand how. Experimenting with some online examples.

    using System.Collections.Generic;
    using System;
    using System.Text;
    
    using Umbraco.Core.Scoping;
    using Umbraco.Web.Models;
    using Umbraco.Web.Mvc;
    using Umbraco.Web.Trees;
    
    
    namespace SCLE.EventsMgr.Controllers
    {
        [PluginController("eventsMgr")]
        [Tree("eventsMgr", "alias", "Title", sortOrder: 0)]
        public class EventsController : TreeController 
        {
            protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
            {
                // check if we're rendering the root node's children
                if (id == Constants.System.Root.ToInvariantString())
                {
                    // you can get your custom nodes from anywhere, and they can represent anything... 
                    Dictionary<int, string> eventsNodes = new Dictionary<int, string>();
                    eventsNodes.Add(1, "Events");
                    eventsNodes.Add(2, "Attendees");
                    // create our node collection
                    var nodes = new TreeNodeCollection();
    
                    // loop through our favourite things and create a tree item for each one
                    foreach (var thing in eventsNodes)
                    {
                        // add each node to the tree collection using the base CreateTreeNode method
                        // it has several overloads, using here unique Id of tree item, -1 is the Id of the parent node to create, eg the root of this tree is -1 by convention - the querystring collection passed into this route - the name of the tree node -  css class of icon to display for the node - and whether the item has child nodes
                        var node = CreateTreeNode(thing.Key.ToString(), "-1", queryStrings, thing.Value, "icon-presentation", false);
                        nodes.Add(node);
    
                    }
                    return nodes;
                }
    
                // this tree doesn't support rendering more than 1 level
                throw new NotSupportedException();
            }    
    
            protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
            {
            // create a Menu Item Collection to return so people can interact with the nodes in your tree
                        var menu = new MenuItemCollection();
    
                        if (id == Constants.System.Root.ToInvariantString())
                        {
                            // root actions, perhaps users can create new items in this tree, or perhaps it's not a content tree, it might be a read only tree, or each node item might represent something entirely different...
                            // add your menu item actions or custom ActionMenuItems
                            menu.Items.Add(new CreateChildEntity(Services.TextService));
                            // add refresh menu item (note no dialog)            
                            menu.Items.Add(new RefreshNode(Services.TextService, true));
                            return menu;
                        }
                        // add a delete action to each individual item
                        menu.Items.Add<ActionDelete>(Services.TextService, true, opensDialog: true);
    
                        return menu;
            }
    
            protected override TreeNode CreateRootNode(FormDataCollection queryStrings)
            {
                var root = base.CreateRootNode(queryStrings);
                // set the icon
                root.Icon = "icon-hearts";
                // could be set to false for a custom tree with a single node.
                root.HasChildren = true;
                //url for menu
                root.MenuUrl = null;
    
                return root;
            }
        }
    }
    

    For testing porpuses accsessing database I created a web api controller under App_Code/Controllers/TestsController.cs to try it out:

    using System.Collections.Generic;
    using Umbraco.Web.WebApi;
    using System;
    using System.Text;
    
    using Umbraco.Core.Scoping;
    using Umbraco.Web.Models;
    using Umbraco.Web.Mvc;
    
    namespace SCLE.Test.Controllers
    {
        public class TestsController : UmbracoApiController
        {
    
            /// <summary>
            /// Remove the xml formatter... only support JSON!
            /// </summary>
            /// <param name="controllerContext"></param>
            protected override void Initialize(global::System.Web.Http.Controllers.HttpControllerContext controllerContext)
            {
                base.Initialize(controllerContext);
                controllerContext.Configuration.Formatters.Remove(controllerContext.Configuration.Formatters.XmlFormatter);
            }
    
            private readonly IScopeProvider _scopeProvider;
    
            public ContactsController(IScopeProvider scopeProvider)
            {
                _scopeProvider = scopeProvider ?? throw  new System.ArgumentNullException(nameof(scopeProvider));   
            }
    
            public IEnumerable<string> GetUserNames()
            {
                using (var scope = _scopeProvider.CreateScope())
                {
                    var usernames = scope.Database.Fetch<string>("SELECT userName FROM umbracoUser ORDER BY userName");
                    scope.Complete();
                    return usernames;
                }
    
            }
        }
    
    }
    

    How to move forward and achive this?

  • Mario 125 posts 769 karma points c-trib
    Sep 19, 2019 @ 22:51
    Mario
    0

    I think you should really take a look at Fluidity (https://our.umbraco.com/packages/backoffice-extensions/fluidity/)

    It creates a dashboard for you with editing forms and all the good stuff that you need.

    UPDATE: sorry it's not available for v8 yet.

  • lori ryan 118 posts 404 karma points
    Jan 08, 2020 @ 17:47
    lori ryan
    0

    Just wondering did you get your problem fixed??

  • Lukaz 20 posts 161 karma points
    Mar 02, 2020 @ 11:37
    Lukaz
    100

    I ended up with custom section which had full width dashboard and tabs. Built UI based on Umbraco Backoffice UI documentation, and create my own web api service with entity framework as ORM and custom database.

    But a few weeks ago I managed to get working custom database in Umbraco and also Custom Section with threes following some articles found on google, and official Umbarco docs.

Please Sign in or register to post replies

Write your reply to:

Draft