Table of Contents

Article

Upgrading deprecated and outdated controls

This article describes how to upgrade deprecated or outdated controls. Controls are considered outdated when a newer alternative is available within PRPC 7.1.

Updating controls is required to effectively render your application user interface in HTML5 Document Type. Rendering your application in HTML5 Document Type ensures cross-browser and cross-platform compatibility and use of the latest HTML markup, among other benefits. See Upgrading an application to render in HTML5 Document Type for more information.

You can update a number of controls automatically. Other controls may require a manual update. This article provides guidelines for updating controls automatically and, when necessary, manually.

Updating controls automatically

If a section contains one of the following deprecated or outdated controls, the following message displays, along with an option to automatically update all controls of these types within the section:
Update controls message

TextArea Time, Date PromptSelect DynamicSelect
AutoComplete RichTextEditor Button RadioButtons
Checkbox URL    

For detailed information on control updates and conversions, see Control update details at the end of this article.

To view and upgrade deprecated or outdated controls in your application:

  1. Select Designer Studio >  User Interface > HTML5 Application Readiness.
  2. On the Applications tab, verify that the desired applications are selected. By default, the HTML5 Document Type setting for the current application displays. To select additional applications in the default application stack, click the Application link in the header, select the application, and then click Apply.
  3. Select the UI Elements tab.
  4. All sections within the application that contain deprecated or outdated controls are listed in the Sections using deprecated controls area. Select the name of a section to open the section.
    Sections using deprecated controls
  5. Open each section and click the Update Controls button to automatically update deprecated and outdated controls in that section.
    Section with Update Controls warning
    Deprecated or outdated controls within a section display with a warning icon. When you open the properties for an outdated control, the following displays.
    Warning on deprecated control
     
  6. When you click the Update Controls button in the warning message, all outdated controls in the selected section, of the following types, are updated simultaneously:
    TextArea Time, Date PromptSelect DynamicSelect
    AutoComplete RichTextEditor Button RadioButtons
    Checkbox URL    
  7. Save the updated section.

You can add custom controls to the Update Controls feature. Then, when a section containing these controls is opened, a message displays, along with the Update Controls button. See Adding controls to the automatic Update Controls feature.

If you import a pre-PRPC 7.1 Product rule, a RAP (Rule-Admin-Product rule), into PRPC 7.1, you must revalidate and save all sections contained in the RuleSet. Sections containing deprecated controls will not display in the HTML5 Application Readiness page until you revalidate and save. To do this, select DesignerStudio > SystemTools > Validate > Revalidateand Save.

Adding custom controls to the automatic Update Controls feature

You can add custom controls to the Update Controls feature. Then, when a section containing these controls is opened, a message displays, along with the Update Controls button. This enables you to all update occurrences of that control, along with other deprecated controls already included in the automatic update.
Deprecated control warning

To add a custom control to the automatic update:

  1. Review the definition of the custom control.
  2. Define a data transform that maps the custom control to a PRPC auto-generated control. For example, the following data transform maps the parameters of the non-auto-generated RICHTEXTEDITOR control to the PRPC auto-generated pxRichTextEditor control.
    Data transform
     
  3. Open the pyDeprecatedControlsExt decision table and map the custom control name to the data transform that converts the custom control to an auto-generated control. To do this,
    1. Type the name of the custom control, in uppercase characters, in the Conditions column. For example, RICHTEXTEDITOR.
    2. Type the name of the data transform in the Actions column.
    3. Save the pyDeprecatedControlsExt decision table.
      Decision table
  4. To validate that the control is included in the automatic update, create and save a section containing the custom control. The Update Controls button displays; click Update Controls to automatically update all deprecated controls in the section.
    Deprecated control warning

If an automatic upgrade is not available for a control, you can manually update the section to use auto-generated controls. See the following guidelines for updating DataGrid and List-to-List controls.

Updating controls manually

Some controls require a manual update, including:

Upgrading DataGrid controls

Automatic update is not available for the deprecated DataGrid control. If your application contains a deprecated DataGrid control, such as the following DataGrid of operator skills and ratings, update the application to use a grid layout instead.
Data grid

Grids render in HTML5 Document Type and offer many benefits, including the ability to expand dynamically, providing as many rows as needed.

To upgrade a 5.5 DataGrid control to a grid:

  1. Open the section containing the DataGrid control, select the DataGrid, and click gear.png  to open the Cell Properties panel.
    Data grid properties
  2. In the Cell Properties panel, select the Parameters tab to view the DataGrid configuration.
    Data grid parameters
  3. Add a repeat grid layout to the section and click the  gear.png in the header to open the Repeat Grid Properties panel.
    Grid repeat
  4. Specify the same source as the DataGrid control, OperatorID.pySkills, and configure the grid with functionality similar to that of the DataGrid. For example, match the parameters of the Data Grid to the parameters of the repeat grid.
    Grdi repeat properties
  5. Save the section and run the flow to test. At runtime users can add, edit, and delete rows in the auto-generated grid, functionality similar to that of the deprecated DataGrid control.
    Grid control at runtime
  6. Delete the DataGrid control and save the section.

Upgrading List-to-List controls

Automatic update is not available for the List-to-List control. However, you can upgrade a List-to-List control to use a grid layout. To do this, convert the List-to-List control to a grid and configure the grid with actions and events that mirror the functionality of the List-to-List.

For example, the following List-to-List control enables users to select an employee name and add or remove the employee from the list.

List-to-List control at runtime

To upgrade this control to use a grid:

  1. In the section containing the List-to-List control, click gear.png to open the Cell Properties panel.
    List to list properties
  2. In the Cell Properties panel, select the Parameters tab, and then click Configure Parameters.
    List-to-List parameter tab
  3. Review the configuration.
    List-to-List parameters
  4. Add a repeat grid layout to the section and click the  gear.png in the header to open the Repeat Grid Properties panel.
    Grid repeat
     
  5. Specify the same source as the List-to-List control, EmployeeList.pxResults, and configure the grid with functionality similar to that of the List-to-List, as shown below.
    Repeat Grid at runtime

You can interact with this grid sample, selectDesigner Studio >User Interface> UI Gallery. In the Available Components area, select Samples & Combinations > Build A List. Select the Click A Row sample to build a list by clicking an item in one list and automatically moving the item to another list. See How to use grid actions to build a list (6.2 SP2) for details on this configuration.

Upgrading deprecated non-auto-generated controls enables you to render your application user interface in HTML5 Document Type. See Upgrading an application to render in HTML5 Document Type for more information.

Control update details

When you click the Update Controls button, all of the following controls in the section are automatically updated.

These controls are automatically updated... to this control
TextArea
TextAreaSmall    
TextAreaWithExpandSmall
TextAreaExpanded   
TextAreaWithExpand    
TextAreaInTable
TextAreaExpandedOverflow   TextAreaWithExpandExpanded
pxTextArea
Date-Calendar
DateTime-Calendar
DateTime-CalendarHarness
DateCalendarForDataGrid
Export_Date
Export_DateTime
SecondsToHours
SelectDate
SelectDateTime
DateTime
DateTime-Default
DateTime-Full
DateTime-Long
DateTime-Medium
DateTime-Short
DateTime-Full-i18n
DateTime-Long-i18n
DateTime-Medium-i18n
DateTime-Short-i18n
Date
Date-Full
Date-Long
Date-Medium
Date-Short
Date-Full-i18n
Date-Medium-i18n
Date-Short-i18n
Time
Time-Default
Time-Medium
Time-Short
TimeElapsed-HMS
TimeZoneList
Time-Full-i18n
Time-Long-i18n
Time-Medium-i18n
Time-Short-i18n
pxDateTime
PromptSelect
DynamicSelect
pxDropDown
RichTextEditor pxRichTextEditor
AutoComplete pxAutoComplete
URL pxLink
Checkbox pxCheckbox
RadioButtons pxRadioButton

Button

Note: Buttons that use custom configuration settings, such as the deprecated harness button, are not included in the automatic upgrade. Manually upgrade these button controls to pxButton.

pxButton

Additional Information

Upgrading an application to render in HTML5 Document Type

Upgrading properties that reference deprecated controls

Upgrading Work Area controls to Dynamic Containers

What you need to know about upgrading your application to HTML5 Document Type (standards mode)

Published October 7, 2013 — Updated February 17, 2016


75% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.