November Happy Hour will be moved to Thursday December 5th.
November Happy Hour will be moved to Thursday December 5th.
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: