Are there any tutorials/documentation around how to create a new grid editor for use in Umbraco 8. I've created a few for v7 but when I add them to v8 they don't work any more.
I've used things like dialogService, which I understand don't exist in v8 and have been replaced by editorService.
It isn't perfect but it works. Maybe this will help?
angular.module("umbraco").controller("webwonders.imageWithLink.controller",
function ($scope, editorService, entityResource) {
if (!$scope.control.value || $scope.control.value == undefined) {
$scope.control.value = {};
$scope.control.value.config = {};
$scope.thumbnail = '';
}
else {
// if existing scope has no image, create empty object
if ($scope.control.value.image == '' || $scope.control.value.image == undefined) {
$scope.thumbnail = '';
$scope.control.config
$scope.control.value.config = { width: 0, height: 0 };
}
else {
// if we have a image id, call information about media item using media resource
entityResource.getById($scope.control.value.imageId, "Media").then(function (ent) {
console.log(ent);
$scope.thumbnail = ent.metaData.umbracoFile.Value;
$scope.control.value.config = { width: ent.metaData.umbracoWidth.Value, height: ent.metaData.umbracoHeight.Value };
});
}
}
// Select an image
$scope.pickImage = function () {
// open the built-in mediapicker
editorService.mediaPicker({
multiPicker: false, // only allow one image to be picked
// function that is called when the dialog is closed.
// Selected item(s) will be passed in by the data object
submit: function (data) {
var selectedImage = data.selection[0];
$scope.control.value.image = selectedImage.image;
$scope.control.value.imageId = selectedImage.id;
$scope.thumbnail = selectedImage.thumbnail;
editorService.close();
},
close: function () {
editorService.close();
}
});
};
// Select a content node to link to, OR enter a URL to an external site, very similar to pickImage()
$scope.pickContent = function () {
editorService.linkPicker({
currentTarget: $scope.control.value.link,
multiPicker: false,
section: "content",
treeAlias: "content",
submit: function (data) {
$scope.control.value.link = data.target;
editorService.close();
},
close: function () {
editorService.close();
}
});
};
// Remove the selected content or entered link
$scope.onRemove = function () {
$scope.control.value.link = undefined;
};
});
Thanks for the code, I had something similar, but even though I can see the objects being saved to the model.value I can't see it persist after submission.
(function () {
"use strict";
function InfiniteEditorController($scope, editorService) {
var vm = this;
vm.submit = submit;
vm.close = close;
vm.setImageSrc = setImageSrc;
vm.removeImage = removeImage;
vm.setLinkSrc = setLinkSrc;
function removeImage() {
$scope.model.value.imageObj = null;
}
function setImageSrc() {
var mediaPickerOptions = {
multiPicker: false,
onlyImages: true,
disableFolderSelect: true,
submit: function (model) {
if (!$scope.model.value || !$scope.model.value === null) {
$scope.model.value = {};
}
$scope.model.value.imageObj = {
id: model.selection[0].id,
udi: model.selection[0].udi,
image: model.selection[0].image
};
editorService.close();
},
close: function () {
editorService.close();
}
};
editorService.mediaPicker(mediaPickerOptions);
}
function setLinkSrc() {
var contentPicker = {
section: "content",
treeAlias: "content",
multiPicker: false,
submit: function (model) {
if (!$scope.model.value || !$scope.model.value === null) {
$scope.model.value = {};
}
$scope.model.value.linkObj = {
id: model.selection[0].id,
udi: model.selection[0].udi,
name: model.selection[0].name
};
editorService.close();
},
close: function () {
editorService.close();
}
};
editorService.treePicker(contentPicker);
}
function submit() {
if ($scope.model.submit) {
$scope.model.submit($scope.model);
}
}
function close() {
if ($scope.model.close) {
$scope.model.close();
}
}
}
angular.module("umbraco").controller("My.InfiniteEditorController", InfiniteEditorController);
So what is the current behaviour? Does it set the value and is it only not visible on reload? Or if the dialog is closed the value is already invisible?
And when is submit called?
It seems after submit is called the setlinksrc method should be called?
Can yo usee that happening by adding a bunch of console logs in the start of every method?
What I've done is outputted the value {{model.value}} on my grid view so I can see what was submitted and I can't see anything I've saved via my custom editor.
Although I'm not sure if I should be setting something like control.value instead.
I've stepped through all of it and to the point where it gets to the final submit function.
function submit() {
if ($scope.model.submit) {
$scope.model.submit($scope.model);
}
}
$scope.model contains a property called value (with everything I've added). which is what I expect. When the overlay closes and returns back to the grid. I can't see any evidence of this when I output the value {{model.value}}
There is no value in model at this point, but then the model referenced here is not the whole thing, just the model of the image picker / link picker and not the model of the control as a whole.
It looks like you combined multiple examples. In the example the 2 submit functions live in their own controller. They both have their own scope. I think the model is empty because of that. If you create the controllers and refer to the correct one in the view like the example it should work.
I've managed to get it working, it turns out that while the model.value was all present and correct in the overlay, when you click submit, which calls the overlay opener controller I wasn't doing anything with that data.
function open() {
var options = {
title: "Standard Card",
view: "/App_Plugins/GridControls/Editors/standard-card.html",
submit: function (model) {
$scope.control.value = model.value;
editorService.close();
},
close: function () {
editorService.close();
},
value: !$scope.control && !$scope.control.value ? {} : $scope.control.value
};
editorService.open(options);
}
Custom Grid Editors in Umbraco 8
Hi,
Are there any tutorials/documentation around how to create a new grid editor for use in Umbraco 8. I've created a few for v7 but when I add them to v8 they don't work any more.
I've used things like dialogService, which I understand don't exist in v8 and have been replaced by editorService.
Thanks
Hi Paul,
The build-in editors are always a god place to start looking for inspiration.
The dialog/editor service is the biggest replacement. Are you running into any specifc issues that you need help with?
best, Søren
Hi,
The issue I'm facing at the moment is that the model value isn't being saved.
I'm saving my custom data to $scope.model.value, but when I submit - the value of value vanishes.
This is my controller to save a image with a url.
It isn't perfect but it works. Maybe this will help?
Hi Frans,
Thanks for the code, I had something similar, but even though I can see the objects being saved to the model.value I can't see it persist after submission.
})();
Is it not saving? Or is it not showing on reload?
At first glance I don't understand where you get your model from here
it's a parameter to the submit-method :)
Ah, was reading to fast...
So what is the current behaviour? Does it set the value and is it only not visible on reload? Or if the dialog is closed the value is already invisible?
And when is submit called? It seems after submit is called the setlinksrc method should be called?
Can yo usee that happening by adding a bunch of console logs in the start of every method?
What I've done is outputted the value {{model.value}} on my grid view so I can see what was submitted and I can't see anything I've saved via my custom editor.
Although I'm not sure if I should be setting something like control.value instead.
Did you try and add a console log in the methods to see if every method is called and has values?
I've stepped through all of it and to the point where it gets to the final submit function.
$scope.model contains a property called value (with everything I've added). which is what I expect. When the overlay closes and returns back to the grid. I can't see any evidence of this when I output the value {{model.value}}
Also to add to this, when I output the model to the grid view. I can see my added controls, but the value is set to null.
How do we set the value of the controls?
And if you log model after this line
submit: function (model) {it still has the value?Also if you log the value of $scope.model.value just before
editorService.close();is still has the value?There is no value in model at this point, but then the model referenced here is not the whole thing, just the model of the image picker / link picker and not the model of the control as a whole.
If it helps, I was using this guide to create the custom control
https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.services.editorService
It looks like you combined multiple examples. In the example the 2 submit functions live in their own controller. They both have their own scope. I think the model is empty because of that. If you create the controllers and refer to the correct one in the view like the example it should work.
Hi Frans,
I've managed to get it working, it turns out that while the model.value was all present and correct in the overlay, when you click submit, which calls the overlay opener controller I wasn't doing anything with that data.
I needed to add the line:-
Great news! I always find it hard to debug stuff like this. The only way is to console log everything and follow the path until you lose the value.
Thanks for the help BTW. I just wish there were more examples for this sort of stuff.
It helps to look at packages on github. There is a lot of useful stuff in there.
is working on a reply...