Copied to clipboard

Flag this post as spam?

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


  • Nguyen Dung Tri 106 posts 606 karma points
    Jul 25, 2016 @ 03:51
    Nguyen Dung Tri
    0

    Is there HelloWorld plugin for Umbraco CMS?

    Hi Everyones,

    I would like to ask a tutorial to create a sample plugin for Umbraco CMS. It is just like a plugin that can show a HelloWord text on home page of Umbraco CMS.

    Sincerely, Tri

  • Dennis Adolfi 1082 posts 6450 karma points MVP 6x c-trib
    Jul 25, 2016 @ 06:34
    Dennis Adolfi
    4

    Hello Nguyen.

    To get you started:

    1. Create a folder in App_Plugins called HelloWorld.
    2. Create a html file in that folder called helloworld.html.
    3. Create a javascript file in that folder called helloworld.controller.js.
    4. Create a manifest file called package.manifest.

    Your plugin structure should look something like this:

    enter image description here

    In your helloworld.html, add:

    <div ng-controller="HelloWorldController">
        {{message}}
    </div>
    

    In your helloworld.controller.js, add:

    function helloWorldController($scope) {
        $scope.message = "Hello World";
    }
    

    To connect the html file and the js file together, add this in your package.manifest file:

    {
        //array of files we want to inject into the application on app_start
        javascript: [
            '~/App_Plugins/HelloWorld/helloworld.controller.js'
        ]
    }
    

    Lastly, you need to update /Config/Dashboard.config. Find the StartupDashboardSection section and in that add the following:

     <tab caption="Hello World">
          <control>~/App_Plugins/HelloWorld/helloworld.html</control>
        </tab>
    

    The result will be this in the admin welcome page:

    enter image description here

    Hope it helps!

  • Dennis Adolfi 1082 posts 6450 karma points MVP 6x c-trib
    Jul 25, 2016 @ 07:49
    Dennis Adolfi
    0

    Oh, sorrry.

    You need this line at the bottom of your helloworld.controller.js:

    angular.module("umbraco").controller("HelloWorldController", helloWorldController);
    
  • Nguyen Dung Tri 106 posts 606 karma points
    Jul 25, 2016 @ 08:00
    Nguyen Dung Tri
    0

    Thank for your feedback, Dennis Adolfi. Now I have a first understanding of how a plugin work on Umbraco CMS.

    Sincerely, Dung Tri

  • Dennis Adolfi 1082 posts 6450 karma points MVP 6x c-trib
    Jul 25, 2016 @ 08:01
    Dennis Adolfi
    0

    Awesome!

    Glad i could help! :)

  • Nguyen Dung Tri 106 posts 606 karma points
    Jul 25, 2016 @ 08:33
    Nguyen Dung Tri
    0

    Hi Dennis Adolfi,

    I'm about to pack the plugin into a zip file and try to install it via "Installed packages". But I stuck at how to add the helloworld section into "/Config/Dashboard.config"? During the installation, there must be a method to do that. Could you help me about this?

    Attachment is the sample plugin for Umbraco CMS that I have made base on your instruction.

    Sincerely,

    Dung Tri

  • Nguyen Dung Tri 106 posts 606 karma points
    Jul 25, 2016 @ 09:33
    Nguyen Dung Tri
    1

    Hi Dennis Adolfi,

    I have managed to solve the issue of adding the helloworld section into "/Config/Dashboard.config".

    Inside the package.xml, I add this section:

    <Actions>
        <Action runat="install" undo="true" alias="addDashboardSection" dashboardAlias="HelloWorld">
          <section>
            <areas>
              <area>content</area>
            </areas>
            <tab caption="Hello World">
              <control>~/App_Plugins/HelloWorld/helloworld.html</control>
            </tab>
          </section>
        </Action>
        <Action runat="install" undo="false" alias="ClientDependencyBump"/>
      </Actions>
      <Action runat="uninstall" undo="true" alias="addDashboardSection" dashboardAlias="HelloWorld">
        <section>
          <areas>
            <area>content</area>
          </areas>
          <tab caption="Hello World">
            <control>~/App_Plugins/HelloWorld/helloworld.html</control>
          </tab>
        </section>
      </Action>
    

    This section means:

    • Add a tab with caption HelloWorld to Content.
    • Add control helloworld to the tab within Content page.

    Note: The same action tag with runat="uninstall" will remove HelloWorld tag from Dashboard.config file when you delete your package from Umbraco CMS.

    For more information please read these articles:

    Umbraco add dashboard with code

    Example package.xml

    Sincerely,

    Dung Tri

  • Dennis Adolfi 1082 posts 6450 karma points MVP 6x c-trib
    Jul 25, 2016 @ 09:39
    Dennis Adolfi
    0

    Great work!!!

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

Please Sign in or register to post replies