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:

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.
   
5. Open each section and click the Update Controls button to automatically update deprecated and outdated controls in that section.
   
   Deprecated or outdated controls within a section display with a warning icon. When you open the properties for an outdated control, the following displays.
   
    
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.

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.

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.
   
    
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.
      
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.
   

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:

• DataGrid controls
• List-to-List controls

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.

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   to open the Cell Properties panel.
   
2. In the Cell Properties panel, select the Parameters tab to view the DataGrid configuration.
   
3. Add a repeat grid layout to the section and click the  in the header to open the Repeat Grid Properties panel.
   
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.
   
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.
   
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.

To upgrade this control to use a grid:

1. In the section containing the List-to-List control, click  to open the Cell Properties panel.
   
2. In the Cell Properties panel, select the Parameters tab, and then click Configure Parameters.
   
3. Review the configuration.
   
4. Add a repeat grid layout to the section and click the  in the header to open the Repeat Grid Properties panel.
   
    
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.
   

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.

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)