Blog posts by Andreas Ek2009-03-25T17:26:00.0000000Zhttps://world.optimizely.com/blogs/Andreas-Ek/Optimizely WorldjQuery and ajax page tree service<p>I needed to show the pagetree for my users and tried out several dynamic ajax based and jquery based treeviews. I liked the “dynatree” best and I want to share a simple implementation. In this case I will place the control in the public presentation. Perhaps it is more suitable to use it in a edit or admin plugin with EPiServer.</p> <p>The code mirrors the pagetree in EPiServer and shows selected pages in a result div.</p> <p>The pagetree is loaded “lazy” and requests are made via json produced by a simple aspx page.</p> <p><a href="/link/2afa7a14de95480e8fa0da7a2ba82de1.png" target="_blank"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="415" alt="image" src="/link/803c6e26d46e4226885b7755f8441365.png" width="644" border="0" /></a> </p> <p> </p> <h3>JQuery files</h3> <p>These are the jQuery-files I added to get this to work. </p> <ol> <li>jQuery 1.3.2 (core jQuery)</li> <li>jQuery UI, 1.7 (user interface)</li> <li>jquery.dynatree.js (the main treeview js)</li> <li>jquery.cookies.js (to get peristance)</li> <li>Skin to the dynatree included in the demo.</li> </ol> <p><script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery-1.3.2.min.js"></script> <br /><script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery-ui-1.7.custom.min.js"></script> <br /><script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery.cookie.js"></script> <br /><script type="text/javascript" src="/jqueryTree/Templates/Scripts/jquery.dynatree.min.js"></script> </p> <p><link type="text/css" rel="Stylesheet" href="/jqueryTree/Templates/Styles/ui-lightness/jquery-ui-1.7.custom.css" /> <br /><link type="text/css" rel="Stylesheet" href="/jqueryTree/Templates/Styles/jqueryTree.css" /> <br /><link type="text/css" rel="Stylesheet" href="/jqueryTree/Templates/Styles/DynaTreeSkin/ui.dynatree.css" /> </p> <h3> </h3> <h3>JQuery to start the tree</h3> <p>Then there is a declaration to get the tree to work against a “div” in the usercontrol.</p> <p>$(document).ready(function() { </p> <p>    $(document).find('#tree').dynatree({ <br />        title: "Root folder", <br />        rootVisible: true, <br />        autoFocus: false, <br />        persist: true, <br />        fx: { height: "toggle", duration: 200 }, <br />        initAjax: { <br />            url: "/jqueryTree/Templates/Service/jqueryTree.aspx", <br />            data: { key: "root" } <br />        }, <br />        onActivate: function(dtnode) { <br />            $(document).find('#result').append(dtnode.data.title + ' (Page ID: ' + dtnode.data.key + ')<br />'); <br />            $(document).find('#result').effect('pulsate'); <br />        }, <br />        onLazyRead: function(dtnode) { <br />            dtnode.appendAjax( <br />                      { url: "/jqueryTree/Templates/Service/jqueryTree.aspx", <br />                          data: { key: dtnode.data.key } <br />                      }); <br />        } <br />    }); <br />}); </p> <p> </p> <h3>JSON service</h3> <p>As you can see the function calls the service to get the children. The first time it will get the page root and then for each page it would get the children.</p> <p>The service is a clean and simple aspx page that gives the json result like this example:</p> <blockquote> <p>[ </p> <p>{ title: 'Recycle Bin',isLazy: false,key: '2'} , </p> <p>{ title: 'StartPage',isLazy: true,key: '3',select:true } </p> <p>]</p> </blockquote> <p>The key is the pageid to collect the underlaying children. For each click on the page node it will send the key/pageid to the service and it will respond with more children if there are any.</p>   <h3>Summary</h3> <p>Next step is to implement filtering to the pages that is returned and perhaps more intiutive icons for EPiServer page status, etc.</p> <p>But still, jQuery is the shit!</p> <p>(If anyone interested, download the project <a href="http://www.internetfabriken.se/Global/jqueryTree.zip" target="_blank">here for EPiServer 5.2.375.133</a> and VS2008)</p>2009-03-25T17:26:00.0000000ZBlog postEasy made search function for EPiServer<div class="wlWriterEditableSmartContent" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:c01f8332-3539-491a-bc0c-215ae733aac2" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px">Technorati-taggar: <a href="http://technorati.com/tags/Search" rel="tag">Search</a>,<a href="http://technorati.com/tags/PageTextIndexDB" rel="tag">PageTextIndexDB</a></div> <p>This is an easy example to find pages from a seachword into a pagedatacollection in EPiServer PageTextIndex database.</p> <p>Header for “using”:</p> <p>---</p> <p><font color="#0000ff">using System; <br />using System.Collections.Generic; <br />using System.Linq; <br />using System.Text; <br />using EPiServer; <br />using EPiServer.Core;</font></p> <p>---</p> <p>And the code to do the search in the EPiServer PageTextIndex database:</p> <p><font color="#008000">---</font></p> <p><font color="#008000">/// <summary> <br />/// Simple use of PageSearch with default value for PageID and MaxCount. <br />/// </summary> <br />/// <param name="SearchWord">The word to search for</param> <br />/// <returns>PageDataCollection</returns> <br /></font>public static PageDataCollection PageSearch(string SearchWord) <br />{ <br />    return PageSearch(SearchWord, PageReference.StartPage.ID, 100); <br />} </p> <p><font color="#008000">/// <summary> <br />/// Make a quick search to the EPiServer PageTextIndex database with this function. <br />/// </summary> <br />/// <param name="SearchWords">The word to search for</param> <br />/// <param name="PageID">Page ID of the root page to search from</param> <br />/// <param name="MaxCount">Maximum count of pages in the result</param> <br />/// <returns>PageDataCollection</returns></font> <br />public static PageDataCollection PageSearch(string SearchWord, int PageID, int MaxCount) <br />{ <br />    PageDataCollection pages = new PageDataCollection(); <br />    bool onlywholeword = false; </p> <p>    EPiServer.Core.Html.TextSearchParameters searchparam = new EPiServer.Core.Html.TextSearchParameters(SearchWord, onlywholeword); </p> <p>    if (searchparam.ContainsSearchWords) <br />    { <br />        EPiServer.Core.Html.TextSearchResults result = null; <br />        EPiServer.DataAccess.PageTextIndexDB xdb = new EPiServer.DataAccess.PageTextIndexDB(); <br />        result = xdb.SearchPages(searchparam, PageID, MaxCount); </p> <p>        List<EPiServer.Core.Html.PageRank> list = result.ToList(); <br />        foreach (EPiServer.Core.Html.PageRank pageRank in list) <br />        { <br />            EPiServer.Core.Html.TextSearchMatch match = pageRank as EPiServer.Core.Html.TextSearchMatch; <br />            if (match != null) <br />            { <br />                pages.Add(match.PageData); <br />            } <br />        } <br />    } <br />    return pages; <br />} </p> <p> </p> <p>Any other suggestion to easy search for content in EPiServer pages? It would be great!</p>2009-03-22T17:52:00.0000000ZBlog postWorkflows with EPiServer is really easy!<div class="wlWriterEditableSmartContent" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:52a2ae45-0afa-4c54-8113-1d041074d628" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px">Technorati-taggar: <a href="http://technorati.com/tags/Workflow" rel="tag">Workflow</a>,<a href="http://technorati.com/tags/WFF" rel="tag">WFF</a></div> <p>Yes, I know, this is easy. Perhaps there’s someone who likes simple tasks as well ;-)</p> <p>{EpiServer Version: 5 R2 and Visual Studio 2008}</p> <p>I’ve earlier done some side event interactions with EPiServer, eg. when saving a page and save data to an external table for handling comments to a page (in this case an article). No, I will not use XForm data because we have to present the overall comment listings for the web editor, not just this page comments.</p> <p> </p> <p>I’m going through a very simple and easy example of workflow in EPiServer here.</p> <p> </p> <p>1. Create a new project in your solution, a workflow project, eg sequential. <br /><a href="/link/ee422902717e44fc9cab164de3d17129.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="164" alt="image" src="/link/2300e2662cb8424a92d35f5485d52daf.png" width="244" border="0" /></a> <br /></p> <p>2. Define a code block in your schema, eg SendMail and then double-click it! <br /><a href="/link/bced136b6c724b5883cf72e88f0ffe10.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="172" alt="image" src="/link/0341feb7f85e433495232758626edd65.png" width="160" border="0" /></a> <br /></p> <p>3. Now, write your code for the event. <br /><a href="/link/45f9d48b73a14bdca8cf3e66b4f6462f.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="171" alt="image" src="/link/12d11228f74244199c57937aa371785b.png" width="504" border="0" /></a> <br /></p> <p>4. Compile your workflow and make a reference in your project to the new made workflow! <br /></p> <p>5. Startup EPiServer and go to admin mode and Tools, workflows. <br /><a href="/link/43973ba7ea9245ffb81ae3bde567c54b.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="149" alt="image" src="/link/2b6431571a71430ea1d7b0c1d28545d1.png" width="165" border="0" /></a> <br /></p> <p>6. Create a new definition for your workflow. <br /><a href="/link/3141b54ca61f45da8af1c6bfb34bbaae.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="335" alt="image" src="/link/cbe89e8c311944eb9001eaf961fa3b48.png" width="504" border="0" /></a> <br /></p> <p>7. Map an event in EPiServer to the defintion, eg, Page Published against a pagetype. <br /></p> <p>8. Now you’re done! Everytime a page of your pagetype is published your code will execute. </p>2009-03-21T11:03:21.7700000ZBlog post