InsuranceSuite Fundamentals:

Atomic Widgets
Student Exercise
 InsuranceSuite Fundamentals - Student Exercise

Atomic Widgets
An insurer wants to extend TrainingApp functionality by capturing more details about each contact. The complete
requirement will be implemented over multiple modules. Recall that you have already implemented the required
data model changes in the previous Extending Data Model module.

In this exercise your job is to make the necessary user interface changes to meet customer requirements. As a
configuration developer you will use the PCF Editor in Guidewire Studio to modify the TrainingApp UI.

In this module, you will first practice the DOT notation. Next, you will review the requirements. Finally, you will
configure the appropriate PCF file to display the fields and deploy your changes.

Prerequisites
You must first complete the following previous module(s):

1. Extending Base Application Entities

For this exercise, use TrainingApp, Guidewire Studio, and a supported web browser.
http://localhost:8880/ab/ContactManager.do is the default URL for TrainingApp. To view, edit, and
delete various contacts, log in to TrainingApp as Alice Applegate. The login/password for Alice Applegate is
aapplegate/gw.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

2
 InsuranceSuite Fundamentals - Student Exercise

Labs

As a configuration developer, you need to understand how to work with the dot notation. In this exercise, you will
use the data dictionary to determine how to reference entities, fields, and properties using dot notation.

1. Open the data dictionary in your browser.

For an object named "anABContact" that is of the type ABContact, identify the correct dot notation syntax for the
following:

1. The creation date and time for anABContact.

2. The tax status for anABContact.

3. The city for the primary address of anABContact.

4. All the buildings associated with anABContact.

5. Assuming that anABContact is a company, the number of employees for anABContact.

6. Assuming that anABContact is a legal venue, the type of court for anABContact.

Stop

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

3
 InsuranceSuite Fundamentals - Student Exercise

In this exercise, you will create new atomic widgets to capture and display additional contact details for an existing
details view. Review the widget requirements received from the business analysts. This table summarizes the
requirements for each widget. Refer to the wireframe at the beginning of the exercise to see how the fields will be
displayed in the UI.

As a configuration developer, you want to be able to find fields in the data dictionary and determine their data
model type. As a configuration developer, you want to be able to determine the appropriate widget and Gosu data
type based on the data model type of a field.

1. Open the data dictionary in your browser.

2. Review the Widget reference table

Recommended Recommended
Data type
widget(s) in a Detail widget(s) in a List Data type (Gosu)
(Data Model)
View View

varchar Text Input Text Cell java.lang.String

integer Text Input Text Cell java.lang.Integer

decimal Text Input Text Cell java.math.BigDecimal

text Text Input Text Cell java.lang.String

Text Area Input Text Area Cell

date, datetime Date Input Date Cell java.util.Date

bit Boolean Dropdown Input Boolean Radio Cell java.lang.Boolean

Boolean Radio Button Checkbox Cell
Input
Check Box Input

foreignkey Range Input Range Cell OtherEntityType

Range Radio Button
Input

typekey TypeKey Input Typekey Cell typekey.TypelistName

TypeKey Radio Button
Input

Table 1 Widget reference table

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

4
 InsuranceSuite Fundamentals - Student Exercise

3. Use the Data Dictionary and the Widget reference table to complete the following table Note: All the
fields are defined on ABContact entityS

Datatype (Data Widget valueType

Label/Info Editable Field
Model) (Gosu)

1 Contact n/a n/a n/a n/a

Analysis

2 We need a n/a n/a n/a n/a

horizontal
divider

3 Contact Tier Yes

4 Customer Yes
Rating

5 Strategic Yes
Partner

6 Last Yes
Courtesy
Contact

7 Fraud No
Investigation
Number

8 Web Yes
Address

Stop

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

5
 InsuranceSuite Fundamentals - Student Exercise

As a configuration developer, you want to create atomic widgets; bind some of those atomic widgets to entity
fields to display data from the database; and define user-friendly labels.

1. Open Guidewire Studio

From the TrainingApp folder, open a command window and start Guidewire Studio for TrainingApp.
Alternatively, use the Start TrainingApp Studio shortcut.
2. Run or Debug the TrainingApp project

Use the main menu, toolbar, or keystroke to run or Debug the server.
Verify that the Run or Debug Console tab shows ***** ContactManager ready *****.
3. Log in to TrainingApp

Log in as Alice Applegate.

4. View the William Andy Summary

Search for William fAndy.

In the search results list view, navigate to the William Andy contact.
5. Open the Summary Page in Guidewire Studio

Use the appropriate internal tools shortcut to open the PCF file in Guidewire Studio.

Keyboard shortcut
Open a PCF file in Studio from the Browser

If you are running an open application project in Guidewire Studio and if internal tools are enabled, you can
automatically open the location being viewed in the application. Use the ALT + SHIFT + E keystroke in the
browser.

6. Open the ABContactSummaryCV

In the PCF Editor, open the ABContactSummaryCV.pcf file.

7. Add widgets to the Detail View Panel on the Analysis card

Use the Toolbox to add widgets.
Use the Properties window to define the necessary widget properties such as id*, editable, and value*.
When defining labels, create display keys.
Use your completed table and the wireframe as guidelines

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

6
 InsuranceSuite Fundamentals - Student Exercise

Best practices
Adhere to Best practices

Guidewire recommends PCF file should not contain "hard coded" display text. Benefits of display
keys:

• Easily localize text and accommodate users from various locales

• Allows for labels with dynamic content
• Reusability – you must make modifications only at one place even if you decide to change a certain text that
is shown at multiple places in the User Interface

The recommended naming convention for customer display keys, is to use a standard prefix such as "Ext". Use
the following syntax to reference a display key:

DisplayKey.get(“NameOfTheKey”)

Or if the key expects parameters:

DisplayKey.get(“NameOfTheKey”, Parameter1, Parameter2,… )

Hint
View or modify a Display Key value

To view the value, just simply hold down the CRTL key and hover over the Display Key with your mouse. To
modify the value, just simply hold down the CTRL key and left click on the Display Key with your mouse. In
general, the same methods work the same way for other elements in Studio, such as entity fields, Gosu variables,
PCF file references, etc.

CTRL + Hover: Tooltip

CTRL + Click: Open definition file

Hint
Hover over for tooltips

Simply hover over the PCF element (or property) in the toolbox (or property window) to see the PCF
documentation about what that element (or property) does.

Activity
Verify the work you have done

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

7
 InsuranceSuite Fundamentals - Student Exercise

1. Reload the PCF changes

In TrainingApp, reload the changes to the PCF file(s) and display keys.
Verify your changes on the Summary page for William Andy.

Keyboard shortcut
Reload PCF changes without restarting the Server

If you are running an open application project in Guidewire Studio and if internal tools are enabled, you can reload
all the page configuration files and display keys for the server.

Important: If you reload PCF files while in edit mode, you may experience unpredictable results. For the current
location, where there is a data modification in progress, the new PCFs may not be reloaded. Therefore, Guidewire
recommends reloading PCF files while in read-only mode as it provides for more predictable results.

Use the ALT + SHIFT + L keystroke in the browser.

Stop

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

8
 InsuranceSuite Fundamentals - Student Exercise

Solution

Solutions

1. The creation date and time for anABContact.

anABContact.CreateTime

2. The tax status for anABContact.

anABContact.TaxStatus

3. The city for the primary address of anABContact.

anABContact.PrimaryAddress.City

4. All the buildings associated with anABContact.

anABContact.Buildings_Ext

5. Assuming that anABContact is a company, the number of employees for anABContact.

(anABContact as ABCompany).NumberOfEmployees

6. Assuming that anABContact is a legal venue, the type of court for anABContact.

(anABContact as ABLegalVenue).VenueType

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

9
 InsuranceSuite Fundamentals - Student Exercise

Solution

Datatype (Data Widget valueType

Label/Info Editable Field
Model) (Gosu)

1 Contact n/a n/a n/a Label n/a

Analysis

2 We need n/a n/a n/a Input n/a

a divider
horizontal
divider

3 Contact Yes ContactTier typekey.Contact TypeKey typekey.Contact

Tier Tier Input Tier

4 Customer Yes CustomerRating_Ext decimal Text java.math.BigDe

Rating Input cimal

5 Strategic Yes IsStrategicPartner_E bit Boolean java.lang.Boolea

Partner xt Radio n
Button
Input

6 Last Yes LastCourtesyContact datetime Date java.util.Date

Courtesy _Ext Input
Contact

7 Fraud No FraudInvestigationN integer Text java.lang.Integer

Investigati um_Ext Input
on
Number

8 Web Yes WebAddress_Ext varchar(60) Text java.lang.String

Address Input

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

10
 InsuranceSuite Fundamentals - Student Exercise

Solution

1. Open the PCF file:

Open ABContactSummaryCV.pcf and select the Analysis card.

To delete the existing label, right click on it and select Delete from the context menu.
2. Drag and drop widgets inside the existing Input Column
3. Label widget for Contact Analysis label:

Call the get() function of the DisplayKey class in the label property.

Enter the name for the display key in the get() function as a String parameter (between double quotes).

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

11
 InsuranceSuite Fundamentals - Student Exercise

Press Alt + Enter, and click Create Display Key:

Then enter the text value for the locale and click OK

The new label widget should look like this

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

12
 InsuranceSuite Fundamentals - Student Exercise

4. Input Divider widget to display a horizontal line:

5. TypeKey Input widget for Contact Tier

6. Text Input widget for Customer Rating:

…and set the valueType to java.math.BigDecimal

7. Boolean Radio Button Input widget for Strategic Partner:

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

13
 InsuranceSuite Fundamentals - Student Exercise

8. Date Input widget for Last Courtesy Contact:

9. Text Input widget for Number Of Fraud Investigations…

…and set the valueType to java.lang.Integer

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

14
 InsuranceSuite Fundamentals - Student Exercise

10. Text Input widget for Web Address:

11. The completed design:

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE

15