dotCMS - Creating a Custom page (page content-type)

Question

EDIT:

My objective:

1. Create a news page template with header and footer and body.
2. The news page needs a form for a content editor to add content to with two fields: Headline and story.
3. Each news page requires its own SEO meta data (keywords / description title).
4. These stories need to be easy to find within the CMS for future editing etc etc.

What is the best way of going about this?

What I currently have is a "Page" content-type which has all the form fields I require.

To create a new news item, I currently do:

1. Go to Site Browser
2. Right-Click [myFolder]
3. Click "New" --> Page
4. Choose my page from the select box (that was the page content-type I created earlier)
5. I now see my form, fill it in and save/publish and I see it, but with the issues I expressed before.

I am pretty sure I am going about this in the wrong way, but what is the right way?

-------------

---

I am struggling to create a very basic page in dotCMS.

Here is what I want to do:

1. Create a form for a content editor to be able to add content to the page (Content-Type: Page called "myForm") DONE
2. The form contains all the default fields (seo stuff etc that comes with the Page content-type) + two extra text fields I have created (fieldA and fieldB) DONE
3. Create a container and add in the velocity variable names. DONE
4. Surround the velocity variable names in some HTML. <div>$fieldA</div> and <div>$fieldB</div> DONE
5. Create a new theme with a template.vtl file DONE

So that is all set up. I now go and create a new page in a folder via Site Browser choosing my new "Page" called "myForm" from the drop down menu. I see my form and enter my data, save and publish.

Result. I dont see any of my data. Just a blank page.

So I check the docs and see what I have missed.

There is a page explaining that I need to add in some velocity into my template.vtl that looks like this:

#if($dotPageContent && $dotPageContent.fieldA)
    <div class="row">
        #dotedit($!dotPageContent.inode,$!dotPageContent.fieldA)
    </div>
#end

#if($dotPageContent && $dotPageContent.fieldB)
    <div class="row">
        #dotedit($!dotPageContent.inode,$!dotPageContent.fieldB)
    </div>
#end

(link to dotCMS help page)

OK, so now when I check my page again, the data is indeed being displayed. But there is a problem. The HTML that is in my container does not get parsed.

E.g. <div>$fieldA</div> and <div>$fieldB</div> does not have the <div></div> tags.

So now I'm worried this is not the way to create pages.

The reason I chose the "Page" content-type was that it comes ready to go with the "Advanced Propertied" for the page like SEO meta data (which by the way all worked fine).

Can someone point out what I may have missed or perhaps a better way of going about this?

Thanks in advance.

Answer 1

If you could post your container and template code somewhere and include the links here I could help you resolve the issue for sure, but I think what might be happening is that you are confusing the Page Content Type with the Container defined Content Types.

Here is a quick explanation that might help conceptual differentiation: http://screencast.com/t/PlEXKU9glGd

What I explain in the video is that the Page Content Types are for page properties only - not content addition. Like you want a different facebook link on many of your pages, or some other special property tied to each page. To place content in a container, you use a secondary "Content" Content Type, and you add that content type to a container's code field. When a page loads, the execution happens in this order, the Page content loads, page properties and metadata are set, the page calls a template that provides the layout, the template calls containers, the containers have the code that formats the content, and then the content executes in the order that it is placed in the container by the content publisher. The Page content type is not intended to really provide any information that the front end user actually sees other than the Page Title, page url, and properties and metadata that are set "silently" in the background html of the page.

You also might find it helpful to join the dotCMS communty forum: http://dotcms.com/forum/

Hope that helps

Answer 2

In addition to my other post, I did do the test with what you were trying to to, in a test advanced template, and the template.vtl file does display the Page Content, as long as you actually edit your page properties and set, in this case, field A:

<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

#set($dotTheme = $contents.getEmptyMap())
#set($blah1 = $dotTheme.put("path", "/application/themes/one-pager/"))

#set($dotThemeLayout = $contents.getEmptyMap())
#set($blah2 = $dotThemeLayout.put("title", "Bear Mountain"))

<head>  
    #if($dotPageContent && $dotPageContent.fieldA)
        <div class="row">
            #dotedit($!dotPageContent.inode,$!dotPageContent.fieldA)
        </div>
    #end
    ##dotParse("${dotTheme.path}html_head.vtl")

</head>
#set($utilClass = $pageTitle.toLowerCase().replace(' ', '-'))

<body data-spy="scroll" data-target=".top-nav" data-offset="100">

<div class="body-wrapper">

    #dotParse("${dotTheme.path}header.vtl")

    <div class="content-wrapper" id="hotel">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2>The Lodge</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <div class="wow fadeInLeft" data-wow-delay=".8s">
                        ## Container: Default 2 (Page Content)
                        ## This is autogenerated code that cannot be changed
                        #parseContainer('5eb11b21-6b13-4fb8-a823-1de20bba56c0')
                   </div>
               </div>
               <div class="col-md-6 col-sm-12">
                    <div class="wow fadeInRight" data-wow-delay="1.2s">
                        ## Container: Default 3 (Page Content)
                        ## This is autogenerated code that cannot be changed
                        #parseContainer('f1ba7688-453c-4c0d-a214-e5ac802b8034')
                   </div>
              </div>
           </div>
       </div>
    </div>

    <div class="image-wrapper bg-image-1 hidden-xs" data-stellar-background-ratio="0.5"></div>

    <div class="content-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    ## Container: Default 1 (Page Content)
                    ## This is autogenerated code that cannot be changed
                    #parseContainer('56bd55ea-b04b-480d-9e37-5d6f9217dcc3')
               </div>
          </div>
      </div>
   </div>
    <div class="image-wrapper bg-image-2 hidden-xs" data-stellar-background-ratio="0.7"></div>
    <div class="content-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    ## Container: Default 4 (Page Content)
                    ## This is autogenerated code that cannot be changed
                    #parseContainer('a6e9652b-8183-4c09-b775-26196b09a300')
               </div>
          </div>
      </div>
   </div>
</div>

#dotParse("${dotTheme.path}footer.vtl")
<a href="http://www.dotcms.com" style="display:block;position:fixed;bottom:-175px;">Powered by Dotcms - The Leading Open Source Java Content Management System</a>

</body>
</html>

This was tested on demo.dotcms.com: U:admin@dotcms.com / P: admin