none
WCM CQWP for view and Page Fields for EDIT RRS feed

  • Question

  • Has anyone implemented a PAGE LAYOUT in a WCM site that has Content Query webpart for display of the items (i.e. Page in the PAges library) using a EDIT MODE PANEL in DISPLAY mode and also PAGE FIELD controls in an EDIT MODEL PANEL for EDIT mode?
    Any gotchas that I need to be aware of, basically I am planning to use CQWP for DISPLAY and for PAGE edit use PAGE FIELDS controls for a WCM site.

    thanks for your inputs and help. 
    Thursday, November 6, 2008 2:24 PM

Answers

  • I get your requirements, still I don't think that the CQWP is the right thing to use for this purpose. Because you're displaying only one item, it would be an overkill to query the content for that particular page while it's already available through SPContext.Current.ListItem. If you want XSLT to do the paging for you, you could use XslCompiledTransform but then again: what can XSLT do what custom code can't? As far as I can tell, a JavaScript based solution seems the best to me. If you are not that familiar with JS, you could always do it all using custom code and then use an AJAX UpdatePanel to do the paging without postback.
    -- http://blog.mastykarz.nl
    • Marked as answer by MOSSBUDDY Monday, November 10, 2008 1:50 PM
    Saturday, November 8, 2008 1:39 PM
  • Imagine an HTML snippet of your page like:
      <div id="page"> <h1>Title</h1> <span class="date">2008-01-01</span> <p>Short description</p> <div id="body"> <p>Body paragraph 1...</p> <p>Body paragraph 2...</p> <p>Body paragraph 3...</p> ... </div> </div>
    You can clearly see there two sections: page (id="page") and body (id="body"). Depending on what you want to achieve you could do paging on either the whole page or only the body.
    Using the JavaScript you would grab the contents of the particular section. While you could do some pixel based string measuring to see how long the page is, it would be way easier to make the pages based on the number of paragraphs, ie. a page consists of no more than 2 paragraphs. Using JavaScript you would split the HTML of the given section by paragraphs. From that array you would build up pages. At the end, knowing how many pages there are, you would display the first page and the paging controls. On click the paging control would make a call to the array with pages and using JavaScript you would replace the contents of the current page with the one the visitor has requested.

    Does the description above make more sense?

    -- http://blog.mastykarz.nl
    • Marked as answer by MOSSBUDDY Monday, November 10, 2008 1:50 PM
    Sunday, November 9, 2008 11:13 AM
  • What you could do is to create a little control which would derive from Panel. The control would render its contents only when in Display Mode. The information about the current state of the form can be obtained using the SPContext.Current.FormContext.FormMode Property. If it returns SPControlMode.Display you know that you're in display mode and you should include the JavaScript on page. Otherwise (in Edit mode) you would leave the JavaScript out. Without the JavaScript included the paging functionality wouldn't be there so the content authors would see the whole content without paging.
    -- http://blog.mastykarz.nl
    • Marked as answer by MOSSBUDDY Monday, November 10, 2008 1:50 PM
    Sunday, November 9, 2008 10:13 PM

All replies

  • Why would you use Content Query Web Part for display? CQWP is made for data aggregation, in other words: displaying more than one item. Usually I use edti controls wrapped in an EditPanel (visible in the Edit Mode only) and SharePoint:FieldValue controls which are responsible for displaying the content of a particular page. Recently I have created a tool called Imtech Fields Explorer which automatically generates such Page Layouts for you.
    Content Query Web Part isn't simply made to display the contents of the current Publishing Page.

    -- http://blog.mastykarz.nl
    Friday, November 7, 2008 7:30 AM
  • Thank you Waldek, the reason for using CQWP is basically (I am sure you remember the requirement that you replied me for PAGING).
    Basically this is an article page and on this article page the content author would be adding the contents, and in display mode the content should be displayed with Paging.
    So instead of building any custom control, I thought of using 2 editmode panels, one for edit mode with out of the box field controls and one for display mode that will host the CQWP with custom XSLT for paging.
    So basically the CQWP will filter and display only that article (thru filter criteria) and the XSLT should create Paging. The paging is complex as it is not in one single control it is on the entire content (so a page can have only lines that fit on X height and rest all is carried to the next page).

    I am kind of really stuck with this problem and trying to find what could be the best solution.

    ANY INPUTS?
    Friday, November 7, 2008 8:33 PM
  • I get your requirements, still I don't think that the CQWP is the right thing to use for this purpose. Because you're displaying only one item, it would be an overkill to query the content for that particular page while it's already available through SPContext.Current.ListItem. If you want XSLT to do the paging for you, you could use XslCompiledTransform but then again: what can XSLT do what custom code can't? As far as I can tell, a JavaScript based solution seems the best to me. If you are not that familiar with JS, you could always do it all using custom code and then use an AJAX UpdatePanel to do the paging without postback.
    -- http://blog.mastykarz.nl
    • Marked as answer by MOSSBUDDY Monday, November 10, 2008 1:50 PM
    Saturday, November 8, 2008 1:39 PM
  • Thanks for the reply Waldek, appreciate it.
    Can you please let me know how this can be done using JS? I am absolutely fine with doing either the JS way or custom control way, no problem. But I am not completely aware or not able to visualize how the solution this should be coded, following are some of the pseudo steps:

    1. Create custom content type for Article Page related fields (basically Author, Date, ByLine, Summary, Image, Details).
    2. Create a Page Layout using above content type.
    3. Add a edit mode panel (for EDIT MODE) and add all the Page Fields (out of the box controlsfor Author, Date, ByLine, Summary, Image, Details fields).
    4. NOT QUITE SURE ABOUT THE DISPLAY MODE, as this requires the paging logic which is not control based but based on the height of the article page. I know you mentioned use JS or AJAX based solution here but not sure what do I put in and how I achieve the paging logic.
    5. Create content pages out of the above Page Layouts.

    Can you please elaborate more on POINT#4, as that is really confusing me and I am not able to devise the best method.

    Thanks
    MB

     

    Saturday, November 8, 2008 11:01 PM
  • Imagine an HTML snippet of your page like:
      <div id="page"> <h1>Title</h1> <span class="date">2008-01-01</span> <p>Short description</p> <div id="body"> <p>Body paragraph 1...</p> <p>Body paragraph 2...</p> <p>Body paragraph 3...</p> ... </div> </div>
    You can clearly see there two sections: page (id="page") and body (id="body"). Depending on what you want to achieve you could do paging on either the whole page or only the body.
    Using the JavaScript you would grab the contents of the particular section. While you could do some pixel based string measuring to see how long the page is, it would be way easier to make the pages based on the number of paragraphs, ie. a page consists of no more than 2 paragraphs. Using JavaScript you would split the HTML of the given section by paragraphs. From that array you would build up pages. At the end, knowing how many pages there are, you would display the first page and the paging controls. On click the paging control would make a call to the array with pages and using JavaScript you would replace the contents of the current page with the one the visitor has requested.

    Does the description above make more sense?

    -- http://blog.mastykarz.nl
    • Marked as answer by MOSSBUDDY Monday, November 10, 2008 1:50 PM
    Sunday, November 9, 2008 11:13 AM
  • Absolutely Waldek it makes perfect sense, now the only question remains is how do we control this behaviour i.e. the Paging is only required in display mode and not in edit mode. So how would we add this logic so that in display mode the Paging logic kicks-in and in edit mode it is dorment. Waldek you have done a great job explaining the approach, I know I can't ask for more and you have been very very helpful, how about a blog on this topic that will help larger community (and who else than you, I know I could do it after your explanation but I dont want to make any mistakes :) ). Appreciate your help and will wait for your answer for EDIT mode and DISPLAY mode logic.

    Sunday, November 9, 2008 8:17 PM
  • What you could do is to create a little control which would derive from Panel. The control would render its contents only when in Display Mode. The information about the current state of the form can be obtained using the SPContext.Current.FormContext.FormMode Property. If it returns SPControlMode.Display you know that you're in display mode and you should include the JavaScript on page. Otherwise (in Edit mode) you would leave the JavaScript out. Without the JavaScript included the paging functionality wouldn't be there so the content authors would see the whole content without paging.
    -- http://blog.mastykarz.nl
    • Marked as answer by MOSSBUDDY Monday, November 10, 2008 1:50 PM
    Sunday, November 9, 2008 10:13 PM
  • Thank you Waldek, just to confirm my understanding so the user control would be responsible for including or excludint the Java script, correct?
    Basically the Java script (the script itself) will be contained inside the user control which will emit or not emit depending on the mode of the page (i.e. EDIT or DISPLAY). Thank you very much for your persistent help and guidance.
    Monday, November 10, 2008 3:26 AM
  • You got it totally right! Good luck and let me know should you face any other challenges
    -- http://blog.mastykarz.nl
    Monday, November 10, 2008 5:24 AM
  • Thank you very much Waldek, really appreciate your help.
    Is there any email-id that I can reach in case of any issues, please let me know at mossbuddy@live.com.

    Thanks a lot.
    MB
    Monday, November 10, 2008 1:47 PM
  • There is a contact box on my blog. Maybe it's a better idea to keep the thread here so that other developers can benefit of it too?
    -- http://blog.mastykarz.nl
    Monday, November 10, 2008 1:51 PM
  • Sure Waldek, I completely agree with you. Once I am into the development of this page-layout and if it at all I face any issue I will ping you (thru contact box as well as thru this thread) and if I am successful in the page layout I will post the approach on this thread.
    Definitely it is because of the community that I got this and I will make sure to return back :).

    Appreciate your help very much, thanks again.
    Monday, November 10, 2008 2:01 PM
  • I've just posted an example on how this could be achieved using JavaScript: http://blog.mastykarz.nl/paging-large-content-sharepoint-jquery/
    -- http://blog.mastykarz.nl
    Tuesday, November 11, 2008 4:14 PM
  • GREAT JOB WALDEK, YOU ROCK! YOU ARE AWESOME.
    Thanks a lot for helping on this.
    Wednesday, November 12, 2008 3:39 PM
  • You're welcome. I simply couldn't resist the challenge ;) I hope it resembles something you want to achieve in your solution. Let me know should you have any questions.
    -- http://blog.mastykarz.nl
    Wednesday, November 12, 2008 4:49 PM
  • Hi Waldek,
    Can you  please share the code with us? I think almost all the logic is going to be inside the user control (Even the JSCRIPT that you created for Paging), correct?
    Also I think this code should work with the out of the box Article Page Layout (meaning the Content Page created out of it, may be with some of the Fields like Title, Page Content, Date).

    It will really be a great help if you can share the user control and the JSCRIPT code with us.
    Thank you.

    MB
    Thursday, November 13, 2008 4:10 AM
  • Hi MB,

    All I've done was just to create the JavaScript part of the solution - what I thought would be the most challenging part. As you've correctly noticed the last thing you need to do is to wrap it in a User/Custom Control which would conditionally load the JavaScript. This is nothing more than just creating the JavaScript file, getting it deployed and referencing to it from the control using <script type="text/javascript" src="..."></script>

    As for your question about making it work with Article Page Layout. Because the solution is all about traversing HTML, it strongly depends on the layout. In other words: what might work with BlueBand doesn't necessarily have to work with another Master Page. This is why I decided to provide the client-side solution only which can be embedded in any kind of project either as a custom control, user control, web part or as a part of Master Page/Page Layout leaving it as a something you need to do on your own for your own SharePoint solution.

    -- http://blog.mastykarz.nl
    Thursday, November 13, 2008 5:36 AM
  • Thank you Waldek,
    This definitely helps, can you share the Java Script that you have created, as I am planning to add a DIV tag (a wrappe DIV tag around the Page Layout which the Java script needs to read and break into chunks, as you did). But I am really zero on java and java scripting so your script will help me a lot.
    Please share your Java script and once I implement it in my user control, I will share the solution once it is ready.

    Thanks again for all your help.
    Thursday, November 13, 2008 1:13 PM
  • Hi Waldek,
    I just looked at your blog and I found this script in your source, this is the one that is doing the paging, correct?

    <script type="text/javascript">var Imtech = {};  Imtech.Pager = function() {   this.paragraphsPerPage = 3;   this.currentPage = 1;   this.pagingControlsContainer = "#pagingControls";   this.pagingContainerPath = "#content";      this.numPages = function() {    var numPages = 0;    if (this.paragraphs != null && this.paragraphsPerPage != null) {     numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);    }        return numPages;   };      this.showPage = function(page) {    this.currentPage = page;    var html = "";    for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) {     if (i < this.paragraphs.length) {      var elem = this.paragraphs.get(i);      html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">";     }    }        $(this.pagingContainerPath).html(html);        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());   }      var renderControls = function(container, currentPage, numPages) {    var pagingControls = "Page: <ul>";    for (var i = 1; i <= numPages; i++) {     if (i != currentPage) {      pagingControls += "<li><a href='#' originalAttribute="href" originalPath="#" onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>";     } else {      pagingControls += "<li>" + i + "</li>";     }    }        pagingControls += "</ul>";        $(container).html(pagingControls);   }  }    var pager = new Imtech.Pager();   $(document).ready(function() {   pager.pagingContainer = $("#content");   pager.paragraphs = $("p", pager.pagingContainer);   pager.showPage(1);  });</script>
    Thursday, November 13, 2008 1:18 PM
  • Yep, you got it :) Don't forget to download jQuery to get it all working.
    -- http://blog.mastykarz.nl
    Thursday, November 13, 2008 6:01 PM
  • Thank you Waldek, As I have never used JQuery can you please let me know how can we include it in the Sharepoint project. Should this be added in Master PAge or Page Layout and how do we include it, also are there any installation required on the Sharepoint server (WFE)?

    Thanks
    MB
    Thursday, November 13, 2008 9:33 PM
  • First of all you need to download the library from jQuery.com. Then you need to make it available to the website by either putting it somewhere in the 12\TEMPLATE\LAYOUTS directory or uploading it to a Document Library in your Site Collection. The last thing you need to do is to include it in the page. You can do it either in the Master Page or the Page Layout: it all depends whether you're going to use it in one place only (all pages of particular Page Layout) or site-wide (Master Page). You put the reference as:

    <script type="text/javascript" src="url-to-jquery.js"></script>

    -- http://blog.mastykarz.nl
    Thursday, November 13, 2008 9:35 PM
  • Thank you Waldek, this should help.
    Thursday, November 13, 2008 10:43 PM