Include and Structure Content
 |
Nodes for different ways to include re-usable content from other sources such as local files, remote urls or WebPal-managed repositories.
To include content harvested from a remote URL, use wpIncludeRemoteContent. Specify the URL or a remote page and this node will render the content from that page within your chapter. Optionally, you can specify a start and end marker to avoid duplicating a site's navigation or graphical elements. For example, to
In a wpRepository you can gather a set of named html nodes that you can re-use with in other areas of the site - using the  "Include Content" command within WebPal's html editor.
|
Screen Shots
Tabbed Pane
wpIncludeRemoteContent
Insert this node in a chapter to display content from another web page or URL for re-use. This allows you to mirror foreign content without having to manually update your chapter.
Note: Be aware of copyright-restrictions by the remote content provider. Likewise, remote content is due to change, do not forget to specify an alert-email to receive notifications if this node cannot find the remote content any more.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| url | required | | specify the complete url to the remote content here, including protocol, e.g. "http://www.cbc.ca/new/more.html" |
| start-tag | optional | | to display only a segment of the remote content, specify here the HTML code just before the desired segment, e.g. "<h1>CBC News</h1>" |
| end-tag | optional | | specify the HTML code immediately following the desired content segment. |
| alert-recipient | required | | Including remote content can throw errors if the remote URL changes. Specify an email address here to receive alerts when the included content or the specified start/end markers are no longer found. |
Sample
wpRepository
This node holds a set of html nodes which are solely intended to be re-usable content "snippets", intended for re-use throughout your site. This enables you to maintain a "contact-us" paragraph with an address in only a single location while repeating it throughout the site.
This node is best inserted in a dedicated chapter with the show-in-menu attribute set to "no". Create multiple html nodes in this node, and make sure to choose distinguishable names for each html node, e.g. "main_address", "goto_services".
Nested inclusion is not possible - do not use the "Include Content" command inside a repository html node.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | enter a name for this repository |
Sub Nodes
| Name | Type | Help |
|---|
| html | wpHtml | insert as many html nodes here as needed. They may include graphics, html-code. Nested inclusion is not possible. |
Sample
wpTabbedPane
Creates a tabbed area that can be customized with images. All content will be on your page and just hide/display when its specific tab is chosen, this means all the information will be indexed by search engines.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| pane-width | optional | | Determines the width of the area that displays the content (does not include the tabs) |
| pane-height | optional | | Determines the height of the area that displays the content (does not include the tabs). If this is left blank the area with stretch/shrink depending on the content |
| lang | oneof | any, en, fr, de, es | Determines the language of this node |
| overflow | oneof | scroll, stretch | Determines what should be done is the content exceeds the limits of the dimensions specified. "Stretch" will stretch the content area and scroll will add a scroll bar to the content area. |
| pane-background-color | optional | | Determines the background colour of the area that displays the content |
| first-tab-left-margin | default | 0 | If this is greater than zero that number of pixels will be added to the left of the first tab. |
Sub Nodes
| Name | Type | Help |
|---|
| pane-background-image | wpPaneImage | This will use an image as the pane background instead of a colour |
| pane-footer-image | wpImage | This gives you the flexibility to add an image to the bottom of the pane (i.e. add a bottom border) |
| tab | wpTab | The container for each tab and its content |
Sample
wpTab
This is an instance of a tab within the Tabbed Pane node.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| display-name | optional | | This will be the name that appears on the tab. Leave this blank if the name is already on the tab image |
| tab-width | optional | | The width of the tab |
| tab-height | optional | | The height of the tab |
| padding-top | default | | Adds padding to the top of the tab's content |
| padding-left | default | | Adds padding to the left of the tab's content |
| padding-right | default | | Adds padding to the right of the tab's content |
| padding-bottom | default | | Adds padding to the bottom of the tab's content |
| tab-on-background-color | optional | | The background colour of the tab when the mouse is hovering over it |
| tab-off-background-color | optional | | The background colour of the tab when the mouse is not hovering over it |
Sub Nodes
| Name | Type | Help |
|---|
| tab-on-background-image | wpImage | The background image of the tab when the mouse is hovering over it |
| tab-off-background-color | wpImage | The background image of the tab when the mouse is not hovering over it |
| html | wpHtml | The content for the tab |
| html-code | wpRaw | Custom html content that will appear in the tab |
| agenda | wpAgenda | Allows an agenda node to appear in the tab |
| newslist | wpNewsList | Allows a newslist node to appear in the tab |
| popup-gallery | wpPopupGallery | Allows a popup-gallery node to appear in the tab |
| slideshow | wpSlideshowV5 | Allows a slideshow node to appear in the tab |
Sample
wpPaneImage
A Tabbed Pane node can contain several images, specifically, images for a repeating background and the footer of the pane.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| repeat-image | oneof | no-repeat, repeat-y, repeat-x | Determines how the pane-background-image should be displayed. |
Sample
wpTable
This node is used to format content, including: links, images and text, in a table. There are many styles that can be applied to the table; they are defined in the Style node.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | A unique name |
| lang | oneof | any, en, fr, de, es | Determines the language of this node |
| table-width | default | 100% | The width of the table |
| table-cellspacing | default | | The cellspacing for the table |
Sub Nodes
wpTableRow
This is an instance of a row within the Table node.
There are two types:
body - wraps the content in a <td> heading - wraps the content in a <th>
The use-highlight attribute is used to give a specific row a different type of styling.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| row-type | oneof | body, heading | Describes the type of row |
| use-highlight | oneof | no, yes | Determines if this row should use the highlight style |
Sub Nodes
| Name | Type | Help |
|---|
| column1 | wpHtml | The container that stores the content for the cell |
| column2 | wpHtml | The container that stores the content for the cell |
| column3 | wpHtml | The container that stores the content for the cell |
| column4 | wpHtml | The container that stores the content for the cell |
| column5 | wpHtml | The container that stores the content for the cell |
| column6 | wpHtml | The container that stores the content for the cell |
| column7 | wpHtml | The container that stores the content for the cell |
| column8 | wpHtml | The container that stores the content for the cell |
wpTableC
This node is the same as wpTable, other than it is meant to be used in a chapter rather than a design.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| show-in | oneof | main, related1, related2, related3, related4, related5 | Determines where in the design the content will appear. |
wpDataTable
This node is used to format text based content. There are many styles that can be applied to the table; they are defined in the Style node.
Inherits from:
Where to use this node
Sub Nodes
wpDataTableRow
This is an instance of a row within the Data-Table node.
There are two types:
body - wraps the content in a <td> heading - wraps the content in a <th>
The use-highlight attribute is used to give a specific row a different type of styling.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| row-type | oneof | body, heading | Describes the type of row |
| use-highlight | oneof | no, yes | Determines if this row should use the highlight style |
Sub Nodes
| Name | Type | Help |
|---|
| column1 | wpString | The container that stores the content for the cell |
| column2 | wpString | The container that stores the content for the cell |
| column3 | wpString | The container that stores the content for the cell |
| column4 | wpString | The container that stores the content for the cell |
| column5 | wpString | The container that stores the content for the cell |
| column6 | wpString | The container that stores the content for the cell |
| column7 | wpString | The container that stores the content for the cell |
| column8 | wpString | The container that stores the content for the cell |
wpDataTableC
This node is the same as wpDataTable, other than it is meant to be used in a chapter rather than a design.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| show-in | oneof | main, related1, related2, related3, related4, related5 | Determines where in the design the content will appear. |
wpDynamicContent
This node is used to format content in a dynamic way. The transition-on attribute is where it is determined how this content area will work.
transition-on
page-load: The content will change every time the page is refreshed/loaded timer: The content will change at a specified time interval.
Used with these attributes:
timer-ms
transition-action
transition-speed
manual-browse: The content will change when the user interacts with it, i.e. using a scroll bar.
Used with these attributes:
manual-browse (New options coming soon)
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | oneof | dynamic-content1, dynamic-content2, dynamic-content3, dynamic-content4, dynamic-content5 | A unique name |
| width | optional | | The width of the area |
| height | optional | | The height of the area |
| transition-on | oneof | page-load, timer, manual-browse | Determines when the content will transition, see above for more details. |
| timer-ms | default | 5000 | Time in milliseconds in which the content should rotate. (1 second = 1000 milliseconds) |
| transition-action | oneof | fade, blindX, blindY, blindZ, cover, curtainX, curtainY, fadeZoom, scrollLeft, scrollRight, scrollUp, scrollDown, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnLeft, turnRight, turnUp, turnDown, uncover, wipe, zoom | Determines how the content transitions, fade is the most popular. |
| transition-speed | default | 1000 | Time in milliseconds in how long the transition should take. (1 second = 1000 milliseconds) |
| manual-browse | oneof | horizontal-scrollbar, vertical-scrollbar | When transition-on = manual-browse here is where you would further describe how the manual browsing will work. |
Sub Nodes
wpDynamicContentImage
This is an instance of an image within the Dynamic Content node. Links and rollover effects can be added this node.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| lang | oneof | any, en, fr, de, es | Determines the language of this node |
| url | optional | | The url the image links to |
| open-new-window | oneof | no,yes | When specifying the url, here is where you decide if the link should open in a new window. |
| alt-text | optional | | When this is filled out, the alt and title attributes will be added to the image. |
Sub Nodes
| Name | Type | Help |
|---|
| image-rollover | wpImage | The image used when a mouse hovers over the current image |
wpDynamicContentC
This node is the same as wpDynamicContent, other than it is meant to be used in a chapter rather than a design.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| show-in | oneof | main, related1, related2, related3, related4, related5 | Determines where in the design the content will appear. |
wpDynamicContentImageC
This node is the same as wpDynamicContentImage, other than it is meant to be used in a chapter rather than a design.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| show-in | oneof | dynamic-content1, dynamic-content2, dynamic-content3, dynamic-content4, dynamic-content5 | Determines which dynamic-content node in the design the content will appear. |
wpDatabaseQuery
This is where the query would be setup for the default results.
Example
select-clause
name as `Company Name`, addr as `Address`, city, fax
from-clause
company
where-clause
fax != ""
This is the query that will be created out of the above example:
SELECT name as `Company Name`, addr as `Address`, city, fax FROM company WHERE fax != ""
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | optional | | A unique name |
| items-per-page | oneof | all(no paging), 10, 15, 20, 30, 40, 50 | Number of rows that will appear on each page |
| layout | oneof | table-with-header, table | Determines how the data should be displayed |
| show-number-of-results | oneof | yes, no | Determines whether the number of results should be displayed |
Sub Nodes
| Name | Type | Help |
|---|
| select-clause | wpRaw | This is where the select portion of the query is specified. Please note that the word SELECT automatically gets updated to the beginning of this text. |
| from-clause | wpRaw | This is where the FROM portion of the query is specified. Please note that the word FROM automatically gets updated to the beginning of this text. |
| where-clause | wpRaw | This is where the where portion of the query is specified. Please note that the word WHERE automatically gets updated to the beginning of this text. |
| column | wpDatabaseQueryColumn | Defines a column in the table layout |
| search-form | wpDatabaseQuerySearch | Defines a search form that can be used to filter the results. |
wpDatabaseQueryColumn
This is where the column settings would be specified.
Example (continuing from above)
Columnname = "Company Name" sortable = "yes" width = "30%"
Column name = "city" sortable = "yes" width = "10%" title = "City"
*** Please note that not all columns need to be defined here, only if the column is sortable, needs a specific width, and the column header needs to be language sensitive.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | The name of the column in the database |
| sortable | oneof | no, yes | Determines if the column can be sorted by clicking on the column header. |
| width | optional | | Determines the width of the column, if this is blank, the column will be dynamically sized by the browser. |
Sub Nodes
| Name | Type | Help |
|---|
| title | wpStringL | The label that will appear as the header for this column. |
wpDatabaseQuerySearch
Where to use this node
Sub Nodes
wpDatabaseQuerySubmit
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|
| button-caption | wpStringL | Language sensitive label for the submit button |
| button-image | wpImage | The image used for the submit button |
wpDatabaseQueryFields
Where to use this node
Sub Nodes
wpDatabaseQueryField
where-clause
ex: name = '{$name}'
Default where-clause: LOWER(name) LIKE '%{$name}%'
*** Please note name is replaced by the actual column name and {$name} represents that value posted by the user.
database-options (only for type=dropdown)
ex: SELECT id, name FROM product
*** Please note the first column will be used as the value and the second column will be used as the label.
Only one of database-options or options element should be used for type=dropdown
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name | required | | The name of the column being searched in the database |
| type | oneof | text,dropdown | The type of element used in the search form. Only text and drop-down elements are allowed. |
| display-label | oneof | left-of-input,right-of-input,inside-input,above-input,below-input | The position where the label will be displayed |
| width | optional | | The width of the search element |
Sub Nodes
| Name | Type | Help |
|---|
| label | wpStringL | The label of the search element |
| where-clause | wpRaw | The where clause used to search the column. Please note that the word WHERE automatically gets updated to the beginning of this text. |
| database-options | wpRaw | A SQL query can be entered here to populate the dropdown element. Please note that first column selected will be used as the value and the second column will be used as the label. |
| options | wpWebFormElementOptions | Used to populate the dropdown element. |
