is there helloworld plugin for umbraco cms - Using Umbraco And Getting Started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

0

Is there HelloWorld plugin for Umbraco CMS?

Using Umbraco And Getting Started

Umbraco 7

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

Copy Link
Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Jul 25, 2016 @ 06:34
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:

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:

Hope it helps!
Copy Link
Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Jul 25, 2016 @ 07:49
0
Oh, sorrry.

You need this line at the bottom of your helloworld.controller.js:
```
angular.module("umbraco").controller("HelloWorldController", helloWorldController);
```
Copy Link
Nguyen Dung Tri 106 posts 606 karma points

Jul 25, 2016 @ 08:00

0

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

Sincerely, Dung Tri

Copy Link
Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Jul 25, 2016 @ 08:01

0

Awesome!

Glad i could help! :)

Copy Link
Nguyen Dung Tri 106 posts 606 karma points

Jul 25, 2016 @ 08:33

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

Copy Link

Nguyen Dung Tri 106 posts 606 karma points

Jul 25, 2016 @ 09:33

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

Copy Link

Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Jul 25, 2016 @ 09:39

0

Great work!!!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Is there HelloWorld plugin for Umbraco CMS?