Configuring a Mashup Page

Any page can be turned into a Mashup Page provided you have the webmaster forms to see the controls necessary to do so.  Having said that, we recommend that you use the New Page Picker to create a mashup page and do not create them by converting existing non-mashup pages.

A page turns into a Mashup page when the drop down list on the Special Content is set to "Portal Mashup".  After this step, the mashup configuration tabs appear and you can then define the panels that will make up the mashup page.

4102015_114439_0.jpg      4102015_114512_1.jpg
Click on images to display them at full size


Mashup Layout Possibilities (And Limits)

RWD Mashups can have pretty nearly a limitless number of panels in them, however, the more content you load into a single page, the slower that page will load.
The following illustration shows the basic layout capabilities of the RWD Mashup page as a layout might appear on the web, along with some labels and highlights to show specific features and functions.  
Each section (Top, Column 1-3, Bottom) can have as many rows (content panels) in it and these rows can either be grouped together to form a tabbed object, or ungrouped to display as independent panels.
4132015_122125_1.jpg
Click on image to display it at full size


Columns and Content



SNAGHTML126c8555.png

2) Column selector tabs (2a - selected tab indicator icon)                                                  


1) Special Content Selector Field

Function: This is the master switch for the Mashup.  Checking it will tell RWD to replace the data entered into the Page Body with the Mashup content that you define in the form.  All other elements of RWD (Header Section, Navigation Sidebar, etc.) will function normally.




2) Column Selector Tabs

Function: A mashup page can be made up of 5 distinct regions:  a top row, up to 3 columns, and a bottom row.  You can use any combination of these regions to construct the mashup page, and each region can have as many panels as you wish (with each panel having as many tabs on it as you wish).

Each column functions exactly like the other two columns so only one column will be discussed here.  If you use a fixed width page of 800 pixels or so, two columns is likely as much as you can use.  Mashup columns will adjust to changes in screen size and are designed to best fit the content in them.  

2a) In order to make it more clear which tab you are working on, a visual indicator icon will display the area of the web page affected by the currently selected mashup component




3) Add New Row or Remove a Row

Function: Just like all other sections in RWD, you can add or remove rows of content from the column you are working in.  Columns can have as many rows as you wish, however, it is best to try to keep your content visible on the page without the web visitor having to scroll down to see it. Rows in the Mashup generally take up much more space vertically than Navigation Sidebar rows so you may find that only 2-3 rows fit on a normal page.




4) Column Width (this field is not shown in above image, this field only exists on Columns 1-3)

Function: This setting allows you to constrain a column to a specific width.  Generally speaking however, it is best to set one column to a size that fits the content in it well, and then leave the other columns set to 'auto' so that RWD can re-size the columns to best fit the content.  As with many features of RWD, it will require some experimentation to set things exactly as you want them.  The top and bottom regions of the mashup cannot be sized as they will extend the entire width of the page.




5) Remove Border if Single Panel

Function: RWD Mashups can feature multiple rows grouped into a singe panel on the web page, delineated by tabs.  The tab group contains a graphical frame around the group.  If you have a row that is not part of a group, you can remove the grouping frame from that object so that the content appears to float right on the page with no visual boundary.



6) Group

Function: This checkbox provides a means by which to group successive rows of content into tabbed panels.  In any column, you can have as many panels from top to bottom as you wish.  If the Group field in row one is checked, it will be grouped with the item in row two only if the Group field in that row is in the same state (checked).  Contiguous rows will be grouped until a row has the Group field in a different state (unchecked).  That row will then start a new grouping until the Group field in a subsequent row is set to the other state (back to checked).  If you wish to have four different rows stay ungrouped, each row must have an alternating value in the Group field.



7) Tab Display Text

Function: Each tab in a panel can have it's own caption.  Enter the caption/title for the row in this field. Try to keep the caption (Tab Display Text) quite short and to the point; long titles can cause some difficulties with the way tabs render on the page.




8) Link To

Function: Enter the URL of the content you wish to display in the panel.  It can be a conference, a calendar, a web page from within your site,  a document, an outside web page or Flash (using iframes), an image or other web content - essentially anything you can view in a browser can be linked to in the Mashup. See the table below for a summary of how to link to the various types of content.




9) Special Format

Function: This field determines how your link will be formatted.  Please see the page dedicated to this topic at mashup_content




10) Height

Function: This feature gives you the ability to set a particular item's height in the Mashup panel.  Normally RWD will resize content to best fit however there are certain kinds of content for which this is not possible; iframes need to have their height pre-defined if you wish the content to entirely visible.




11) Object Link To

Function: This field is only currently available for images because most other objects can contain links right inside them.  The URL entered here will be followed when a web user clicks on the panel in the web page.




12) Lightbox

Function: This field is only visible for fields to which it applies.  Its function is to determine if the link generated by RWD in the webpage for the item clicked on will open in a new web page or a modal lightbox.  The default behavior is dictated by the Site Administrator but can be overriden by using this field.