WebGUI uses four types of assets: container assets, regular assets, SKUs and utility assets.

• Container assets: assets that contain other assets. These are assets that are placed on the site, and then other assets are added to them. An example of this is a page layout. You add a page layout to the site to create a page, then articles and other regular assets are added. Folders and Dashboards are also considered container assets.

• Regular assets: normal content applications, such as an Article, Calendar, Collaboration System, or Poll. These are the run of the mill applications used on a daily basis to add content to a page.

• SKU: SKU assets are used with WebGUI Shop. You can learn about SKU assets in the WebGUI Shop Guide.

• Utility assets: assets which are not normally used for content management in WebGUI, but have other uses within the program. Utility assets include Rich Editors, templates, and file and image assets.

Each asset in WebGUI has a common set of parameters available to help determine things like display properties and security. You can see what parameters each asset offers by clicking on the Properties, Display, Security, and Metadata tabs in the asset’s add/edit screen. The tab you are currently viewing will be highlighted in blue. For the purpose of these examples an article is used.

Properties

The Properties tab contains all the basic information you need to include in your asset. It’s the default view for Add/Edit screens.

Title: this is the title of the asset as it will appear on the page. You should always specify a title, even if you choose not to display it on the page. In areas such as the page tree, clipboard, and trash the title will still be used.

Menu Title: this is the title of the asset as it appears in the navigation. If left blank, WebGUI will set this to be the same as the asset Title.

URL: WebGUI allows you to choose your own unique URL. If you leave this field blank WebGUI will make a URL from the parent page and this asset’s title.

Description: this is the area in which you enter your asset’s content. For example, if you are adding an article to the page, the Description field is where the article’s text would be typed.

Some assets may contain additional fields, depending on its function. For example, there may be a field that allows you to upload attachments.

Display

The Display tab contains tools for controlling things such as the appearance of the title in the navigation, and the overall appearance of the asset on the page.

Hide from navigation?: if set to Yes, this will hide the asset’s title in the site’s navigation and the site map.

Open in new window?: if set to Yes, the asset will open in a new browser window when clicked from the navigation. Use this option with care. It may not work in some navigations, or if Javascript is turned off, and some systems will block this as a pop-up window.

Display the title?: if set to No, the title of the asset will not be displayed on the web page. This is helpful if you are formatting content as a number of smaller assets on the page, but want it to appear as a cohesive piece.

Style Template: this determines the overall layout and look of this asset, if it is displayed independently. If the asset is displayed as part of a Page Layout Asset, then the Page Layout Asset’s style template is used instead.

Printable Style: this sets the printable style to be something other than the WebGUI default printable style. This behaves similarly to the style template, except it is only applied when printing the page. If the page is made printable a pared-down, printer friendly version of the page is made available for printing purposes. In order for pages to be made printable in this manner, a variable must be exposed through the style template.

Cache Timeout: cache stores data that is frequently viewed for faster access; this option determines how long the asset will be cached.

Article Template: determines the layout of this particular article asset.

Some assets may contain additional templates and fields used to handle the display of the specific asset. In a container asset, there may also be an Assets to Hide field, which is a checkbox list of assets contained by the asset. You can select a checkbox next to an asset that you wish to hide on the page. This allows you to keep the asset on the site, just temporarily hide it from view. Try editing a Page Layout asset that contains some other assets to see this. You will also see another field that allows you to determine if you want to add new assets to the top or to the bottom of the page.

Security

The Security tab contains options for controlling who can view and edit asset content, as well as an option to encrypt content as it passes over the wire.

Owner: the owner of an asset is usually the asset’s creator. This person always has full viewing and editing rights. The owner can only be changed by an administrator.

Who can view?: choose a group who can view this asset. If you want both registered users and visitors to be able to view it, choose the Everyone group.

Who can edit?: determines who can edit the asset’s content. The owner always has editing rights.

Some assets will contain additional security fields. For example, assets that users can post to, like a forum, will allow you to set the group of users allowed to submit posts, and the calendar will allow you to set the group of users allowed to add events.

Metadata

Metadata allows you to attach arbitrary fields to your content for search engine friendliness, profiling, or simply to add extra display options. The standard metadata tab is shown below. To add metadata fields, use Content Profiling in the Admin Console. Once metadata fields are created, they will appear at the bottom of the Metadata tab.

Note: The Metadata tab fields are consistent amongst all assets. You may be referred back to this section for reference in other chapters.

Asset ID: this is a unique identifier given to this asset when it is saved; this field can not be edited.

Class Name: this indicates the asset's class, or asset type.

Keywords: keywords for this asset may be entered in the Keywords field. These keywords will be placed in the search index, and added as the keywords metatag. Do not separate keywords with commas, simply list them. Multi-word keyword phrases can be entered by enclosing the phrase in quotation marks.

Summary: enter a short description of the asset. This can be useful if you want a “teaser” for an article to appear along with a link to the article.

Extra<head>elements(tags): these tags will be added to the <head> section of each page on which the asset appears.

Make package?: if set to Yes, this asset can be made part of a package to be reused throughout the site, or exported for use in another WebGUI site. For example, a package of a page layout asset can be made; remember, a page layout is a container asset which contains the assets added to that page. When this package is distributed to another page, the page layout, along with all the assets and content displayed in the page layout, are placed in the new location.

Packages are great if you have groups of assets you want to use more than once. For example, say you have a number of SQL Report assets along with some custom templates for displaying them on the site. By creating a package of the assets you can export all of the assets and templates, email them to another WebGUI user, and that user can import them and use them on a different WebGUI site. This is also a common way to share site themes/styles.

Make prototype?: if set to Yes, this asset will be turned into a prototype. This means Display and Security settings, such as “Who can view?'” and “Who can edit?”, are saved. The prototype is added to the New Content menu and then treated like any other asset. Users can then add the prototype without having to update the settings.

Use prototypes if you know you will be using assets repeatedly with the same configurations. For example, if you have a collaboration system that has a custom template applied used repeatedly throughout the site, make a prototype of it. Then, users can just select the prototype from the New Content menu, and won't have to select the template from the display tab.

Make this asset exportable?: if set to Yes, this asset can be exported as a static HTML export. All assets in an asset's lineage must be exportable, all the way back to root, in order for the current asset to be exported. If an asset is not made exportable, it will be skipped in the export process.

Prepend URL from parent?: if set to Yes, the URL of an asset's parent will always prepend the URL of the current asset.

Save, Apply, Cancel

In the top right hand corner of every Add or Edit asset screen are three buttons: save, apply, and cancel. You will notice that the save and apply buttons are green. Every “forward” action in WebGUI has the green color associated with it. The cancel button is “red” because it essentially negates what you have done.

The save and apply buttons have a similar purpose: they both save your content. If you click the save button, you will be taken out of the add/edit screen and returned to the site. If you click the apply button, your changes will be saved, but you will remain in the edit screen. You may want to use the apply button if you are working on a lengthy piece of content. It will allow you to save frequently, yet remain in the working screen.

Page Layouts

All pages in WebGUI are related to other pages, so when you add a new page it will become a subpage (child) of the page you are currently on (parent).

Therefore, if you are on the home page, adding a new page will add the page to the main navigation.

However, if you are already on another page, and you add a page, it will become a child of that page.

Remember that to add a new page to the main navigation, add the page from the homepage. To add a page as a subpage, add it from the parent page.

Add a New Page to the Site

1. Make sure the New Content tab is open in the Admin Bar by clicking on “New Content.”

2. Under the New Content tab, click on “Page Layout.” The “Add Page Layout” screen will open.
   
   

3. Give your new page a title by entering a title in the “Title” box near the top of the screen. You can leave the Menu Title and URL fields blank and WebGUI will fill them in for you.

4. In the “Description” field you can enter content that will be displayed as static content at the top of this page, regardless of any other content placed on the page.

5. In the Display tab you can set display options for this page.

1.  

   1. The “Hide from navigation?” field determines if this page's menu title will appear in the site navigation.

   2. The “Open in new window?” field determines if this page will be opened in a new browser window..

   3. The “Display the title?” field determines if the title of this page will be displayed on the body of the page to the user.

   4. The “Style Template” field allows you to select a style to wrap this page in from the dropdown menu. A page layout's style will override the style of any regular asset that is placed on it.

   5. The “Printable Style” is the style template used for the printable version of this page.

   6. The “Page Layout Template” determines the placement of regular assets on the page. This will be represented by some shaded gray boxes.

   7. The “Add New Assets” field allows you to determine if you want new assets to be added to the page at the bottom of the page or at the top of the page. Assets can then be dragged and dropped into new positions.

   8. The “Assets to Hide” field contains a checkbox list of assets this page contains. You can check an asset you want hidden from view. When you are ready for it to display again, simply uncheck it. This field is only visible on container assets (Page Layouts, Folders, etc).

2.  

   The Security tab allows you to set viewing and editing privileges for this page.

    

1. 1. The “Owner” will always have full editing and viewing privileges for this asset.

   2. The “Who can view?” fields allows you to select the group of users allowed to view content displayed on this page.

   3. The “Who can edit?” field determines the group of users allowed to edit this page layout assets.

7.  Metadata tab is the standard metadata tab common amongst most assets.

8. Click “save” at the top of the screen. This will bring you back to the new page you just added.



Your new page will automatically be added to your website navigation.

Edit Page Layout

Editing the page layout will allow you to determine the overall position of assets on the page. You can arrange assets to align vertically, horizontally, two on top/one on the bottom, and so on.

1. The first toolbar at the top of the page is for editing your page layout. On this toolbar, click “Edit.” This will open a new screen titled “Edit Page Layout.”

Note: You can tell what kind of asset you are working with by hovering your mouse over the class icon, which is the icon at the far left hand side of the asset toolbar. A little tooltip will display telling you what the asset is.

2. At the top of the page you will notice a number of tabs; click on the one labeled “Display.”

3. Go to “Page Layout Template,” and click on the drop-down menu.

4. Choose a Page Layout template. “Side By Side”, for example, will give you two columns which are side by side of each other. The example on this page shows the template News.

5. Once you have chosen your page layout template, click “save”, and the page is formatted.

6. When you return to your web page, you will see some gray areas where your content will go. These indicate the asset placement on the template you chose.

Note: You can learn about adding images to pages and assets in the Add Images chapter near the end of this book.

Add Content to the Page

Content can be added to the page with the assets contained in the New Content menu of the Admin Console. For the purpose of this basic example, an article will be used.

1. Select an asset from the New Content menu of the admin bar. In this case, an article.

2. The “Add Article” screen will open.

1. Add a title for your article in the “Title” field.

2. Enter the content for your article in the “Description” field.

3. Click “save” at the top of the screen.

4. Your new content appears on the page.

Note:
If you have a long document to publish on your site, consider splitting it up into a series of smaller articles. Publish text as an Article and images using File Pile or the Image asset. In the Display tab, choose to hide the assets' titles to make multiple assets appear cohesive.

This is useful for three reasons:
1. You can easily rearrange content with the drag and drop feature.
2. You can easily edit a single image or article without affecting the entire piece.
3. Each asset has its own URL, making it possible to hyperlink to a specific location in the document.

Use the Rich Editor

As you work in WebGUI, you will notice that some asset screens contain a light gray box at the bottom containing a number of icons. The icons may vary slightly depending on what asset you are working under. This gray box is the Rich Editor, which allows you to work with your text in a similar manner to most word processing programs. The title of each icon can be seen by hovering your mouse above it. Many of the icons you will already recognize; however, there are a few that might be new to you.

Note: The Rich Editor's configuration can be changed through the New Content menu. In the Utilities tab of the menu you will see Rich Edit. Select this to display a list of configurable options for displaying the Rich Editor.

1. Insert/Edit Link: allows you to highlight text to link to an external URL.

2. Unlink: allows you to highlight text and remove its link.

3. Link to a Page in the WebGUI Asset Tree: allows you to highlight text in order to create a link to an existing page in the WebGUI Asset Tree.

4. Insert/Edit Anchor: allows you to create an anchor on the page.

5. Insert WebGUI Macro: allows you to insert an existing WebGUI macro.

6. Insert Custom Character: allows you to insert a unique character, such as a carrot, angle quotation mark, or trademark sign.

7. Clean up Messy Code: checks HTML to make sure it is valid.

8. Edit HTML Source: allows you to view and edit the HTML source of the text.

9. Insert WebGUI Image: allows you to upload and insert an image that exists in the WebGUI page tree, using the WebGUI Collateral Image Manager, and place it in the text.

10. Insert/Edit Image: allows you to insert an image from outside the WebGUI page tree.

11. Table icons: these icons allow you to insert and manage the properties of a table.

Note: At times, it may seem that the content in the rich editor does not look like the content on the formatted page. This can easily be remedied by adding the style sheet URL to the rich editor configuration.

Move Content on the Page

WebGUI makes rearranging content on the page easy with drag and drop positioning. At the top of each asset is a light gray bar. Simply grab this bar with your mouse to drag the asset to its new position on the page.