Hi Martin,

If I am not wrong, you are willing for this type of example? (see below link)

https://blog.mathiaskunto.com/2012/07/14/how-to-open-those-episerver-edit-mode-selector-browser-popups-in-your-custom-properties/

Example using dojo:

https://getadigital.com/no/blogg/using-episervers-content-selector-widget-in-custom-component/

Hi Praful

I would like to do the samething as the first link in this section "How to open an EPiServer page selector popup retrieving a PageReference". But the way its implemented in the article, it too old for our solution.

The second one using dojo is not what I'm loking for.

Ok, I have some sample code build with MVC pattern. I think that will be helpful. Right?

Yes that would be useful, where can I find those?

Hi Martin,

Here is the sample code to open the page browser.

First, this is UI markup to render page browser button and clear button.

<input type="hidden" id="page-selector_Value" name="rootPage" />

<input type="text" id="page-selector_Display" name="page-selector_Display" class="episize240" disabled="disabled" />
<input id="page-selector-button"
name="page-selector-button"
class="epismallbutton"
type="button"
title="Open Navigation Pan"
onclick="EPi.CreatePageBrowserDialog('/secure/ui/CMS/edit/pagebrowser.aspx', document.getElementById('page-selector_Value').value, 'False', 'False', 'page-selector_Display', 'page-selector_Value', 'en', null, null, false);" value="..." />

<input id="resetbutton"
type="button"
value="X"
class="btn btn-danger"
onclick="Clear()" title="clear" />

And, javascript function that we are calling in onclick event:

<script type="text/javascript">
EPi.CreatePageBrowserDialog = function(url,
id,
disableCurrentPageOption,
displayWarning,
info,
value,
language,
callbackMethod,
callbackArguments) {
var completeUrl = '@EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/pagebrowser.aspx")?id=' + id + '&disablecurrentpageoption=' + disableCurrentPageOption + '&info=' + info + '&value=' + value + '&epslanguage=' + language + '&displaywarning=' + displayWarning;

var dialogArguments = window.document;
var features = { width: 440, height: 550, scrollbars: "no"};
return EPi.CreateDialog(completeUrl, callbackMethod, callbackArguments, dialogArguments, features);
}

function Clear() {
var textboxId = 'page-selector_Display';
var node = document.getElementById(textboxId);
node.value = '';
}
</script>

Of couser, most important thing is javascript references for client resources

<script src="/EPiServer/CMS/javascript/system.aspx" type="text/javascript"></script>
<script src="/EPiServer/CMS/javascript/system.js" type="text/javascript"></script>
<script src="/EPiServer/CMS/javascript/dialog.js" type="text/javascript"></script>
<script src="/Util/javascript/episerverscriptmanager.js" type="text/javascript"></script>
<script src="/EPiServer/CMS/javascript/resizewindows.js" type="text/javascript"></script>

Hi Praful

I tried your exemple and it's near what I need. What would be better is like following:

1. Having the pages/sections tree directly into my page not in a dialog
2. Beeing able to select multiple page/section and add/drag them to a a multiselect input right next to the tree.

Do you think that's possible?

Regards,

Martin Ouimet

Hey Martin,

Honestly, I never tried that. It’s a new research task for me as well.

I would like to knowthe purpose to show you pages tree list on your site, or you are doing customization inside CMS? Just wanted to know the use case.

/Praful

Good morning Praful

I'm developing a custom tool for automatic bulk conversion of pages/section/block configuration. Our CMS has more then ~300 000 pages and a major change has been done in a block having direct impact over all these pages and some configuration needs to be automaticaly changed.

These changes will not be performed at once, that's the purpose of having a tree list. The user will be able to target some parts of the web site for the changes.

If you have any tips, links or additionnal information feel free to share.

Regards,

Martin Ouimet