Child pages
  • Creating and Updating a Component Progress Indicator

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata
On this Page

Panel

The first step is to wrap the Component Progress Indicator mark up inside of a panel.

The only item that you will need to change is the title. The convention is to call it "[fluid:component name] - Progress Indicator"

{panel:title=Sample - Progress Indicator| borderStyle=solid| borderColor=#848484| titleBGColor=#E8E8E8| bgColor=#FFF}
{panel}

Import Files

To get the appropriate styles and dynamic functionality to work, you need to import css and js files

<link href="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.css" rel="stylesheet" type="text/css">
<link href="http://www.fluidproject.org/releases/1.0/framework/fss/css/fss-layout.css" rel="stylesheet" type="text/css">
<link href="http://www.fluidproject.org/releases/1.0/framework/fss/css/fss-text.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>
<script type="text/javascript" src="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.js?version=7"></script>

Features

The features to display in the progress indicator are passed as an object to the creator function. When updating a Component Progress Indicator, this should be the only place that you will need to make changes

The object contains the name "featureList" which takes an array of objects.

{featureList: []}

The objects in this array have the following structure

{
    shortName: "Progress Indicators",
    longName: "Displays a sample of a feature with a link",
    status: "Stable",
    link: "http://wiki.fluidproject.org/display/fluid/Component+Progress+Indicator"
    
}

shortName: Name displayed in the table
longName: Displayed in the list of features and on hover over the short name
status: Takes a value of "Stable", "In Development", "In Design", "Future"
link: Not required, but can be used to link to more information

It doesn't matter what order these object are in, nor the order of the name/value pairs they contain.

Sample script tag where all of this is contained

<script type="text/javascript">
            $(document).ready(function () {
                
                var progressIndicator = fluid.componentProgressIndicator("#fl-cpi-sample", {featureList: [
                    {
                        shortName: "Sample 1",
                        longName: "Displays a sample of a Stable feature",
                        status: "Stable"
                    },
                    {
                        shortName: "Sample 2",
                        longName: "Displays a sample of an In Development feature",
                        status: "In Development"
                    },
                    {
                        shortName: "Sample 3",
                        longName: "Displays a sample of an In Design feature",
                        status: "In Design"
                    },
                    {
                        shortName: "Sample 4",
                        longName: "Displays a sample of a Future feature",
                        status: "Future"
                    },
                    {
                        shortName: "Progress Indicators",
                        longName: "Displays a sample of a feature with a link",
                        status: "Stable",
                        link: "http://wiki.fluidproject.org/display/fluid/Component+Progress+Indicator"
                    }
                ]});
                
                jQuery(window).resize(function () {
                    progressIndicator.refreshView();
                });
            });
        </script>

Container requirement

The creator function requires that you pass it a unique container. This container can be a class or an ID, but it must be unique on the page. It is important to remember that more than one Component Progress Indicators may live on the same page, through an include statement. The convention here is to use a class or ID on the container like this "fl-cpi-[fluid:component-name]".

creator function

var progressIndicator = fluid.componentProgressIndicator("#fl-cpi-sample", {featureList: []});

identifying the container

<div id="fl-cpi-sample" class="fl-cpi-border">

Example Component Progress Indicator

Below is a sample code. You could just copy and pasted this into a new page, as long as you make the following changes:

  1. Change the title in the panel
  2. Make the necessary changes to the featureList
  3. Change the class/ID of the container and pass this to the creator function

You can view the sample at the Sample Progress Indicator page

{panel:title=Sample - Progress Indicator| borderStyle=solid| borderColor=#848484| titleBGColor=#E8E8E8| bgColor=#FFF}
{html}

<link href="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.css?version=2" rel="stylesheet" type="text/css">
<link href="http://build.fluidproject.org/fluid/fluid-components/css/fluid.layout.css" rel="stylesheet" type="text/css">
<link href="http://build.fluidproject.org/fluid/fluid-components/css/fluid.text.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://build.fluidproject.org/fluid/fluid-components/js/Fluid-all.js"></script>
<script type="text/javascript" src="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                
                var progressIndicator = fluid.componentProgressIndicator("#fl-cpi-sample", {featureList: [
                    {
                        shortName: "Sample 1",
                        longName: "Displays a sample of a Stable feature",
                        status: "Stable"
                    },
                    {
                        shortName: "Sample 2",
                        longName: "Displays a sample of an In Development feature",
                        status: "In Development"
                    },
                    {
                        shortName: "Sample 3",
                        longName: "Displays a sample of an In Design feature",
                        status: "In Design"
                    },
                    {
                        shortName: "Sample 4",
                        longName: "Displays a sample of a Future feature",
                        status: "Future"
                    },
                    {
                        shortName: "Progress Indicators",
                        longName: "Displays a sample of a feature with a link",
                        status: "Stable",
                        link: "http://wiki.fluidproject.org/display/fluid/Component+Progress+Indicator"
                    }
                ]});
                
                jQuery(window).resize(function () {
                    progressIndicator.refreshView();
                });
            });
        </script>

       <div id="fl-cpi-sample" class="fl-cpi-border">
	        <p class="fl-text-align-center">Progress Bar Indicator Using Renderer</p>
            <div class="fl-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
                <div class="fl-cpi-progress-bars">
                    <div class="fl-progress">
                        <div class="fl-progress-bar fl-cpi-height-20-px">
                            <div class="fl-progress-indicator">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="fl-cpi-separator fl-cpi-separator-table" role="grid">
                    <tr class="fl-cpi-progress-row-render" role="row">
                        <td class="fl-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
                    </tr>
                    <tr class="fl-cpi-title-row-render" role="row">
                        <td class="fl-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
                            <a class="fl-cpi-title-link"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <ol class="fl-cpi-list-item-container-render">
                <li class="fl-cpi-list-item-render" role="listitem">
                    <a class="fl-cpi-list-link"></a>
                </li>
            </ol>
            <div class="fl-cpi-legend">
                <p>Legend</p>
                <table>
                    <tr class="fl-cpi-legend-row">
                        <td class="fl-cpi-stable fl-cpi-legend-cell" title="Stable"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-stable">Stable</a></td>
                        <td class="fl-cpi-in-development fl-cpi-legend-cell" title="In Development"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-inprogress">In Development</a></td>
                        <td class="fl-cpi-in-design fl-cpi-legend-cell" title="In Design"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-indesign">In Design</a></td>
                        <td class="fl-cpi-legend-cell" title="Future"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-future">Future</a></td>
                    </tr>
                </table>
                <p class="fl-cpi-small-print fl-font-size-80 fl-font-arial">*Based on the <a href="http://wiki.fluidproject.org/display/fluid/Fluid+Infusion+-+Current+Release">latest current release</a></p>
            </div>
        </div>
{html}
{panel}
  • No labels