Incorporating HTML Table Data in Projects - Pega€¦ · Incorporating HTML table data in projects...

Pega Robotic AutomationIncorporating HTML Table Data in Projects

USER GUIDE8.0

Start

Notice

© 2018 Pegasystems Inc., Cambridge, MAAll rights reserved.

Trademarks

For Pegasystems Inc. trademarks and registered trademarks, all rights reserved. All other trademarks or service marks are property of their respective holders. For information about the third-party software that is delivered with the product, refer to the third-party license file on your installation media that is specific to your release.

Notices

This publication describes and/or represents products and services of Pegasystems Inc. It may contain trade secrets and proprietary information that are protected by various federal, state, and international laws, and distributed under licenses restricting their use, copying, modification, distribution, or transmittal in any form without prior written authorization of Pegasystems Inc.This publication is current as of the date of publication only. Changes to the publication may be made from time to time at the discretion of Pegasystems Inc. This publication remains the property of Pegasystems Inc. and must be returned to it upon request. This publication does not imply any commitment to offer or deliver the products or services described herein.This publication may include references to Pegasystems Inc. product features that have not been licensed by you or your company. If you have questions about whether a particular capability is included in your installation, please consult your Pegasystems Inc. services consultant.Although Pegasystems Inc. strives for accuracy in its publications, any publication may contain inaccuracies or typographical errors, as well as technical inaccuracies. Pegasystems Inc. shall not be liable for technical or editorial errors or omissions contained herein. Pegasystems Inc. may make improvements and/or changes to the publication at any time without notice.Any references in this publication to non-Pegasystems websites are provided for convenience only and do not serve as an endorsement of these websites. The materials at these websites are not part of the material for Pegasystems products, and use of those websites is at your own risk.Information concerning non-Pegasystems products was obtained from the suppliers of those products, their publications, or other publicly available sources. Address questions about non-Pegasystems products to the suppliers of those products.This publication may contain examples used in daily business operations that include the names of people, companies, products, and other third-party publications. Such examples are fictitious and any similarity to the names or other data used by an actual business enterprise or individual is coincidental.This document is the property of:Pegasystems Inc.One Rogers StreetCambridge, MA 02142-1209USAPhone: (617) 374-9600Fax: (617) 374-9620www.pega.com

Updated: June 21, 2018

Feedback

If you have suggestions or comments for how we can improve our materials, send an email [email protected].

www.pega.com

iii

CONTENTS

v Preface

v Requirements

v Conventions

1 Incorporating HTML table data in projects

2 Overview

3 Exercise 1: Basic HTML table design

3 Task 1: Interrogating HTML tables

13 Task 2: Initiating the Query function on a data cell property

15 Task 3: Query function example

16 Exercise 2: Advanced table design

16 Task 1: Using the advanced table section match capabilities of the HTML Table Designer

23 Task 2: Refresh matching

25 Summary

iv

Incorporating HTML Table Data in Projects v

PrefaceStudio’s HTML Table Designer lets you incorporate HTML table data into a format that can be used by Studio solutions.

You can download the practice files you will use while working through the step-by-step exercises presented in this tutorial module from this website:

https://openspan.sharefile.com/d-s34a5018e2734cb68

You can also download finished solutions from the same location. You can use these finished solutions as a reference for checking your work after you complete the exercises.

RequirementsThis tutorial module assumes you have successfully completed the Pega Robotic Automation Architect Essentials training module. This module also assumes you are familiar with general HTML table concepts.

The exercises in this module require your computer to be set up with Studio.

ConventionsThese typographical conventions are used in this document:

Convention DescriptionItalics Italics is used to emphasize important terms and phrases.

Blue, bold characters

Text you are supposed to enter is displayed in blue, boldface characters.

Bold Buttons, options, or selections you should click or choose while performing the steps outlined in this document.

https://www.pega.com/insights/resources/pega-robotic-automation-architect-essentials

https://www.pega.com/insights/resources/pega-robotic-automation-architect-essentials

https://openspan.sharefile.com/d-s34a5018e2734cb68

: | Preface

Incorporating HTML Table Data in Projects vi

Incorporating HTML table data in projects 1

INCORPORATING HTML TABLE DATA IN PROJECTS

The Pega Robotic Automation Studio HTML Table Designer allows you to incorporate HTML table data into a format that can be used by Studio solutions. This tutorial module discusses how to use the HTML Table Designer and includes these topics and exercises:

• Overview• Exercise 1: Basic HTML table design

— Task 1: Interrogating HTML tables — Task 2: Initiating the Query function on a data cell property — Task 3: Query function example

• Exercise 2: Advanced table design — Task 1: Using the advanced table section match capabilities of the HTML Table Designer — Task 2: Refresh matching

• Summary

Incorporating HTML table data in projects | Overview


OverviewStudio’s HTML Table Designer lets you assign the HTML table cells as either:

• Match cells• Data cells

Match cells make up match rules, which allow Studio to identify specific areas of the table and how those areas correspond to data cells. Data cells simply contain data.

The HTML Table Designer lets you use regular expressions (regex), as well as specific patterns in the creation of match rules related to these match cells.


Incorporating HTML table data in projects | Exercise 1: Basic HTML table design

Exercise 1: Basic HTML table design

Task 1: Interrogating HTML tablesThe HTML table design features let you interrogate an HTML table to integrate it into a Studio solution. Perform the following steps:

1. Create a new blank solution and add a Web application project item.

2. Set the StartPage property to the following URL and then click the Start Interrogation button:

http://training.openspan.com/product_list1.html

3. Select HTML Table Designer on the Interrogation Form.

4. Select the Create Global webpage option:

5. Drag and drop the Interrogation icon onto the table. The HTML Table Designer is displayed:



6. Looking at the table, the top row does not repeat and always exists for the table. Use this information to help match the table. Click and drag the cursor over the top three cells in the Table Designer to highlight the row:



7. Right-click the mouse over one of the cells then select Define Match Cell(s).

8. The Match Cells appear highlighted in blue in the table. Change the names of the cells as follows using the (Name) property:

9. Highlight the cell that contains the Next link, right-click, and select Define Match Cell(s). Rename the cell to matchCell_Next.

Change the name of this cell TomatchCell_1 matchCell_Product

matchCell_2 matchCell_Price

matchCell_3 matchCell_ProductID



10. From the second row on, the table repeats the Products and pricing information. You handle repeating rows within an HTML table by defining them as table sections. Select the cells in the second row, right-click, and select Define Table Section from the menu.



11. Since every cell in the row shows a different product and its associated information, define the cells as Data Cells. Select the cells in the row. Right-click on a highlighted cell and select Define Data Cell(s).

The Table Designer marks the cells as data cells and highlights them in green:

12. Rename the data cells in the table, by selecting the cell and then from the Property window modifying the name, as follows;

Change this data cell TodataCell1ihtd_c01 dataCell_Product

dataCell2 dataCell_Price

dataCell3 dataCell_Product ID



13. Click Apply Changes to save your work. You return to the HTML Table Designer.



14. Select File > Save from the HTML Designer menu.

15. Select File > Exit from the HTML Designer menu to close the Table Designer.

16. Stop the interrogation. The table objects are created in Studio. Here is an example of Object Explorer that shows the table controls:



17. Add a Windows form to the solution with the following buttons, labels, and text boxes:

18. Save the solution.

19. Add an automation and name it Change Headers. Complete the automation as shown below. This automation automatically changes the labels of the Windows form to the headers from the HTML table.



20. Create a new automation named Get Data and add the components and links as shown below. This automation populates the text boxes in the Windows form with the corresponding data from the indexed row of the HTML table.

21. Save and run the solution. Type 2 in the first text box and click the Get Data button, your results should appear as follows:

Note When you connect the btnGetData.Click event to the input event port of the dataCell_Product.Text property, a parameter is displayed for you to specify which instance of the data cell you want to use. Multiple instances of the cell occur since there are multiple data rows in the table. The options are:• Absolute Index• Index• Key• None• QueryBe sure to select Index as the solution will provide a row index (from the txtDataInput text box).





Task 2: Initiating the Query function on a data cell property1. Create a new automation named Query and add the components and links as shown below.

Connect the btnQuery Click event to the dataCell_Product. Text property.

2. Select Query as the key for the dataCell_Product object.

3. Define a query by clicking the Browse button.

The Query Editor window is displayed.

4. The format for queries is the same as that used by the .NET DataTable component. Refer to the Microsoft Developer Network website for details on the supported syntax:

http://msdn2.microsoft.com/en-us/library/system.data.datacolumn.expression.aspx

5. Enter a query, such as dataCell_Product=@ProductName, and click the Validate Query button. Verify in the Information group box that the query is valid.

Note The at sign (@) is used in the query string to allow for dynamic input. By including the at sign, a data property is created on the connection block you can connect on an automation.

http://msdn2.microsoft.com/en-us/library/system.data.datacolumn.expression.aspx



6. If the query is valid, click OK.



Task 3: Query function example1. Complete the Query automation as shown below:

2. Save and run the solution. Enter Chai in the field by the Query button and click the Query button. You get these results:

Incorporating HTML table data in projects | Exercise 2: Advanced table design


Exercise 2: Advanced table design

Task 1: Using the advanced table section match capabilities of the HTML Table Designer1. Create a new solution named Parts Table.

2. Add a web adapter to the solution.

3. Set the StartPage for the web adapter to:

http://training.openspan.com/ge%20parts%20grid.htm

4. Start the interrogation.

5. In the Interrogation Form dialog, check the Create Global Web Page box and select HTML Table Designer from the list.

6. Interrogate the table.



Note that the entire table is highlighted. This is because, from an HTML perspective, all three tables on the page (Filters, Panels/Trim Kits, and Cookbooks) are the same table.

7. Select the upper table selection.

Examine the design of the table. Notice that the table layout repeats three times. Also notice that while not all tables have the same number of rows, they do have the same layout. (Table description row Headers rowData rowsBlank row).



8. Knowing the repeating format of the table, select the first six rows of the table. Then right-click and select Define Table Section.

By selecting the first six rows Studio creates a match pattern that fits all three table sections.

9. Define the top row within the tableSection as a data cell.

Note Do not click Apply Changes until all the sections and cells have been defined.



10. Change the Expected ColSpan property for this row to 1, 5.

This is the number of columns this row spans — as this row is the width of the table, the table can be from one to five rows wide.

11. Define the top four cells beneath the filter as match cells.

12. The next set of rows repeat in the table. Select the row and define these cells as a table section within the table section.



13. Define the four cells as data cells.

14. Change the Expected ColSpan property for the last selected cell on the right side of this row to 1, 2.

This is the number of columns this cell spans — the cells underneath this one can be one or two columns wide.

Note It is very important that you do not define all three rows in this section as data cells. This would cause Studio to only match table data sections in groups of three rows.



15. Click the Apply Changes button for the inner table section.

16. Rename the match cells as:

— matchCell_AccessoryNo — matchCell_Description — matchCell_Price — matchCell_Availability

17. Click the Apply Changes button for the outer table section. Note that the entire table has now been interrogated and the match pattern has been applied to all three areas of the table.



18. Save your work and close the HTML Table Designer window. The table objects are added to the solution. Stop the interrogation.

Here is an example of Object Explorer after interrogating the Parts table:



Task 2: Refresh matchingThe Refresh Matching button on the HTML Table Designer rematches the entire table against a defined schema. This is normally not useful when defining a schema for a table for the first time, but it may be required when debugging matching on a table that does not quite match the defined schema.

You can click the Refresh Matching button at any time except when you have unapplied changes to be made to a table section.

1. To use the Refresh Schema button, first click Start Interrogation on the Data Table object in Object Explorer.

2. Then select Debug Matching in the interrogation object and interrogate the table for which you want to refresh the table matching.

3. Alter the data tables as necessary to match the original schema and then click the Refresh Matching button. For example, if one of the headers was misspelled Steak instead of Streak, correcting this mistake lets you rematch the schema for the table.

4. Save any changes you made.




Incorporating HTML table data in projects | Summary

SummaryThe HTML Table Designer lets you interrogate an HTML table and select which cells are fixed or data cells. Once you have interrogated these cells, you can query them for additional information. By using table sections, you can apply the same set of rules to multiple areas of a table.

For more information on the HTML table and its components, refer to the Studio/Runtime Help.

http://help.openspan.com/80/

Incorporating HTML table data in projects | Summary


Date post:	21-Jun-2020
Category:	Documents
Upload:	others
View:	9 times
Download:	0 times

Incorporating HTML Table Data in Projects - Pega€¦ · Incorporating HTML table data in projects...

Documents