Our monthly Virtual Happy Hour is happening this week, Fri Feb 23!

Try our conversational search powered by Generative AI!

Howto: Display the tree list of CRM pages in a custom view


Hi Folk

I'm currently implementing a new block with a view. I would like to display the list of pages in the CRM on that new view so the user would be able to select some of these page for further processing.

Even better, if I could have a tree list of these crm pages and be able to drag and drop them into another object. To build a list of pages that needs to be processed.

Any pointer, suggestions, tips?


Edited, Mar 07, 2019 17:31

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.

Mar 07, 2019 21:57

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

Mar 08, 2019 6:14

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

Mar 08, 2019 15:27

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"
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"
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,
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 = '';

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>

Mar 09, 2019 7:08

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?


Martin Ouimet

Mar 15, 2019 20:13

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.


Mar 16, 2019 12:26

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.


Martin Ouimet

Mar 18, 2019 14:29
* 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.