InsuranceSuite Fundamentals:

PCF Editor Conventions

Student Exercise
 InsuranceSuite Fundamentals - Student Exercise

The User Interface Architecture

After reviewing the base configuration UI layout of your insurer customer, they communicate that they
want to implement a few minor changes on the Summary screen’s Basic tab.

In this lab, you will first explore the tools available for investigating the architecture of the user
interface. Then, you will use the PCF Editor in Guidewire Studio to modify the order of widgets in a
PCF file. Finally, you will deploy and verify your changes.

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

As a configuration developer, you need to understand how to explore the PCF structure, so you can
easily find and navigate to the widgets you need to modify.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 2

 InsuranceSuite Fundamentals - Student Exercise

In this exercise, you will explore the page structure of the summary page using the internal tools and the
PCF Editor.

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 the TrainingApp project
Use the main menu, toolbar, or keystroke to run the server.
Verify that the Run Console tab shows ***** ContactManager ready *****.
3. Log in to TrainingApp
Log in as Alice Applegate.
4. View the William Andy Summary
Search for William Andy.
In the search results list view, navigate to the William Andy contact.

Lab: Write it down

Action: Use ALT + SHIFT + I to open the Location Info window.

1. Question: Review the file structure in the dialog. What is the parent PCF of the
FlagEntriesLV.pcf?

2. Action: Use ALT + SHIFT + W to open the Widget Inspector window.

Question: Review the Page Include Structure. What is the value of anABContact variable?

3. Question: Review the Page Widget Structure. Compare the id and renderId values of the
Screen widget. How does the renderId value differ from the id value?

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 3

 InsuranceSuite Fundamentals - Student Exercise

Action: Use ALT + SHIFT + E to open the page in Guidewire Studio.

4. Question: Review the ABContactSummaryPage.pcf structure in the Structure tab. What is the
parent widget of the Toolbar widget?

5. Action: Navigate to the ABContactSummaryDV.pcf – Double click on the blue area

Question: Review the ABContactSummaryDV.pcf in the canvas. How are you able to
distinguish included sections from the widgets specified in the file itself?

Keyboard shortcut
Open Location Information

If you are running an application project with internal tools enabled, you can view the location information
with ALT + SHIFT + I in a separate browser window. The window details the file structure and details
the hierarchy of the location, screen, and any child container widgets. For each location and container
widget, the name of the file in which it is referenced is listed. Location Info is also useful when Studio is
not running.

Keyboard shortcut
Open Widget Inspector

If you are running an application project with internal tools enabled, you can view the widget information
with ALT + SHIFT + W in a separate browser window. The Widget Inspector shows all the PCF files
and widgets referenced in the active application browser window except for the workspace area. The
Widget Inspector also shows the available variables and their current values.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 4

 InsuranceSuite Fundamentals - Student Exercise

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.

Lab: Modify the Basics card on the Summary page

As a configuration developer, you want to be able to open and modify existing PCF files.

In this exercise, you will modify the ABContactSummaryDV.pcf file that you have already open in the
PCF Editor in Guidewire Studio.

1. Modify the order of the widgets in Basic Information

Move the Created On widget below the Assigned User widget.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 5

 InsuranceSuite Fundamentals - Student Exercise

From the Toolbox, add an input divider between Assigned User and Public ID.

Activity
Verify the work you have done

1. Reload the PCF changes

In TrainingApp, reload the changes to the PCF file(s).
Verify the changed order of the widgets and the addition of the input divider.

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 6

 InsuranceSuite Fundamentals - Student Exercise

Lab Solution: Write it down

Solution
Exact details on how to complete the exercise

1. Action: Use ALT + SHIFT + I to open the Location Info window.

2. Question: Review the file structure in the dialog. What is the parent PCF of the
FlagEntriesLV.pcf?

ABContactSummaryDV – you can see that based on the indent

3. Action: Use ALT + SHIFT + W to open the Widget Inspector window.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 7

 InsuranceSuite Fundamentals - Student Exercise

4. Question: Review the Page Include Structure. What is the value of anABContact variable?

"William Andy"

5. Question: Review the Page Widget Structure. Compare the id and renderId values of the
Screen widget. How does the renderId value differ from the id value?

renderId includes the id of the page in which to render the screen, whereas id simply gives
the id of the screen

Generally speaking the id simply gives the id of the widget, whereas renderId includes the id
of the widget and the concatenation of all the parent ids.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 8

 InsuranceSuite Fundamentals - Student Exercise

Action: Use ALT + SHIFT + E to open the page in Guidewire Studio.

6. Question: Review the ABContactSummaryPage.pcf structure in the Structure tab. What is the
parent widget of the Toolbar widget?

ABContactSummaryScreen

7. Action: Navigate to the ABContactSummaryDV.pcf – Double click on the blue area

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 9

 InsuranceSuite Fundamentals - Student Exercise

8. Question: Review the ABContactSummaryDV.pcf in the canvas. How are you able to
distinguish included sections from the widgets specified in the file itself?

Included sections are colored purple (the color varies depending on how deep the files are
nested), whereas widgets that are in the file have a gray background.

Lab Solution: Modify the Basics card on the Summary

page

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 10

 InsuranceSuite Fundamentals - Student Exercise

1. Move Created On widget below Assigned User widget. You can drag the Created On to its new
position.

Remember: Dark green lines are places where the widget could be placed; and the light green line is
where the widget will be placed.

From the Toolbox, add an input divider between Assigned User and Public ID

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 11

 InsuranceSuite Fundamentals - Student Exercise

Reload the PCF changes using ALT + SHIFT + L in the browser.

Guidewire Proprietary & Confidential – DO NOT DISTRIBUTE 12