3. Building the view

Question 1

Describe the base view code:

Answer 1

• view.js
• The ‘Root’ component is the container for the model, which collects all the pages together.
• The ‘Page’ component splits the model into different pages like having different tabs in Excel.
• The ‘Section’ component groups ‘Panes’ together, in a collapsible and titled panel.
• The ‘Pane’ component groups components together, controls the flow of the page and enables the pages to reflow intelligently to fit the available screen space. They are not visible to the user.
• A ‘Collection’ is an example of a component that lives inside a pane and is used to lay out a set of data items, in a label value pair. There are other components, such as tables

<HX.Root>
<HX.Page>
<HX.Section>
<HX.Pane>
<HX.Collection fields={["a", "b", "c"]} />
</HX.Pane>
</HX.Section>
</HX.Page>
</HX.Root>

Question 2

What is pathing?

Answer 2

Inception date and expiry date are part of hx core so to access them we will need to specify the structure (hx core) and then the value node we want. This is called “pathing” and for the inception date, you would have:

“hx_core/inception_date”

Question 3

How do you get collections to display side by side?

Answer 3

To get the collections to display side by side, the pane needs to flow “right”. This can be achieved by adding a flow property to the pane and setting this to “right”.

<HX.Pane>
<HX.Collection fields={["assured", "broker", "underwriter"]} />
<HX.Collection fields={["hx_core/inception_date", "hx_core/expiry_date"]} />
</HX.Pane>

Question 4

How do you get a collection to match the size of the one it is next to?

Answer 4

It is possible to stretch the second collection so that it ends in line with a larger collection, by adding the “stretch” prop.
<HX.Collection
fields={[“hx_core/inception_date”, “hx_core/expiry_date”]}
stretch
/>

Question 5

How do you get fields to sit side by side?

Answer 5

This can be achieved by adding a horizontal prop to the collection.

<HX.Pane>
<HX.Collection
fields={["policy_reference", "currency", "renewal_flag"]}
horizontal
/>
</HX.Pane>

Question 6

How can you set parts of the model to be hidden/visible depending on other variables?

Answer 6

Parts of the model can be set to hidden or visible by using the shownBy property, which can be applied to pages, sections and core components like collections and tables.

<HX.Section> #a boolean
<HX.Pane>
<HX.Collection fields={["expiring_policy_reference", "expiring_charged_premium"]} />
</HX.Pane>
</HX.Section>

Question 7

Describe how to create tables:

Answer 7

To create tables in hx Renew, the table component is used which has:
data – The structures or list nodes that will be used in the table (rows in the table)
fields – the children of the list/structures to display in tableau form (columns of the table)
<HX.Table
data={[“territory”, “loss_history”, “exposure”]}
fields={[“value”, “adjustment”, “comment”]}
title=”Adjustments”
/>
If you want data as a list instead, with list totals (which should have been created in the example)
data={[“layers”, null, “layer_totals”]}

Question 8

How would you make an “underwriter notes” section?

Answer 8

• Using a Notes component
• The notes component allows the underwriter to make detailed, formatted notes in the model. They support bullet points, italics, bold and numbering.
• The notes component takes one field, which in this instance will be the underwriter_notes value node.
• <HX.Section>
  <HX.Notes></HX.Notes>
  </HX.Section>

</HX.Section>

Question 9

How do you create Header Fields?

Answer 9

• These should be displayed at the top of every page.
• They can be created by adding the keyFields prop to the root component like so:
• <HX.Root keyFields={[“hx_core/model_premium”, “hx_core/charged_premium”, “hx_core/ulr”]}>`

Question 10

How do you load in the example data?

Answer 10

Go to the model select Recreate in the top right of the screen (the 2 circular arrows) and select Example Data 1