Umbraco back office - Creating dialog windows

This post is a work in progress, more coming soon.

Intro:

Dialog windows are an often requirement for custom datatypes in the back office of Umbraco and for beginners, they can also be quite complicated. Once you get to know how they work and when to use them, you'll find yourself created them for more clients because they're a brilliant way of allowing clients to work with your custom data in a user friendly way.

Before we start, I assume you already know how to set up a basic property editor and already have a basic one running in a test site at least. If not, and you're curious about how to start with it, I definitely suggest that you read the official Umbraco documentation to get the basic knowledge.

Getting started:

Within your Umbraco project, create a basic property editor setup as explained within the documentation link above, for this tutorial I'll call mine mypropertyeditor (generic I know).

Assuming you've created a JavaScript file for your controller, mine's called mypropertyeditor.controller.js, you'll be able to paste the below code into it:

angular.module("umbraco").controller("luke.mypropertyeditorcontroller", function ($scope, $http, $timeout, entityResource, editorState, dialogService) {
    $scope.load = function () {
        // My code goes here.
    };

    $scope.openHelp = function () {
        console.log("Clicked help");
        dialogService.open({
            template: '/App_Plugins/mypropertyeditor/dialogs/help.html',
            show: true
        });
    }

    $scope.load();
});

And then it's just a case of hooking up your button to the function you've created in the controller with the html file, so if you haven't already, create a dialogs folder within the mypropertyeditor folder and create an html file called help.html. This file will contain the following basic code to open your dialog window:

<div ng-controller="luke.mypropertyeditorcontroller">
<a href="" ng-click="openHelp()" title="Get help">
Click here to get help
</a>
</div>

On course the above html is very basic, but it's the minimum requirement in order to get a dialog/modal window to open.

Further reading:

I've created a post on how to open external or internal pages in an iframeesque modal/dialogue window within Umbraco that opens in much the same way that this dialog window does, it's definitely worth a read if you haven't already.

Also, if you want to know about what sort of parameters the dialog service can take and what's possible with it, take a look at the dialog service source code.


By Luke Alderton at 31 May 2017, 07:20 AM

Tags: Umbraco,Back Office,Angular,C#,HTML

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By dipbleds on Raspberry Pi - Bluetooth using Bluecove on Raspbian
12 Dec 2017, 21:29 PM
By Ich on Replacing the Xamarin Header/Navigation bar with a custom view/template
26 Nov 2017, 17:11 PM
By Ravi Motha on My experience at Umbraco UK Festival 2017
12 Dec 2017, 08:39 AM
By Borges on How to add a Xamarin Forms Loading Screen/Overlay
7 Nov 2017, 19:11 PM
By Rutul Mehta on Auto/Custom height on Xamarin Forms WebView for Android and iOS
4 Nov 2017, 03:15 AM
By Pablo on Xamarin MasterDetailPage has large margin/padding at top
26 Oct 2017, 15:31 PM
By faiza on Using MaryTTS or OpenMary in Java
22 Oct 2017, 12:54 PM
By Nietoperz on Using MaryTTS or OpenMary in Java
29 Sep 2017, 14:34 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development