Tabbed Page Component Builder Specifications
Created May 3, 2006
Last modified May 16, 2006
Create a tool for building pages and MB (component) that use Tabs. The tool will allow users to define Tab Names and content for each Tab. This tool shall be used to create component that can be inserted in Product Detail Page and as standalone page.
This tool shall work similar to Menu Builder. The user shall select Add New Tab Collection. They shall assign it a name and select a Tab Style. Optionally they can load a Header HTML document or use HTML Editor to create one. Next they select Add New Tab for each Tab they want to create. For each Tab they shall enter the Tab’s Title and specify the Tab’s content. The Tab’s content shall be a document or feature component.
The system shall dynamically build the Tab page. Each Tab shall use AJAX to load its contents without refreshing the remainder of the page. Each document shall load within the Tab ignoring the Documents ‘Use Template’ setting and ‘Open in New Windows’ settings. I.e. they always open in same window within template within tab.
Create Tabbed Feature Style for each Tab page configuration (2 tabs, 3 tabs, 4 tabs, 5 tabs & 6 tabs). The user will create a new document. The use will either load HTML file or use HTML editor to create one. This HTML will define the header. The user will select Page Manager and select one of the Tabbed Feature Styles. User will then select edit Style and using Style Manager the user will manage the Tab names and Documents as Custom Values; thus for each tab there shall be a Custom Values for the tab’s label, list box to select feature component (Administrative Option same as on Menu Mgmt), and feature record ID (with lookup option). We will need to add new section to Custom Values section in Style Manager to display feature component and record ID options similar to Link section.
This method uses our existing design and eliminates the need to dynamically create the appropriate number of tabs; instead this will come from a static Feature Style. The Page Processor will insert the tab names and tab’s content.
Where things get inserted and how they will be formatted will be controlled by the Tab Feature Style (this is actually the Document’s Feature Style).
We need to support breadcrumbs above header in tabbed pages.
Available feature components:
Provide copy feature with checkboxes for the following options:
§ Copy Header
§ Copy Tabs
§ Copy Tab Contents
User Interface Design:
Add New Tab Component
§ Tab Collection Name – used to assign a name to the collection.
§ Style – used to select style.
See http://www.adobe.com/products/flash/flashpro/ they use AJAX for Overview, Evaluation Resources, and About Studio 8 tabs located towards bottom of page.
Create default style that matches the one below:
Document collections for Items/Products - Add section on Product Detail page to list link for each document for the Item. Estimated Development Time: 30 Hours
The default style for displaying Document links shall be as follows:
Specifications | Reviews | Warranty Info | Shipping Info
As an alternative option (lower development priority) we can create a tabbed section as follows:
Product Detail Page Tab Section – provide MB for Product Detail page like shown below. Allow a style to be selected. The style controls the graphic design of the tabs. In the example below they are squared and simple. Another style might offer tabs that look like . Allow up to 6 tabs to be defined for the MB. Preferably all tabs and their content should load as part of single page such that selecting a tab does not require refresh of page. Each tab should offer a selection of formatting options including:
§ Listing of Related Items – predefined format like the example of the Accessories tab shown below.
§ Unstructured – user defined content. Content is added either by uploading HTML document, selecting HTML document from library or using HTML Editor to create it. Examples are the Features tab and Item Includes tab shown below.
§ Structured – provides options to create one or more sections each with heading and line item detail. Each Line Item shall contain Item and Description. We shall use our Table Builder component for creating this. See example of Specifications tab shown below. (Examples are from B&H Photo.)