November Happy Hour will be moved to Thursday December 5th.

CustomProperty - List<object> containing List<string>

Vote:
 

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 thisPage-edit and All-properties-edit works. 

Missing:

  • One of the properties should be a TinyMCE-editor. How?
  • How to handle a List within the List. There's some examples handling a list of custom-objects, but none handling custom-objects that includes lists.
#182449
Sep 19, 2017 13:30
Vote:
 

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. 

#182582
Edited, Sep 25, 2017 15:22
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.