UI Enhancements

Vote:
 

Hi Everyone,

I need a custom property in the CMS editor tab for any pagetypes, 

When I click on the edit section, the custom property say "Add Entries" and on clicking that button, 
I get a popup interface/dialogue window, which has few input controls takes text boxes and a page reference field.
Bascially it will be a custom dialog window to open with episerver interface and then I need them to store back to the page?
I need some suggestion as the best way to store those 3 or 4 fields value back onto CMS page too. 
I believe i need to use Dojo for this. I am no expert of Dojo and just started reading it I am using version CMS version 7.0 and 7.1
What do you think I should do or any quick help to start with? Do you have any code or sample available for similar nature?
Best regards,
Naz
#117043
Feb 10, 2015 15:42
Vote:
 

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/.

#117054
Feb 10, 2015 19:00
Vote:
 

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

#117083
Edited, Feb 11, 2015 11:32
Vote:
 

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

#117181
Feb 13, 2015 9:30
Vote:
 

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 

#117239
Feb 14, 2015 21:22
Vote:
 

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

 

#117245
Edited, Feb 15, 2015 13:29
Vote:
 

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/

#117252
Feb 16, 2015 8:55
Vote:
 

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

#117254
Edited, Feb 16, 2015 10:05
Vote:
 

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 

#117281
Edited, Feb 16, 2015 16:03
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.