Smart Buttons

Smart Button Pop-up Toolbar

This article is helpful for advanced iNetWord design of web templates.  Or, the article may be useful to some who are using iNetWord's templates and wish to understand more about the Smart Button feature.

Smart Buttons are green buttons that appear for duplication of cell or table elements.  There are two smart buttons: a '+' (add) and a 'X' (delete). When clicked, the smart button adds or removes elements of the page in a 'smart' way.  For users editing one of the iNetWord templates, the Smart Buttons copy collections of text, pictures, and surrounding graphics without the user having any knowledge of the underlying table structure.  Smart Button codes are placed in the "Group" field of the "Table Cell Properties" dialog.  They provide very powerful customization of repetitive design applications.

 

 

The most common use of a smart button is to add new link cells to a site navigation bar near the top of all site pages.  This allows a web page designer to quickly add a new navigation link and duplicate all of the surrounding graphic features in the new link cell.  An example is the following table.  It is created as shown by inserting the 5-cell table, changing the cell background colors using the Format Table Cell or the Fill Color buttons, adding and centering text, and adding a preferred height for the row of cells.  The table is set at 100% page width.  Hyperlinks may be added to the text labels now or later.

Home Page 

 

Products

 

About Us

To create a Smart Button associated with the first cell:

  1. Click in the "Home Page" link cell.
  2. Click on the Table Cell Properties button.
  3. In the "Group" field, enter:  R1 BTN=Link 
  4. Click Apply. 

A new green Smart Button toolbar now floats over the table row/column insert and delete toolbar buttons, reminding you that you will likely prefer to use the Smart Buttons to add and subtract table columns.  With these Group codes set, clicking "+" Smart Button will copy that table column, the adjoining single right cell (ie. R1), and any formats and graphics in the copied column cell(s), and insert them to the right of the copied columns in a 'smart' way.  This is shown here:

Home Page 

 

New Link

 

Products

 

About Us

The Smart Button code is copied into the "New Link" cell as well.  We may add the same code to the "Products" link.  For the "About Us" cell, a different code is used because the last cell has no divider to the right.  The cell could be left with no Smart Button code, but a more useful method would be to enter a code to refer to the left divider.  In the "Group" field of the Table Cell Properties button, enter:  L1 BTN=Link .  If you click on the "+" Smart Button with the cursor in that cell, the Navigation bar becomes:

Home Page 

 

New Link

 

Products

 

About Us

 

New Link

The designer may replace the new cell text and insert the actual hyperlinks.

Codes used in this Example

Code 

Meaning 

L1 R1 

The number of columns to the left or right that are included with the current column in the copy.  Copies are placed to the right.
L2 means include the two columns to the left.

L0 means only copy the current column. 

BTN= 

Standard format text that must be used on all code entries. 

Link 

The text (or label) displayed on the Smart Button.  It is useful to Smart Button's function.  iNetWord templates use these specific labels: Link, Section, Panel, and Button. 
 
 

 

The Smart Button is controlled by a special table cell code in the Table Cell Properties dialog box.  These codes are called 'Group:' and are entered near the bottom of the dialog box (the 'Group' setting string is stored in a HTML element attribute called x_group). The Group is a string with the following syntax:

[table | [L# R# U# D#]] [+]  [-]  [#]  [P]  [NT]  [NP]  [WHT]  [BTN=name]  [BTN#=name,cmd]  [BTNU#=url,cmd]

The elements in this string can be in different orders, except 'table' (if used) must be first and BTN= must be last.

 

Group String 

Option

Purpose

table 

Table 

The entire table is treated as a whole. If the '+' Smart Button is clicked, the entire table is duplicated. If the 'X' Smart Button is clicked, the entire table is deleted.

L#, R# 

Left/Right Column Group 

The given number of columns Left and/or Right are grouped together with the current column. If L1 is given, then when the '+' Smart Button is clicked, the column to the left and the current column will be duplicated to the right.  If R1 is given, then when the '+' Smart Button is clicked, the column to the right and the current column will be duplicated to the right.  Clicking the 'X' Smart Button deletes the column group.

U#, D# 

Up/Down Row Group 

The given number or rows Up and/or Down are grouped together with the current row.  When the '+' Smart Button is clicked, the grouped rows are duplicated below.  Clicking the 'X' Smart Button deletes the group of rows.

+ 

Only Plus Button 

Indicates this Smart Button directive is only applicable to the '+' smart button. These are used in tricky photo album layouts.

-

Only Minus Button 

Indicates this Smart Button directive is only applicable to the '-' smart button.

P 

Picture 

This TD holds the to-be-replaced picture in a photo album. 

NT 

No Text Copy 

Do not copy text in this cell to the new cell. iNetWord normally replaces all text with 'New <name>' where <name> is the name given in the BTN directive.  Using NT removes the text from this cell completely.

NP 

No Picture Copy

Do not copy picture in this cell to the new cell. iNetWord normally copies all pictures assuming they are decorations for the new area. Use NP around pictures that are one-use only and would look silly being duplicated.

RP 

Replace Picture 

Replace the picture in this cell with another alternative derived from the 'standard' supply of categorized template stock photos.

WHT 

White Icons

Used when the cell or table the button applies to has light-borders and a dark-background. This string tells iNetWord to use the white-border button icons on the Smart Buttons in place of the default black.

BTN=name 

Display String 

name is the string shown on the smart button. Use it to describe in human terms what the element is. Use very short 'names'. This option, or one of the two following, must always be included.

BTN#=name,cmd 

Button Customize Options

# is the button location on the button bar. Use 3..20 since 1 and 2 are the + and X buttons. Name is a string shown on a new, separate button within the smart button bar. Cmd is a javascript command to execute when the button is pressed. 

BTNU#=url,cmd 

Button Image Customize Options

# is the button location on the button bar. Use 3..20 since 1 and 2 are the + and X buttons. Url is an Internet URL to a button image to show on the button on the button bar. Cmd is a javascript command to execute when the button is pressed. 
 
 
 

Smart Button Toolbar -- WHT Option

When the Smart Button codes are in a cell or table with a black background and white text, use the "WHT" option.  This changes the tiny icon "text" and cell border colors on the Smart Button from the default black to white.  In the button example shown here, the table has black cell background fill and white lettering.  The code used is 'D1 WHT BTN=Link'  Note that the copied cell background color, black in this example, is mirrored in the Smart Button toolbar background.  This allows for an easier visual matchup of the Smart Button to it's cell/table.

Other applications:

  • "U1", "D1" are options for up and down table row copies.  This could be used for a navigation bar along the left or a similar group of panels in a page column.

  • "table" allows an entire table to be copied below the existing table.  In iNetWord templates, the "table" option is typically used for a 3- or 9-cell table link "button".  A code example that would copy an entire table and place a copy immediately below the current table is:  'table BTN=Button'

 

  •  Note that although the Insert Row / Insert Column toolbar buttons can insert rows and columns before or after the current row or column, smart buttons always insert after the current row or column.

  • Every Smart Button code requires at minimum a column/row group code (L0, R3, U2, etc), the "BTN=", and the text label ("Link", "Button", or any string).  The exception is the "table" code, which needs no column/row group code (Ex. "table BTN=table").

  • The Smart Button codes are commonly placed where a user would think of clicking in a table -- in cells with text or a combination of text and picture(s). 
  • A Smart Button code may be placed in a table cell containing another table.  In this case the Smart Button settings 'shine through' all cells of the nested table.  Examples:
    • Placing 'table' Smart Button codes in the outer table of two nested tables allows the nested set to be copied as a group, no matter if the cursor is in the outer or inner table.
    • If you have table B in cell 1 of table A, then both the table B cells and the cell 1 of table A can have Smart Button settings. When the insertion point is placed in an inner table, iNetWord searches inside-out for the closest Smart Button cell setting.
    • Even trickier, using the '+' and '-' settings, both an inner and outer cell can have Smart Button settings and each be handled for a different Smart Button button (plus or X).
  • If needed, the Smart Button toolbar may be moved by click-n-drag over the left blue anchor area. Clicking directly on the black 'X' in the blue area dismisses the Smart Button.