Hi, Naz,

First of all, I would strongly suggest you upgrade to the latest version of EPiServer. It contains lots of improvements, but also bugfixes which could give you some unnecessary headache. Apart from that, EPiServer issues regular updates where you gain a lot with very little effort of updating nuget packages. If you haven't heavily started to develop features, I suggest you don't start from 7.0/7.1, but instead create a new solution in 7.5 using Visual Studio extensions. You will be most up-to-date and you can start from there.

As for having a couple of properties, if I understand correctly, I don't think you need a dojo widget, but instead a so-called local block. This means that you define a block type and instead of creating it in the assets pane and adding it to the contentarea, you define it on the page. By doing this, when you click on the property, it will open up a panel left to the assets pane where these properties would be seen.

Grab this example and see if this fits you:

[ContentType(
        GUID = "???",
        AvailableInEditMode = false
    )]
    public class ExampleLocalBlock : BlockData
    {
        [Display(
            GroupName = SystemTabNames.Content,
            Order = 30)]
        [Required]
        public virtual string Caption { get; set; }

        [Display(
            GroupName = SystemTabNames.Content,
            Order = 40)]
        [BackingType(typeof(PropertyUrl))]
        public virtual Url Info { get; set; }

        [Display(
            GroupName = SystemTabNames.Content,
            Order = 50)]
        public virtual string SomeOtherProperty { get; set; }
    }

Then on the page, you define it like this:

    [ContentType(
        GUID = "???"
    )]
    public class SomePage : PageData
    {
        [Display(
            GroupName = SystemTabNames.Content,
            Order = 200
        )]
        public virtual ExampleLocalBlock LocalBlock { get; set; }
    }

Hope this helps, but if you need a dojo widget, then I'd suggest you start with Linus's blog where he gathered all the important info: http://world.episerver.com/blogs/Linus-Ekstrom/Dates/2014/11/sample-code-to-extend-the-user-interface/.

Thanks Marija for your prompt response. My project is based on 7.1 version and I have to stick to it at the moment.

I believe I do need Dojo stuff. As block will only allow me to add a set of properties. I have to add a collection of properties instead of just set of properties.

I want to enhance the property exactly as same as Link Collection where you click open a dialogue box and can add as many links you want. A dialogue box similar to that where you can add as many entries (field 1, field2, pagereference field) as you like and save should save it back to the episerver page.

I also want to know, how should i suppose to store them in a page?
I know how to do it conventional way in episerver by using Custom property but i want to see if i can fulfil this using Dojo.

Any sampl/code would be highly appreciated.

Cheers,
Naz

Hi, Naz,

Sorry for the long answer.

You have two options as I see it:

1. Simple one - have a content area and add blocks of your type to it. That is similar to having a linkitemcollection, except there are no links, but a set of properties essentially. I've done something similar here http://www.mogul.com/en/about-mogul/blog/workaround-for-extending-the-linkitemcollection-to-support-anchors, except it shouldn't be that complex for you. Then, you need to make sure you show the editor how to use this in an easy way - by clicking "create new block" on this specific content area (and in verison 8.0, which is in pre-release, the editor wouldn't even need to choose the block type if you decorate the content area with AllowedContentTypes set to this particular block).

2. More complex one - and in this case, I don't see the need for it, would be to add a dojo widget, this blogpost might be of help: http://world.episerver.com/blogs/aleksandar-trajanovski/dates/2015/1/creating-custom-episerver-tinymce-plugin/ (although the example is related to creatnig a tinymce plugin, but you can combine that with dojo widgets for properties). 

Hope this helps!

Marija

Hi Everyone,

Thanks Marija for your response.

I have tried few things more since. I am able to run the following example in 7.5 easily with no bugs.
But I have tried this example on 7.0 and 7.1 alloy version by changing few stuff specific to 7 and 7.1 versions.

Here is the post that I am working on:-

http://quia.cf/orange/pooxy4/nph-poxy.pl/es/20/http/epideveloper.blogspot.com/2013/10/episerver-7-custom-property-combined.html

after fixing few things specific to version 7.1, I am able to run it but with a small bug. This bug with the same code does not happen on version 7.5.
The bug is, I add values and it adds them, but if if I add values 2 or 3 times, means I add the Add button 3 times, and enter key value pair, the last item never get saved into Database.

In the database, the last JSON value pair is always missed. This is a strange behaviour

Do you guys think there is something more in the script I need to change to make it work on version 7.1.

Here is my module I am using for this version.

<?xml version="1.0" encoding="utf-8"?>
<module>
<assemblies>
<!-- This adds the Alloy template assembly to the "default module" -->
<add assembly="EPiServer.Templates.Alloy" />
</assemblies>
<clientResources>
<add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>

</clientResources>

<dojoModules>
<!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
<add name="alloy" path="Scripts" />
</dojoModules>
<clientModule initializer="alloy.ModuleInitializer"></clientModule>
</module>

Did I miss anything? if anyone can put me in right direction?

Thanks so much in advance.

Cheers,
Naz 

ok after struggling a bit, I have managed to set the above example correctly but with issue of autosave remaining. I found the root cause for the bug I mentioned, but have not fixed it yet.

When I add my controls using dojo, I have two text boxes in this case and one Add button. When the cursor is placed on textbox1 and I jump onto the next one, means on change event of text box, the CMS auto saved everything. Now, I am on the next textbox, here when I type and jump onto the buttton. The auto save property does not work at all this time.This is something which is not happening on version 7.5 and the code seems to run perfectly but only on version 7.1. I have installed the sample alloy website, and update it using add on.

I have few specific queries:-

1. How do I trigger autosave when I jump onto the Add button. As it is not a textbox change event.

2. When I change anything in the js file itself, the changes never reflect unless I do a complete cache removal, compile the code, change the web.config and restart the IIS? What minimum steps are there to reflect the changes for sure?

3. How do I debug dojo easily, sounds silly questions, but i tried few things, my script like alert etc never seem to run.

4. My last questions is actually a requirement that I need to add a "..." button to the textbox and when I click on that button, it should be able to pick up the pages from CMS. like episerver pagereference, when you select in a page reference field. Tt opens up a dialog box where you can select the page you need and then the page reference should store. How do I achieve this.

Sorry for posting loads of questions.
If anyone can help please. Thanks in advance for reading my posts.

Cheers,
Naz

Hi!

See Ben McKernans blog post about how to get and enable uncompressed JavaScript files which I would say a must have for client side debugging: http://world.episerver.com/blogs/Ben-McKernan/Dates/2014/8/Uncompressed-JavaScript-for-EPiServer-76/

Thanks Linus very much, great that has answered my one of the question. will I be able to download a version for 7.1 as I am not using 7.5 at the moment?
If you or anyone can please answer my other questions:-

1. When I change anything in the js file itself that I am using with dojo, the changes never reflect unless I do a complete cache removal, compile the code, change the web.config and restart the IIS and sometime I have to refresh browser like 2 to 3 times? What minimum steps are there to reflect the changes for sure? Can you please guide?

2. How do I trigger autosave when I jump onto the Add button as it is not a textbox change event.

3. My last questions is actually a requirement that I need to add a "..." button to the textbox and when I click on that button, it should be able to pick up the pages from CMS. like episerver pagereference, when you select in a page reference field. it opens up a dialog box where you can select the page you need and then the page reference should store. How do I achieve this.I need to achieve this in a way that I have 3 text boxes and 1 add button, one of the three text box has the button to opens the window and select any of the page. 

Many thanks in advance.

Regards,
Naz

More updates:

I have managed to fix the cache problem, by disabling cache in the firefox and the auto update, I found a post for how to autosave and I will look into it.

My last question is still valid. If some one able to know please help me to get a quick start.

I need to add a "..." button to the textbox and when I click on that button, it should be able to pick up the pages from CMS. like episerver pagereference, when you select in a page reference field. it opens up a dialog box where you can select the page you need and then the page reference should store. How do I achieve this.I need to achieve this in a way that I have 3 text boxes and 1 add button. One of the three text box has the button to opens the Page selector window and select any of the page and get the value back to page.

I will appreciate a quick response.

Please if anyone can help

Cheers,
Naz