Note:

Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

About Spry data sets

A Spry data set is fundamentally a JavaScript object that holds a collection of data that you specify. With Dreamweaver you can quickly create this object and load data from a data source (such as an XML file or HTML file) into the object. The data set results in an array of data in the form of a standard table containing rows and columns. As you’re creating a Spry data set with Dreamweaver, you can also specify how you want to display the data on a web page.

You can think of a data set as a virtual holding container whose structure is rows and columns. It exists as a JavaScript object whose information is only visible when you specify exactly how to display it on the web page. You can display all of the data in this holding container, or you might choose to display only selected pieces of it.

For complete information on how Spry data sets work, see www.adobe.com/go/learn_dw_sdg_sprydataset_en.

For a video overview from the Dreamweaver engineering team about working with Spry data sets, see www.adobe.com/go/dw10datasets.

For a video tutorial on working with Spry data sets, see www.adobe.com/go/lrvid4047_dw.

Create a Spry data set

Create a Spry HTML data set

  1. If you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and also inserting a layout, make sure that the insertion point is where you want to insert the layout on the page.

  2. Choose Insert > Spry > Spry Data Set.

  3. In the Specify Data Source screen, do the following:

    • Select HTML from the Select Data Type pop-up menu. (It’s selected by default.)

    • Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name can contain letters, numbers, and underscores, but cannot start with a number.

    • Specify the HTML elements in your data source that you want Dreamweaver to detect. For example, if you’ve organized your data inside a div tag, and you want Dreamweaver to detect div tags instead of tables, select Divs from the Detect pop-up menu. The Custom option lets you type any tag name that you want to detect.

    • Specify the path to the file that contains your HTML data source. The path can be a relative path to a local file in your site (for example, data/html_data.html), or an absolute URL to a live web page (using HTTP or HTTPS). You can click the Browse button to navigate to a local file and select it.

      Dreamweaver renders the HTML data source in the Data Selection window, and displays visual markers for the elements that are eligible as containers for the data set. The element you want to use must already have a unique ID assigned to it. If it doesn’t, Dreamweaver will display an error message, and you’ll need to go back to the data source file and assign a unique ID. Additionally, eligible elements in the data source file cannot reside in Spry regions, or contain other data references.

      Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.

    • Select the element for your data container by clicking one of the yellow arrows that appears in the Data Selection window, or by choosing an ID from the Data Containers pop-up menu.


      Selecting the element for the HTML data set data container.

      For lengthy files, you can click the Expand/Collapse arrow at the bottom of the Data Selection window to see more of the data.

      Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the Data Preview window.

    • (Optional) Select Advanced Data Selection if you want to specify CSS data selectors for the data set. For example, if you specified .product in the Row Selectors text box, and .boximage in the Column Selectors text box, the data set would include only those rows with the .product class assigned to them, and only those columns with the .boximage class assigned to them.

      If you want to type more than one selector in a given text box, separate the selectors with a comma.

      For more information, see About Spry data selectors.

    • When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to go on to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).

  4. In the Set Data Options screen, do the following:

    • (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.

      You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or by navigating to it using the left and right arrows in the upper-left corner of the screen.

    • (Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Columns pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.

    • (Optional: tables only) Deselect Use First Row as Header if you want to use generic column names (that is column0, column1, column 2, and so on) instead of the column names specified in your HTML data source.

    Note:

    If you’ve selected something other than a table for the container element of your data set, this option and the next option are not available. Dreamweaver automatically uses column0, column1, column2, and so on, for the column names of non-table-based data sets.

    • (Optional: tables only) Select Use Columns as Rows to reverse the horizontal and vertical orientation of the data in the data set. If you select this option, columns will be used as rows.
    • (Optional) Select Filter out Duplicate rows to exclude duplicate rows of data from the data set.
    • (Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If you want data to autorefresh, select Autorefresh Data and specify a refresh time in milliseconds.
    • When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on to the Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).
  5. In the Choose Insert Options screen, do one of the following:

    • Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layout for the data set.

    • Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to the page.

  6. Click Done.

    Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the SpryData.js file and the SpryHTMLDataSet.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not function. When you upload your page to a server, you’ll also need to upload these files as dependent files

Create a Spry XML data set

  1. If you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and also inserting a layout, make sure that the insertion point is where you want to insert the layout on the page.

  2. Choose Insert > Spry > Spry Data Set.

  3. In the Specify Data Source screen, do the following:

    • Select XML from the Select Data Type pop-up menu.

    • Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name can contain letters, numbers, and underscores, but cannot start with a number.

    • Specify the path to the file that contains your XML data source. The path can be a relative path to a local file in your site (for example, datafiles/data.xml), or an absolute URL to a page on the web (using HTTP or HTTPS). You can click the Browse button to navigate to a local file and select it.

      Dreamweaver renders the XML data source in the Row Elements window, displaying the XML tree of data elements available for selection. Repeating elements are marked with a plus (+) sign, and child elements are indented.

      Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.

    • Select the element that contains the data you want to display. Typically this element is a repeating element, such as <menu_item>, with several children elements, such as <item>, <link>, <description>, and so on.


      Selecting a repeating element for the XML data set.

      Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the Data Preview window. The XPath text box displays an expression that shows where the selected node is located in the XML source file.

    Note:

    XPath (XML Path Language) is a syntax for addressing portions of an XML document. It is used mostly as a query language for XML data, just as the SQL language is used to query databases. For more information on XPath, see the XPath language specification on the W3C website at www.w3.org/TR/xpath.

    • When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to go on to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).
  4. In the Set Data Options screen, do the following:

    • (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.

      You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or by navigating to it using the left and right arrows in the upper-left corner of the screen.

    • (Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.

    • (Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set.

    • (Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If you want to autorefresh data, select Autorefresh Data and specify a refresh time in milliseconds.

    • When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on to the Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).

  5. In the Choose Insert Options screen, do one of the following:

    • Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layout for the data set.

    • Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to the page.

  6. Click Done.

    Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the xpath.js file and the SpryData.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not function. When you upload your page to a server, you’ll also need to upload these files as dependent files.

Choose a layout for the data set

The Choose Insert Options screen lets you select different display options for how you want to display values from the data set on the page. You can display data using a dynamic Spry Table, a master/detail layout, a stacked containers (single column) layout, or a stacked containers with spotlight area (two-column) layout. A thumbnail depiction of what each layout looks like appears in the Choose Insert Options screen.

Dynamic Table layout

Select this option if you want to display your data in a dynamic Spry Table. Spry Tables allow for dynamic column sorting and other interactive behaviors.

Once you’ve selected this option, click the Set Up button to open the Insert Table dialog box and follow these steps:

  1. In the Columns panel, adjust the columns for your table by doing the following:

    • Select a column name and click the minus (-) sign to delete the column from the table. Click the plus (+) sign and select a column name to add new columns to the table.

    • Select a column name and click the up or down arrows to move the column. Moving a column up moves it further left in the displayed table; moving a column down moves it to the right.

  2. To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is Clicked. By default, all columns are sortable.

    If you want to make a column unsortable, select its column name in the Columns panel, and deselect Sort Column When Header Is Clicked.

  3. If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in your HTML page, you can apply a CSS class for one or more of the following options:

    Odd Row Class

    Changes the appearance of the odd-numbered rows in the dynamic table according to the selected class style.

    Even Row Class

    Changes the appearance of the even-numbered rows in the dynamic table according to the selected class style.

    Hover Class

    Changes the appearance of a table row when you move the mouse over it according to the selected class style.

    Select Class

    Changes the appearance of a table row when you click it according to the selected class style.

    Note:

    The order of the odd, even, hover, and select classes in your style sheet is very important. The rules should be in the exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear above the even and odd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the CSS panel to order them correctly, or you can manipulate the CSS code directly.

  4. If the table you are creating is going to become a dynamic Spry master table, select Update Detail Region When Row Is Clicked. For more information, see About dynamic Spry master tables and updating detail regions.

  5. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

    If you’re in Design view you’ll see the table appear with a row of headers and a row of data references. The data references are highlighted and enclosed in curly brackets ({}).

Master/Detail layout

Select this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an item in the master (left) region that updates the information in the detail (right) region. Typically the master region contains a long list of names, for example a list of available products. When the user clicks one of the product names, the detail region displays much more detailed information about the selection.

Once you’ve selected this option, click the Set Up button to open the Insert Master/Detail Layout dialog box and follow these steps:

  1. In the Master Columns panel, adjust the content of your master region by doing the following:

    • Select a column name and click the minus (-) sign to delete the column from the master region. Click the plus (+) sign and select a column name to add new columns to the master region. By default Dreamweaver populates the master region with data from the first column in the data set.

    • Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Master Columns panel sets the order of the data’s appearance in the master region on the page.

  2. Repeat the above steps for the Detail Columns panel. By default Dreamweaver populates the detail region with all of the data that is not in the master region (that is, all columns except for the first column in the data set).

  3. (Optional) Set different container types for data in the detail region. To do so, select the name of a detail column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.

  4. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

    If you’re in Design view you’ll see the master/detail regions appear, populated with your selected data references. The data references are highlighted and enclosed in curly brackets ({}).

Stacked Containers layout

Select this option if you want to display your data using a repeating container structure on the page. For example, if you have four columns of data in the data set, each container can include all four columns, and the container structure will repeat itself for each row in the data set.

Once you’ve selected this option, click the Set Up button to open the Insert Stacked Containers dialog box and follow these steps:

  1. In the Columns panel, adjust the content of your stacked containers by doing the following:

    • Select a column name and click the minus (-) sign to delete the column from the stacked containers. Click the plus (+) sign and select a column name to add new columns to the containers. By default Dreamweaver populates the stacked containers with data from every column in the data set.

    • Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Columns panel sets the order of the data’s appearance in the stacked containers on the page.

  2. (Optional) Set different container types for data in the stacked container. To do so, select the name of a data set column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.

  3. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

    If you’re in Design view you’ll see the container, populated with your selected data references. The data references are highlighted and enclosed in curly brackets ({}).

Stacked Containers with Spotlight Area layout

Select this option if you want to display your data using a repeating container structure on the page with a spotlight area in each container. Typically, the spotlight area contains a picture. The Spotlight Area layout is similar to the Stacked Containers layout, the difference being that in the Spotlight Area layout, the data display is divided into two separate columns (within the same container).

Once you’ve selected this option, click the Set Up button to open the Insert Spoltlight Area Layout dialog box and follow these steps:

  1. In the Spotlight Columns panel, adjust the content of your spotlight area by doing the following:

    • Select a column name and click the minus (-) sign to delete the column from the spotlight area. Click the plus (+) sign and select a column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area with data from the first column in the data set.

    • Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Spotlight Columns panel sets the order of the data’s appearance in the spotlight area on the page.

  2. (Optional) Set different container types for data in the spotlight area. To do so, select the name of a data set column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.

  3. Repeat the above steps for the Stacked Columns panel. By default Dreamweaver populates the stacked columns with all of the data that is not in the spotlight area (that is, all columns except for the first column in the data set).

  4. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

    If you’re in Design view you’ll see the spotlight area with stacked containers alongside of it, populated with your selected data references. The data references are highlighted and enclosed in curly brackets ({}).

Do Not Insert HTML

Select this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of the data set to the page.

Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time. To do so, double-click the name of the data set in the Bindings panel, click through to the Choose Insert Options screen, select your layout, and click Done.

Note:

You can also drag the name of the data set from the Bindings panel to the insertion point on the page. When you do so, the Choose Insert Options screen opens. Make your layout selection and click Done.

Edit a data set

After you create a Spry data set, you can edit it at any time.

  • In the Bindings panel (Window > Bindings), double-click the name of your data set, and make your edits.

Note:

When you edit a data set, and select a new layout in the Choose Insert Options screen, Dreamweaver does not replace whatever layout is on the page, but rather inserts a new one.

Use a design-time feed

If you are working with data that is still being developed, you may find it useful to use a design-time feed. For example, if the server developer is still finalizing the database behind your XML data file, you can use a test version of the file to design your page separately from the database development.

When you use a design-time feed, Dreamweaver only populates your work environment with data from that feed. References to the data source that exist in the page code remain references to the real data source you want to use.

  1. Begin creating a Spry Data Set (see previous procedures for instructions).

  2. In the Specify a Data Source screen, click the Design-time feed link.

  3. Click the Browse button to locate the design-time feed and click OK.

About Spry data selectors

When you use Dreamweaver to create a Spry data set, Dreamweaver includes all of the data in a selected container by default. You can refine this selection by using CSS data selectors. CSS data selectors let you include only a portion of the data from the data source by allowing you to specify CSS rules that are attached to certain pieces of data. For example, if you specify .product in the Row Selectors text box of the Specify Data Source screen, Dreamweaver creates a data set that only contains rows with the .product class assigned to them.

You must select the Advance Data Selection option in the Specify Data Source screen for the data selectors boxes to become active. If you enter data selectors and deselect the option, Dreamweaver retains what you typed in the boxes, but does not use them as filters for the data set.

About dynamic Spry master tables and updating detail regions

One of the most common uses of Spry data sets is to create one or more HTML tables that dynamically update other page data in response to a user action. For example, if a user selects a product from a list of products in a table, the data set can immediately update data elsewhere on the page with detailed information about the selected product. With Spry, these updates do not require a page refresh.

These separate page regions are referred to as master and detail regions. Typically, one area on the page (the master region) displays a list of categorized items (for example, a list of products), and another area of the page (the detail region) displays more information about a selected record.

Each data set maintains the notion of a current row, and by default, the current row is set to the first row of data in the data set. When a user makes different selections in a master region (again, taking the example of a list of different products), Spry actually changes the data set’s current row. Because the detail region is dependent on the master region, any changes that occur from user interaction with the master region (for example, selecting different products), result in changes to the data displayed in the detail region.

Dreamweaver creates master/detail layouts for you automatically, so that all of the correct associations between master and detail regions are in place. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later. When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a spry:setrow tag inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting the current row of the data set as the user interacts with the table.

For more information on creating master/detail regions by hand, see the Spry Developer Guide at www.adobe.com/go/learn_dw_sdg_masterdetail_en.

Create a Spry region

The Spry framework uses two types of regions: one is a Spry Region that wraps around data objects such as tables and repeat lists, and the other is a Spry Detail Region that is used in conjunction with a master table object to allow dynamic updating of data on a Dreamweaver page.

All Spry data objects must be enclosed in a Spry Region. (If you try to add a Spry data object before adding a Spry region to a page, Dreamweaver prompts you to add a Spry region.) By default, Spry regions are in HTML div containers. You can add them before you add a table, add them automatically when you insert a table or repeat list, or you can wrap them around existing tables or repeat list objects.

If you are adding a detail region, typically you add the master table object first and select the Update Detail Regions option (see Dynamic Table layout). The only value that is different and specific for a detail region is the Type option in the Insert Spry Region dialog box.

  1. Select Insert > Spry > Spry Region.

    Note:

    You can also click the Spry Region button in the Spry category in the Insert panel.

  2. For the object container, select the <div> or <span> option. The default is to use a <div> container.
  3. Choose one of the following options:
    • To create a Spry Region, select Region (the default) as the type of region to insert.

    • To create a Spry Detail Region, select the Detail Region option. You would only use a detail region if you want to bind dynamic data that updates as data in another Spry region changes.

    Note:

    You need to insert a detail region in a different <div> from the master table region. You might need to use Code view to place the insertion point precisely.

  4. Choose your Spry data set from the menu.
  5. If you want to create or change the region defined for an object, select the object and choose one of the following:

    Wrap Selection

    Puts a new region around an object.

    Replace Selection

    Replaces an existing region for an object.

  6. When you click OK, Dreamweaver puts a region placeholder into your page with the text “Content for Spry Region Goes Here.” You can replace this placeholder text with a Spry data object such as a table or repeat list, or with dynamic data from the Bindings panel (Window > Bindings).

    Note:

    In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, also listed. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.  

    Bindings panel
    The Bindings panel displays the available data from the data set.

  7. To replace the placeholder text with a Spry data object (for example, a Spry Table), click the appropriate Spry data object button in the Spry category of the Insert panel.
  8. To replace the placeholder text with dynamic data, use one of the following methods:
    • Drag one or more elements from the Bindings panel on top of the selected text.

    • In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in {ds1::category}. or {dsProducts::desc}. If you are only using one data set in your file, or if you are using data elements from the same data set that you defined for the region, you can omit the data set name and simply write {category} or {desc}.

    Regardless of which method you use to define the contents of your region, the following lines are added to your HTML code:

    <div spry:region="ds1">{name}{category}</div> 
    <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Create a Spry repeat region

You can add repeat regions to display your data. A repeat region is a simple data structure that you can format as needed to present your data. For example, you can use a repeat region to display a set of photograph thumbnails one after another within a page layout object such as an AP div element.

  1. Select Insert > Spry > Spry Repeat.

    Note:

    You can also click the Spry Repeat button in the Spry category in the Insert panel.

  2. For the object container, select the <div> or <span> option depending on the type of tag you want. The default is to use a <div> container.
  3. Select the Repeat (default) or Repeat Children option.

    Note:

    If you want more flexibility, you may want to use the Repeat Children option where data validation is done for each line in a list at the child level. For instance, if you have a <ul> list, the data is checked at the <li> level. If you choose the Repeat option, the data is checked at the <ul> level. The Repeat Children option may be especially useful if you use conditional expressions in your code.

  4. Choose your Spry data set from the menu.
  5. If you already have text or elements selected, you can wrap or replace them.
  6. Click OK to display a repeat region on your page.

    Note:

    All Spry data objects must be within regions, so make sure you’ve created a Spry region on your page before inserting a repeat region.

  7. When you click OK, Dreamweaver inserts a region placeholder into your page with the text “Content for Spry Region Goes Here.” You can replace this placeholder text with a Spry data object such as a table or repeat list or with dynamic data from the Bindings panel (Window > Bindings).

    Note:

    In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, also listed. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.

    Bindings panel displays the available data from the data set
    The Bindings panel displays the available data from the data set.

  8. To replace the placeholder text with a Spry data object, click the appropriate Spry data object button in the Insert panel.
  9. To replace the placeholder text with one or more dynamic data, use one of the following methods:
    • Drag one or more elements from the Bindings panel on top of the selected text.

    • In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in {ds1::category}. or {dsProducts::desc}. If you are only using one data set in your file, or if you are using data elements from the same data set that you defined for the region, you can omit the data set name and simply write {category} or {desc}.

    Regardless of which method you use to define the contents of your region, the following lines of code are added to your HTML code:

    <div spry:region="ds1">{name}{category}</div> 
    <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Create a Spry repeat list region

You can add repeat lists to display your data as an ordered list, an unordered (bulleted) list, a definition list, or a drop-down list.

  1. Select Insert > Spry > Spry Repeat List.

    Note:

    You can also click the Spry Repeat List button in the Spry category in the Insert panel.

  2. Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which container you choose. If you choose SELECT, you must define the following fields:
    • Display Column: This is what users see when they view the page in their browsers.

    • Value Column: This is the actual value sent to the background server.

    For example, you can create a list of states and show users Alabama and Alaska, but send AL or AK to the server. You can also use the SELECT as a navigational tool and show product names such as “Adobe Dreamweaver” and “Adobe Acrobat” to users, but send URLs such as “support/products/dreamweaver.html” and “support/products/acrobat.html” to the server.

  3. Choose your Spry data set from the menu.
  4. Choose the columns you want to display.
  5. Click OK to display a repeat list region on your page. In Code View, you can see that HTML <ul>, <ol>, <dl> or FORM select tags are inserted into your file.

Note:

If you try to insert a repeat list region but you haven’t created a region, Dreamweaver prompts you to add one before inserting the table. All Spry data objects must be contained within regions.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy