slide1

Supported Solutions

Client success is our goal. Our Support Team delivers top-notch turnaround on support requests from any WebPal Server admin. Our enterprise clients enjoy end-user support services to achieve highest levels of adoption and workforce satisfaction.

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 imgmxnNjawqMx.png "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

NameUseValueHelp
urlrequiredspecify the complete url to the remote content here, including protocol, e.g. "http://www.cbc.ca/new/more.html"
start-tagoptionalto 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-tagoptionalspecify the HTML code immediately following the desired content segment.
alert-recipientrequiredIncluding 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

NameUseValueHelp
namerequiredenter a name for this repository

Sub Nodes

NameTypeHelp
htmlwpHtmlinsert 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

NameUseValueHelp
pane-widthoptionalDetermines the width of the area that displays the content (does not include the tabs)
pane-heightoptionalDetermines 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
langoneofany, en, fr, de, esDetermines the language of this node
overflowoneofscroll, stretchDetermines 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-coloroptionalDetermines the background colour of the area that displays the content
first-tab-left-margindefault0If this is greater than zero that number of pixels will be added to the left of the first tab.

Sub Nodes

NameTypeHelp
pane-background-imagewpPaneImageThis will use an image as the pane background instead of a colour
pane-footer-imagewpImageThis gives you the flexibility to add an image to the bottom of the pane (i.e. add a bottom border)
tabwpTabThe 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

NameUseValueHelp
display-nameoptionalThis will be the name that appears on the tab. Leave this blank if the name is already on the tab image
tab-widthoptionalThe width of the tab
tab-heightoptionalThe height of the tab
padding-topdefaultAdds padding to the top of the tab's content
padding-leftdefaultAdds padding to the left of the tab's content
padding-rightdefaultAdds padding to the right of the tab's content
padding-bottomdefaultAdds padding to the bottom of the tab's content
tab-on-background-coloroptionalThe background colour of the tab when the mouse is hovering over it
tab-off-background-coloroptionalThe background colour of the tab when the mouse is not hovering over it

Sub Nodes

NameTypeHelp
tab-on-background-imagewpImageThe background image of the tab when the mouse is hovering over it
tab-off-background-colorwpImageThe background image of the tab when the mouse is not hovering over it
htmlwpHtmlThe content for the tab
html-codewpRawCustom html content that will appear in the tab
agendawpAgendaAllows an agenda node to appear in the tab
newslistwpNewsListAllows a newslist node to appear in the tab
popup-gallerywpPopupGalleryAllows a popup-gallery node to appear in the tab
slideshowwpSlideshowV5Allows 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

NameUseValueHelp
repeat-imageoneofno-repeat, repeat-y, repeat-xDetermines 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

NameUseValueHelp
namerequiredA unique name
langoneofany, en, fr, de, esDetermines the language of this node
table-widthdefault100%The width of the table
table-cellspacingdefaultThe cellspacing for the table

Sub Nodes

NameTypeHelp
rowwpTableRowThe row within the table

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

NameUseValueHelp
row-typeoneofbody, headingDescribes the type of row
use-highlightoneofno, yesDetermines if this row should use the highlight style

Sub Nodes

NameTypeHelp
column1wpHtmlThe container that stores the content for the cell
column2wpHtmlThe container that stores the content for the cell
column3wpHtmlThe container that stores the content for the cell
column4wpHtmlThe container that stores the content for the cell
column5wpHtmlThe container that stores the content for the cell
column6wpHtmlThe container that stores the content for the cell
column7wpHtmlThe container that stores the content for the cell
column8wpHtmlThe 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

NameUseValueHelp
show-inoneofmain, related1, related2, related3, related4, related5Determines 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

NameTypeHelp
rowwpDataTableRowThe row within the table

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

NameUseValueHelp
row-typeoneofbody, headingDescribes the type of row
use-highlightoneofno, yesDetermines if this row should use the highlight style

Sub Nodes

NameTypeHelp
column1wpStringThe container that stores the content for the cell
column2wpStringThe container that stores the content for the cell
column3wpStringThe container that stores the content for the cell
column4wpStringThe container that stores the content for the cell
column5wpStringThe container that stores the content for the cell
column6wpStringThe container that stores the content for the cell
column7wpStringThe container that stores the content for the cell
column8wpStringThe 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

NameUseValueHelp
show-inoneofmain, related1, related2, related3, related4, related5Determines 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

NameUseValueHelp
nameoneofdynamic-content1, dynamic-content2, dynamic-content3, dynamic-content4, dynamic-content5A unique name
widthoptionalThe width of the area
heightoptionalThe height of the area
transition-ononeofpage-load, timer, manual-browseDetermines when the content will transition, see above for more details.
timer-msdefault5000Time in milliseconds in which the content should rotate. (1 second = 1000 milliseconds)
transition-actiononeoffade, blindX, blindY, blindZ, cover, curtainX, curtainY, fadeZoom, scrollLeft, scrollRight, scrollUp, scrollDown, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnLeft, turnRight, turnUp, turnDown, uncover, wipe, zoomDetermines how the content transitions, fade is the most popular.
transition-speeddefault1000Time in milliseconds in how long the transition should take. (1 second = 1000 milliseconds)
manual-browseoneofhorizontal-scrollbar, vertical-scrollbarWhen transition-on = manual-browse here is where you would further describe how the manual browsing will work.

Sub Nodes

NameTypeHelp
imagewpDynamicContentImageThe image used in the dynamic content.
textwpHtmlThe text used in the dynamic content.

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

NameUseValueHelp
langoneofany, en, fr, de, esDetermines the language of this node
urloptionalThe url the image links to
open-new-windowoneofno,yesWhen specifying the url, here is where you decide if the link should open in a new window.
alt-textoptionalWhen this is filled out, the alt and title attributes will be added to the image.

Sub Nodes

NameTypeHelp
image-rolloverwpImageThe 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

NameUseValueHelp
show-inoneofmain, related1, related2, related3, related4, related5Determines 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

NameUseValueHelp
show-inoneofdynamic-content1, dynamic-content2, dynamic-content3, dynamic-content4, dynamic-content5Determines 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

    NameUseValueHelp
    nameoptionalA unique name
    items-per-pageoneofall(no paging), 10, 15, 20, 30, 40, 50Number of rows that will appear on each page
    layoutoneoftable-with-header, tableDetermines how the data should be displayed
    show-number-of-resultsoneofyes, noDetermines whether the number of results should be displayed

    Sub Nodes

    NameTypeHelp
    select-clausewpRawThis 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-clausewpRawThis 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-clausewpRawThis 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.
    columnwpDatabaseQueryColumnDefines a column in the table layout
    search-formwpDatabaseQuerySearchDefines 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

    NameUseValueHelp
    namerequiredThe name of the column in the database
    sortableoneofno, yesDetermines if the column can be sorted by clicking on the column header.
    widthoptionalDetermines the width of the column, if this is blank, the column will be dynamically sized by the browser.

    Sub Nodes

    NameTypeHelp
    titlewpStringLThe label that will appear as the header for this column.

    wpDatabaseQuerySearch

    Where to use this node

    Sub Nodes

    NameTypeHelp
    submit-buttonwpDatabaseQuerySubmitDefines the submit button used in the form
    clear-buttonwpActionClearDefines the clear button used in the form
    search-fieldswpDatabaseQueryFieldsDefines the fields used in the form

    wpDatabaseQuerySubmit

    Where to use this node

    Sub Nodes

    NameTypeHelp
    button-captionwpStringLLanguage sensitive label for the submit button
    button-imagewpImageThe image used for the submit button

    wpDatabaseQueryFields

    Where to use this node

    Sub Nodes

    NameTypeHelp
    search-fieldwpDatabaseQueryFieldDefines the search fields

    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

    NameUseValueHelp
    namerequiredThe name of the column being searched in the database
    typeoneoftext,dropdownThe type of element used in the search form. Only text and drop-down elements are allowed.
    display-labeloneofleft-of-input,right-of-input,inside-input,above-input,below-inputThe position where the label will be displayed
    widthoptionalThe width of the search element

    Sub Nodes

    NameTypeHelp
    labelwpStringLThe label of the search element
    where-clausewpRawThe where clause used to search the column. Please note that the word WHERE automatically gets updated to the beginning of this text.
    database-optionswpRawA 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.
    optionswpWebFormElementOptionsUsed to populate the dropdown element.