+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Fields not visible in custom layout template

Fields not visible in custom layout template

4 posts, 0 answered
  1. Sean
    Sean avatar
    2 posts
    Registered:
    18 Mar 2015
    01 May 2015
    Link to this post

    I've been working on using the custom layout template concept to provide some "draggable formatting components" for our end users to use in their layouts. For example, we want the user to have a "credit card layout" that they simply need to type in a title, content, buttons, and add an image to. Here's what I've setup:

    <div runat="server" class="sf_cols">
      <section class="template-creditCardBlock">
        <header class="creditCardTile-header sf_colsOut" data-placeholder-label="Title" runat="server">
          <h2 runat="server" class="sf_colsIn"></h2>
        </header>
     
        <div class="row creditCardTile-body">
          <div class="col-md-8">
            <div runat="server" class="body-content">
              <span class="sf_colsOut" data-placeholder-label="Image">
                <div runat="server" class="content-img sf_colsIn">
                </div>
              </span>
              <span class="sf_colsOut" data-placeholder-label="Text">
                <div runat="server" class="content-text sf_colsIn">
                </div>
              </span>
            </div>
          </div>
          <div class="col-md-4">
            <div runat="server" class="body-button sf_colsOut" data-placeholder-label="Buttons">
              <span runat="server" class="sf_colsIn"></span>
            </div>
          </div>
        </div>
      </section>
    </div>

    I can successfully register the layout component, add the layout to a page, and drop content in. When I preview the page, all of those fields are there. However, when I publish this page and view it live, only the "Title" field and "Image" fields are visible. When I look at the source code, it seems like the typical "data binding" elements are missing for the "Text" and "Buttons" fields.

    What gets weirder, is that if you click the button to live edit the page, the fields show up again, and the content is still there. As soon as I save/publish again, the fields are gone.

    By contrast, here is another custom layout widget (a simple arrow title header with a grey background block) that works just fine.

    <div runat="server" class="sf_cols">
      <section class="template-h2Block _grayBg">
        <div class="h2Block-main">
          <header class="main-header">
            <div runat="server" class="header-text sf_colsOut" data-placeholder-label="Title">
              <h2 runat="server" class="sf_colsIn"></h2>
            </div>
            <div class="header-corner"></div>
          </header>
          <div class="row">
            <div class="main-body">
              <div class="col-sm-12 sf_colsOut" data-placeholder-label="Body Text">
                <div runat="server" class="sf_colsIn body-text"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    I'm not sure of there are some "rules" for divs vs spans that I'm missing or rules for nesting areas or some naming conventions or what for this. I had submitted a ticket for this and after some delay I was told to look at the naming guidelines and that didn't really help out much. I'm hoping somebody in the community here has experienced something similar, or has some more input and can help.

     Right now I'd say about a third of our custom layout formats (including some big ones for header/footer navigation) are suffering from this problem, and we'd love to have a solution in place before we release this site.

    Thanks in advance!

  2. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    06 May 2015
    Link to this post
    Hello Sean,

    You can try with div elements only.

    More information is available in the following article:
    Guidelines for layout widgets

    I hope the information helps.

    Regards,
    Svetoslav Manchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Sean
    Sean avatar
    2 posts
    Registered:
    18 Mar 2015
    06 May 2015 in reply to Svetoslav Manchev
    Link to this post

    Greetings Svetoslav,

     

    I had been given that link as well by Telerik support and sadly I didn't find it of much use. The samples provided sort of a start, but there was no documentation about required vs optional fields and a general guideline for structure if you want to go outside of the structure in the examples.

    After a couple more discussions with support and some tweaking on some code they provided I found two issues that seemed to be affecting my success:

    1. The "customClass" and "CustomClass" class definitions that are in the samples are necessary. I only had partial success until I added those. Having read the documentation, I thought that they were just placeholders for any kind of custom styling you wanted to add to that particular element.

    2. While this may be tertiary, I wound up putting the sf_colsOut/In and CustomClass declarations before any additional styling classes I needed to add. I suspect (but can't confirm) that the parser that renders the additional markup is looking for these items first.

    3. The updated code sample I had received had contained Ids for all of the "runat=server" elements that were in place. This worked initially, but when I added a second layout control element to a page, I hit the 'ol YPOD (yellow page of death) because the controls were using static Ids at that point. Removing the id allowed the auto naming conventions to work.

    For anybody else that may run into this issue, here's the final markup that we have working on our site now:

    <div runat="server" class="sf_cols customClass">
       <section class="template-creditCardBlock">
          <header runat="server" class="sf_colsOut CustomClass creditCardTile-header" data-placeholder-label="Credit Card Title">
             <h2 runat="server" class="sf_colsIn"></h2>
          </header>
         
          <div class="row creditCardTile-body">
             <div class="col-md-8">
                <div runat="server" class="body-content">
                   <div runat="server" class="sf_colsOut CustomClass" data-placeholder-label="Credit Card Image">
                      <div runat="server" class="sf_colsIn content-img"></div>
                   </div>
     
                   <div runat="server" class="sf_colsOut CustomClass content-text" data-placeholder-label="Credit Card Text">
                      <div runat="server" class="sf_colsIn"></div>
                   </div>
                </div>
             </div>
     
             <div runat="server" class="sf_colsOut CustomClass col-md-4 body-button" data-placeholder-label="Credit Card Buttons">
                <span runat="server" class="sf_colsIn"></span>
             </div>
          </div>        
       </section>
    </div>

    Note that this works with span tags and h2 tags, in additional to the typical div tags you see in the examples.

    Hope this helps anybody else with the issue.

  4. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    11 May 2015
    Link to this post
    Hello Sean,

    Thank you for the shared final solution you have with the community.

    Regards,
    Svetoslav Manchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
4 posts, 0 answered