Pages

A webpage is a document written in a markup language (typically HTML) and accessed through the internet by way of a web browser. Ok, now that’s out of the way, here’s how to work with webpages in Dynamicweb.

In Dynamicweb, pages are used for defining the structure of your website – and generating dynamic navigation menus – and of course as containers for content from paragraphs.

Pages are created from and hierarchically nested in the content tree for your website (Figure 1.1). 

Figure 1.1 The content tree

Pages in the page tree may be marked with one or more adornments (Figure 1.2) -  which are quick ways to see if this page is affected by various page settings og functions.

Figure 1.2 Adornments in the page tree

There are two types of pages in Dynamicweb:

  • Regular pages
  • Item-based pages

This document is about regular pages – for more information on item-based pages, please see the items documentation.

Please note that item-based pages are extensions of regular pages, so to fully understand item-based pages you may still find this document useful.

Pages are created by opening the website context menu (root pages) or page context menu (subpage) and clicking New page (Figure 2.1).

Figure 2.1 Creating a page

This will open the page-type selector (Figure 2.2), from where you can select either a blank page – the default page type – or any page-items you may have created on your solution.

Figure 2.2 Selecting a page type

Whichever type you select, you will be prompted to name the page – you can rename it later if you want to – and click OK.

This will take you to an (empty) paragraph list view.

To delete, move or copy a page, right click the page in the content tree to bring up the context menu (Figure 3.1).

Figure 3.1 The right-click menu

The context menu allows you to:

  • Create a subpage under the current page
  • Show the page
  • Reload the content tree
  • Click move, copy or copy here to move or copy the page
  • Sort the pages in the tree
  • Delete the page
  • Open the page properties

An empty page (Figure 4.1) consists of:

  • A toolbar with several tabs
  • paragraph list with one or more content placeholders – here Main content, Left column 2 and Footer
  • footer with technical data for the page (ID, current template for the page, etc.).
Figure 4.1 An empty page: toolbars, a paragraph list, and a footer
  • The toolbar allows you to do a lot of stuff with pages, including basic operations like creating paragraphs, more advanced operations like setting up split tests, and so forth
  • The paragraph list lets you see the content you create on a page – paragraphs with text, attached apps, and so forth
  • The content placeholders allow you to organize content, both in the backend and in frontend

First, let’s take a look at the toolbar.

The Page ribbon-bar features a number of tabs which give you access to tools and settings for working with the page.

They are broadly categorized according to their main function - Content, Tools, Workflow, and Marketing - and are described below.

When a new page is created, you have immediate access to the content toolbar (Figure 6.1).

Figure 6.1 The content tab

With the content tab, you can:

  • Create new paragraphs and add global elements (paragraphs) to the page – read about global paragraphs here
  • Click Show page to open the page in frontend
  • Set the publish state for the page – PublishedHide in menu or Unpublished. 
    • By default, newly created pages are published on your website. Unpublished pages are automatically removed from the sitemap.
  • Go to frontend editing (see below)
  • Open the page properties

If your website has more than one language layer, you also have access to the language layer button, which allows you to switch between your master website and your language layers.

From the content toolbar, you can also access the tools, workflows and marketing tabs.

Frontend editing allows you to edit paragraph content from, well, the frontend.

To use frontend editing:

  • Click the page you want to edit in the content tree
  • In the ribbon bar, click the frontend editing button

This will open the page in frontend editing mode in a new tab in your browser (Figure 7.1).

Figure 7.1 Frontend editing

When in frontend editing mode, you can:

  • Move the cursor around – if the curser touches an editable field, a frame will appear around it
  • Click on a text or an empty text field to open an editor toolbar

Once you’re happy with your edits, remember to save the field content using the save buttons on the editor toolbar

Frontend editing supports draft mode. If a page exists in draft you will always get that version with the frontend editor. You will see a yellow info bar in the top of the frontend editing window when you edit a draft.

If you use item-based pages, you can edit Text, Long Text, Rich Text and HTML5 fields from frontend.

Next to the content tab is the tools tab (Figure 8.1). This tab is automatically selected when you select one or more paragraphs on the paragraph list.

Figure 8.1 The Tools tab

The tools tab allows you to:

  • Copy, Copy Here, Move, Delete and switch include state for a paragraph
  • Preview the page content
  • Use the Optimize Express tool for SEO

Clicking the Preview button opens the preview window. The preview window consists of the current page and a preview toolbar (Figure 9.1).

Figure 9.1 Previewing page content

With the preview toolbar, you can:

  • View the page as a particular personalization profile – read about personalization here
  • View the page using a particular resolution
  • Switch between a draft and the currently published page

The Workflow tab (Figure 10.1) lets you work activate and work with the drafts and workflow tools - read more here.

Figure 10.1 The Workflow tab

From the marketing tab (Figure 11.1), you have access to the marketing tools in Dynamicweb which are relevant on the page level.

Figure 11.1 The Marketing tab

You can:

 

To access the page properties of a webpage, either right-click it in the content tree and click Properties or use the properties button on the page content tab.

You will then see the basic page properties (Figure 12.1).

Figure 12.1 The basic page properties

With the basic page properties, you can:

  • Change the name of the page
  • Fill in the metadata for the webpage:
    • Provide a title and description
    • Describe the content of the webpage using keywords (or use the suggest keywords function).
    • Use the noindex and nofollow to exclude e.g. confirmation pages from being indexed and don’t want crawlers to follow the links on the page
    • Toggle the 404 for detected robots to present a 404-page to visitors identified as robots (based on user-agent)

If you use a non-standard customized URL scheme, you can also customize the URL behavior of the webpage:

  • View the Dynamicweb auto-generated URL for the page
  • Enter a custom-URL in the Use in URL field. Illegal characters are: '+', '?', '#', '%', ':', ';', '|', '<', '>', '*' ,' '(two whitespaces) ,'""' (two doublequotes)
  • Check the Do not include URL in subpage URLs checkbox to allow URLs to be trimmed by ignoring the parent page part of the URL in the subpage URL. You can use this if you don´t want the parent page name in the URL for the subpage, e.g.www.yourdomain.dk/Frontpage/subpage.aspx is changed to www.yourdomain.dk/subpage.aspx
  • If your solution runs in Integrated Pipeline mode, you can specify an Exact URL for this page – e.g. without an extension or with a different extension, a different name, a specific path etc. The content in this field overrules the whole URL (after yourdomain.dk/) for the current page. It does not have an effect on the subpage URLs. You can e.g. name your page contactproducts.php or feeds/googleshopping.xml

Most search engines no longer use keywords. For those that do, we recommend you use a maximum of 13 keywords, and put the most important words first.

When editing the page properties, you have access to a toolbar with several tabs – of which the menu tab (Figure 13.1] is the first. 

Figure 13.1 The Menu tab

From the menu tab, you can:

  • Open the page by clicking the Show button
  • Customize webpage accessibility options (some of these must then be implemented in your navigation XSLTs):
    • The Clickable, Show in breadcrumb trail, Display ‘last update’, Show in searches, and Show in sitemap checkboxes
    • The Hide for phones/tablets/desktops are primarily supported for legacy reasons
  • Set the publish state for the page – Published, Hide in menu or Unpublished. By default, newly created pages are published on your website. Unpublished pages are automatically removed from the sitemap.

If you have more than one website language on your solution, you can switch between language layers using the languages button.

Next you have the Options tab (Figure 14.1).

Figure 14.1 The Options-tab

From the options tab, you can set a publication period activation date and deactivation date – the page will only be published during that time span.

The end date year can be set to never if you want to page to remain published indefinitely.

You can also open the Navigation dialog ({figueref}).

Figure 14.2 The navigation dialog

From here you can:

  • Specify a navigation tag for the page - this tag will be available to you in frontend for e.g. rendering custom navigations. This is supported mainly for legacy reasons, so consider using items to extend page properties instead
  • Enable and configure Ecommerce navigation, which renders a configurable navigation structure on a page with a product catalog 

Don't forget to add a corresponding dwnavigation placeholder to your master file, and apply one of the ecom navigation xslts located in Files/Templates/Navigation:

<ul class="dwnavigation" id="leftnav" settings="startlevel:1;endlevel:4;template:LeftNavigationEcom.xslt;"></ul>

The advanced tab (Figure 15.1) contains a lot of settings for, well, advanced use – most often controlling page behavior in relation to other parts of Dynamicweb, such as content personalization and website language layers.

Figure 15.1 The Advanced-tab

From the advanced tab, you can:

  • Click Cache to access the caching settings for the page. You can specify how long the page should be cached for, and specify if you want to cache the content (default), the entire page, or want no caching of the page at all
  • Click Shortcut to open a dialog from which you can specify an external or internal link. If linking internally, you can either redirect users to the page you link to, or let users stay on their current page but show them the content from the linked page.
  • Click permissions to access the permissions settings for the page – read more about permissions
  • Click password to add a simple password protection to a page. This may be useful for scenarios where you don’t want to use the Extranet app
  • Click path to add a virtual URL path to the page – read more about direct paths in the Customizing URLs documentation
  • Click comments to moderate page comments – read about comments & ratings here
  • Click Item type to change the page item type. The item type is not changed before you save the page.
  • Click item lists to select a named item list (item bucket) to associate with the page. A named item list is used for storing items (e.g. comment-items or form-items), without publishing them directly. Read more about named item lists here.

You can also configure the HTTPS settings for the webpage (requires a SLL Certificate) :

  • Default allows visitors to use both HTTP & HTTPS
  • Force SSL forces a 301 redirect to HTTPS
  • Un-force SSL forces a 301 redirect to HTTP

The HTTPS settings for a page allow you to override the website-wide HTTPS settings.

With the workflow dropdown, you can select a workflow to use for this webpage – read more about workflows here.

The language management settings allow you to lock language versions of the page on all language layers and to restore language layer versions of the page to match the master page using the languages button – read more about working with language layers.

Changing item types

If you change the item type of a page, all item content is lost. This is irreversible.

You can change from an item based page/paragraph to an ordinary page/paragraph by selecting "Nothing selected" in the Item type dropdown, unless disable standard paragraph and/or Disable standard page is selected in Settings > Editing >  Interface settings.

You can change from an existing ordinary page/paragraph to item based page or paragraph without losing existing content.

Finally you have access to the page layout tab (Figure 16.1).

Figure 16.1 The Layout-tab

From the layout tab, you can:

  • Select a page layout for the page. The available layouts in the dropdown depends on the overall design you have selected under the Layout tab for your website. Read more about layouts in the Designs & Layouts article. You can make subpages inherit this layout by checking the Inherit to subpages checkbox.
  • Select device layouts to use when the page is visited by users using a phone or a tablet.

Additionally, you can select a custom content type for the page using the content type dropdown menu. This allows you to publish data in other text-based formats than HTML, such as JSON or XML.

This may be used to e.g. add autocomplete to your Ecommerce search, or for setting up a Google Merchant product feed in Dynamicweb.

Dynamicweb ships with the content types listed in the dropdown in Figure 16.2), but you can add custom content types with the plus-icon.

Figure 16.2 Selecting a custom content type

You can generate a PDF from any page in Dynamicweb by adding ‘pdf=true’ (as either ‘?pdf=true’ or ‘&pdf=true’) to the page URL.

The default pdf-size can be set in Settings > System > Solution settings > Pdf – but is can be overruled by query string parameters.

The following query string parameters can be used to control the pdf-generation process:

Parameter

Effect

&filename=YourFileName.pdf

Controls the name of the file

&leftRightMargin=10

Controls the left and right margin in mm

&topBottomMargin=10

Controls the top and bottom margin in mm

&landscape=true

Set orientation to landscape instead of horizontal

&letter=true 

Changes the document size to Letter format

&pagesize=A4

Changes the format to A4

If your solution requires you to create a lot of subpages – e.g. newsletters, articles, cases, etc. – you can choose to display them in a list on the main page rather than in the content tree (Figure 18.1).

This provides you with a more user friendly way of administering content.

Figure 18.1 Showing subpages in a list

As you can see, the page with list view activated features a list-adornment, and subpages are hidden in the content tree. You can switch back to the regular paragraph list view using the toolbar.

You can also set a page-size, and search for a particular record – the search function searches through all item fields, not just the ones shown in the list. As with other lists, you can right-click the column headers to select the ones you want to diplay.

To activate subpage list view:

  • Click on the page Properties button
  • Switch to the Advanced tab
  • Check the List subpages checkbox (Figure 18.2)
Figure 18.2 Activating the subpage in a list view

Database

This is the database table associated with pages:

Page

Contains data on page content. Tree structure is defined by PageParentPageId. PageAreaId is the website a page belongs to. Permissions are defined by the XML document present in PageUserManagementPermissions. If a page is an item, the type is defined by PageItemType and data by PageItemId.

Field name Data type Length
PageId int 4
PageParentPageId int 4
PageAreaId int 4
PageSort int 4
PageMenuText nvarchar 255
PageActive bit 1
PageMouseOver nvarchar 255
PageImageMouseOver nvarchar 255
PageImageMouseOut nvarchar 255
PageImageActivePage nvarchar 255
PageTopImage nvarchar 255
PageTextAndImage bit 1
PageProtect bit 1
PagePassword nvarchar 50
PageCreatedDate datetime 8
PageUpdatedDate datetime 8
PageShowTopImage bit 1
PageStylesheet int 4
PageBackgroundImage nvarchar 255
PageTopLogoImage nvarchar 255
PageActiveFrom datetime 8
PageActiveTo datetime 8
PageShortCut nvarchar 255
PageShortCutRedirect bit 1
PagePermission nvarchar Max
PagePermissionType int 4
PagePermissionTemplate nvarchar 255
PageAllowsearch bit 1
PageShowInSitemap bit 1
PageAllowClick bit 1
PageMenuLogoImage nvarchar 255
PageFooterImage nvarchar 255
PageDescription nvarchar Max
PageKeywords nvarchar Max
PageUserCreate int 4
PageUserEdit int 4
PageRotation nvarchar 255
PageDublinCore nvarchar Max
PageShowUpdateDate bit 1
PageManager int 4
PageManageFrequence int 4
PageWorkflowId int 4
PageWorkflowState int 4
PageShowInLegend bit 1
PageShowFavorites bit 1
PageVersionParentId int 4
PageVersionNumber int 4
PageCacheMode int 4
PageCacheFrequence int 4
PageInheritId int 4
PageInheritUpdateDate datetime 8
PageInheritStatus int 4
PageApprovalType int 4
PageApprovalState int 4
PageVersionTimeStamp datetime 8
PageApprovalStep int 4
PageTopLevelIntegration bit 1
PageForIntegration bit 1
PageRotationType int 4
PageMasterPageId int 4
PageTopLogoImageAlt nvarchar 255
PageNavigation_UseEcomGroups bit 1
PageNavigationParentType nvarchar 50
PageNavigationGroupSelector nvarchar Max
PageNavigationMaxLevels nvarchar 50
PageNavigationProductPage nvarchar Max
PageNavigationShopSelector nvarchar Max
PageUserManagementPermissions nvarchar Max
PageUrlName nvarchar 50
PageHidden bit 1
PageIsTemplate bit 1
PageTemplateDescription nvarchar 255
PageMetaTitle nvarchar 255
PageCopyOf int 4
PageLayout nvarchar 255
PageDisableAutoMeta bit 1
PageMasterType int 4
PageRobots404 bit 1
PageLayoutApplyToSubPages int 4
PageNavigationTag nvarchar 255
PageLayoutPhone nvarchar 255
PageLayoutTablet nvarchar 255
PageHideForPhones bit 1
PageHideForTablets bit 1
PageHideForDesktops bit 1
PageHasExperiment bit 1
PageSSLMode int 4
PageUrlIgnoreForChildren bit 1
PageUrlUseAsWritten bit 1
PageItemType nvarchar 255
PageItemId nvarchar 255
PagePropertyItemId nvarchar 255
PageMetaCanonical nvarchar 255
PageExactUrl nvarchar 255
PageNoindex bit 1
PageNofollow bit 1
PageContentType nvarchar 50
PageCreationRules nvarchar Max
PageIsFolder bit 1
PageNavigationIncludeProducts bit 1
PageNavigationProvider nvarchar 255
PageUniqueId uniqueidentifier 16