Global Replace of Component styles

Description

Bulk operation to set the style for multiple components.

Discussion

Each component in a application can has a style that determines the how the controls in the component are styled. You can change the style of one or more components using the Global Replace of Component styles bulk operation. This allows you to quickly apply the same style to multiple components. You can also update multiple components to use <ProjectStyle>, which indicates that the component should use the style defined in the Project Properties for the Web Project.

How to Perform a Global Replace of Component styles Bulk Operation

  1. To perform a Global Replace of Component styles bulk operation, open the Web Projects Control Panel and select Bulk Operations > Global Replace of Component styles... from the Edit menu:

    images/bulkGlobalReplace.png
  2. In the Replace Component Styles dialog, select the New Style Name to apply. The style can be a Local, Global, or System style. You can also choose to apply the Project Style by clicking the Set to <ProjectStyle> button. Components that are configured to use the <ProjectStyle> will be styled using the style defined in Web Project's Project Properties.

    images/bulkGlobalReplace1.png
  3. Select the components to update using Ctrl or Shift select. You can optionally use the Select All Listed link to select every component in the Project.

    images/bulkGlobalReplace2.png
  4. Click Apply Style to apply the style. The Replace Component Style dialog will be refreshed, reflecting changes made to each component's style.

    images/bulkGlobalReplace3.png

Available Style Names

The style can be one of the following values:

Value
Description
Style_name

An explicit style name. The style can be a Local, Global, or System CSS style. EG: 'GrBlue', 'iOS7', 'Alpha'.

<ProjectStyle>

Uses the Project Style defined in Web Project Properties.

<session:varname>

Use the style specified in the session variable "varname". EG: '<session:var1>'.

Style_name:compact

For styles that support "compact". Use the compact version of the Style_name. EG: '<ProjectStyle>:compact' or 'Alpha:compact'

Style_name:notcompact

For styles that support "compact". Specifies that the component should not use the compact version of the Style_name. EG: '<ProjectStyle>:notcompact' or 'Alpha:notcompact'

What is <ProjectStyle>?

For each component that you create, you can specify the 'Style' property for the component. This setting determines the CSS used to generate the visual appearance of the component. If you set the style name to <ProjectStyle>, the name of the style used is determine at run-time by a setting in the Project Properties for the current project.

To set the name of the Project Style, go to the Web Project Control Panel and click the 'Project Properties' button.

Compact Styles

Some built-in styles, such as the Alpha style, support a compact version. A style that supports "compact" can be specified as follows:

Alpha:compact

You can also explicitly state that style should not be compacted. EG:

Alpha:notcompact

If the Project Style defined in Web Project Properties supports "compact", you can specify that the component should use the compact or non-compact version of the style with <ProjectStyle>:

<ProjectStyle>:compact
<ProjectStyle>:notcompact