Take the community feedback survey now.
Take the community feedback survey now.
Okay, this is my solution. I call it Listbox and it's a mix of dojo and jQuery. I'll only show extracts of my code to clarify parts of my solution.
I created a PropertyListbox, ListboxDescriptor and a Listbox-class (much like other examples where i basicly pointed out the code to handle a IEnumerable<Listbox>). All the magic happens in my ListboxProperty.js where I use a basic template.
<div data-dojo-attach-point="listboxes" id="listboxes">
<button data-dojo-attach-point="addButton" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-event="onclick: _onAddButtonClick">Add</button>
<div data-dojo-attach-point="container" id="container">
</div>
</div>
In my postCreate I add content to the container above by looping through my IEnumerable<Listbox> and create HTML for presentation and links for Edit and Delete. This will show up at the All properties-view in EPiServer.
var listboxItem = domConstruct.create("div", {
className: "listbox-item"
});
...
...
this.container.appendChild(listboxItem);
The Add-button and Edit-link opens a dialog. Didn't manage to create and open another dojo-widget. So I build up all the HTML in JS instead. _getForm returns HTML and I also initialize a TinyMCE-editor.
_showDialog: function (title, item) {
this.dialog = new Dialog({
title: title,
dialogClass: "epi-dialog-portrait",
content: this._getForm(item),
destroyOnHide: true
});
this._initializeTinyMce();
this.connect(this.dialog, "onExecute", "_onDialogExecute");
this.connect(this.dialog, 'onHide', '_onDialogHide');
this.isShowingChildDialog = true;
this.dialog.show();
},j
Here I connect the _onDialogExecute and _onDialogHide.
_onDialogExecute: function () {
if (this.value == null) {
this.value = [];
}
var item = { json object };
this.value.push(item);
}
this.onChange(this.value);
},
In the _onDialogExecute I gather all data with jquery and create my item as a JSON-object that I push to this.value (in code above). I also execute a method that adds my new item to the presentation.
Using this.value and this.onChange does the magic when it comes to EPiServer and saving changed data. Also activates the "Publish" button i EPi.
Not the most beautiful solution. I don't like the fact that some HTML is handled in strings. I tried to create another widget for the add-/edit-form but without success.
I've tried the solution in EPi 7 and Epi 10. In the later I had problems that this.value wasn't set when entering postCreate-method. I had to move some code to _setValueAttr instead.
My customer want to handle a structure like the following. Not using blocks or a page structure in EPiServer, but all handled as a pagetype/property. The goal for me is a solution that works in EPi 7 and 10 without that much differences.
NewsPage
Header (string) )
Description (XhtmlString)
Items (List
NewsItem
ItemHeader (string))
ItemDescription (XhtmlString)
Values (List
Summary:
NewsPage contains a list of NewsItems. Each NewsItem can contain a list of strings.
In what way can I solve this? Other/better solutions are appreciated.
So far:
I've created a CustomProperty that holds a list of a NewsItems containing three simple string properties. Added a descriptor and dojo-script inspired by this. Page-edit and All-properties-edit works.
Missing: