Fundamentals

Allowed Children Components

AccordionTab

Sample Configuration

@Accordion
private VAQuestionnaire vaQuestionnaire;

@Model
@Getter @Setter
public static class VAQuestionnaire {

    @AccordionTab
    private VATTab1 vatTab1;

    @AccordionTab
    private VATTab2 vatTab2;

    @Model
    @Getter @Setter
    public static class VATTab1 { ... }

    @Model
    @Getter @Setter
    public static class VATTab2 { ... }
}

AccordionTab

AccordionTab contains a collection of contents for an individual section within an Accordion.

Allowed Parent Components

Accordion

Allowed Children Components

Accordion Tab supports all of the same children that are supported as children by Form.

Sample Configuration

@AccordionTab
private VATTab1 vatTab1;

@Model
@Getter @Setter
public static class VATTab1 {

    @TextBox
    private String txt1;

    @ButtonGroup
    private VBGMain vbgMain;
}

ActionTray

ActionTray is an extension to the standard button input element with icons and theming.

Allowed Parent Components

Domain

Note	ActionTray can only be contained within a View Layout definition.

Allowed Children Components

Button

Sample Configuration

@ActionTray
private VSActionTray vsActionTray;

@Model
@Getter @Setter
public static class VSActionTray {

    @Label(value = " ")
    @Config(url = "...")
    @Button(imgSrc = "fa-id-card", cssClass = "icon btn btn-icon mr-0", title = "Record a Contact")
    private String contactRecord;
}

Autocomplete

Autocomplete is a text input component.

Allowed Parent Components

Allowed Children Components

None. @Autocomplete should decorate a field having a simple type.

Sample Configuration

@Autocomplete(display="label", postEventOnChange = true, minLength = 2)
@Config(url = "/p/owner/_search?fn=lookup&where=owner.firstName.containsIgnoreCase('<!autocompletesearchvalue!>')&projection.mapsTo=code:id,label:firstName")
private String autocompleteField;

Button

Button is an extension to the standard button input element with icons and theming.

Allowed Parent Components

ActionTray, ButtonGroup, Form, Grid, Section

Allowed Children Components

None. @Button should decorate a field having a simple type.

Sample Configuration

@Config(url = "...")
@Button(type = Button.Type.DESTRUCTIVE)
private String delete;

ButtonGroup

ButtonGroup contains a collection of Button components.

Allowed Parent Components

CardDetail.Header, CardDetail.Body

Allowed Children Components

Button

Sample Configuration

@ButtonGroup(cssClass="text-sm-right")
private VBGGoals vbgGoals;

@Model
@Getter @Setter
public static class VBGGoals {

    @Button
    private String btn1;

    @Button
    private String btn2;
}

Calendar

Calendar is an input component to select a date.

Allowed Parent Components

Form

Allowed Children Components

None. @Calendar should decorate a field having a simple type of a supported date type:

LocalDate
LocalDateTime
ZonedDateTime
Date

Sample Configuration

@Path
@Calendar(postEventOnChange=true, showtime=true, hourFormat="24")
private LocalDate startDate;

@Path
@Calendar(postEventOnChange=true, timeOnly=true)
private LocalDateTime startDate;

CardDetail

CardDetail is a flexible container component.

Allowed Parent Components

Accordion, AccordionTab, CardDetailsGrid, Section

Allowed Children Components

Sample Configuration

@CardDetail(title="Member Overview", cssClass="contentBox right-gutter bg-alternate mt-0")
private VCDMember vcdMember;

@Model
@Getter @Setter
public static class VCDMember {

    @CardDetail.Header
    VCDHMain header;

    @CardDetail.Body
    VCDBMain body;

    @Model
    @Getter @Setter
    public static class VCDHMain { ... }

    @Model
    @Getter @Setter
    public static class VCDBMain { ... }
}

Note	contentBox right-gutter bg-alternate mt-0 overrides the default cssClass specified for the `@CardDetail` component.

CardDetail.Body

CardDetail.Body is a container component within CardDetail that contains the main content.

Allowed Parent Components

CardDetail

Allowed Children Components

FieldValue, Link, Paragraph, StaticText

Sample Configuration

@CardDetail.Body
VCDBMain body;

@Model
@Getter @Setter
public static class VCDBMain {

    @FieldValue
    private String value1;
}

CardDetail.Header

CardDetail.Header is a container component within CardDetail that contains the header content.

Allowed Parent Components

CardDetail

Allowed Children Components

ButtonGroup, FieldValue, Paragraph

Sample Configuration

@CardDetail.Header
VCDHMain header;

@Model
@Getter @Setter
public static class VCDHMain {

    @FieldValue
    private String value1;
}

CardDetailsGrid

CardDetailsGrid contains a collection of CardDetail components.

Allowed Parent Components

Accordion, Section

Allowed Children Components

A field decorated with @CardDetailsGrid should be a collection/array with a defined type. The defined type is treated as the definition for the row data in the rendered content. This is referred to as the collection element type. The allowed children components of the collection element’s type are:

CardDetail

Sample Configuration

@CardDetailsGrid(onLoad = true)
@Config(url = "...")
@Path(linked = false)
private List<ConcernsLineItem> vcdgConcerns;

@Model
@Getter @Setter
public static class ConcernsLineItem {

    @CardDetail
    private VCDMain vcdMain;

    @Model
    @Getter @Setter
    public static class VCDMain { ... }
}

Chart

Chart renders a visually appealing graph/chart based on an open source HTML5 based charting library: Charts.js

Allowed Parent Components

Allowed Children Components

None. @Chart should decorate a field having a collection with type DataGroup (e.g. List<DataGroup>.)

Allowed Chart Types

Line
Bar
Pie
Doughnut

Attributes

xAxisLabel = ``
- Applicable only for cartesian graphs and denotes the label to be shown for X-axis
yAxisLabel = ``
- Applicable only for cartesian graphs and denotes the label to be shown for Y-axis
stepSize = ``
- Applicable only for cartesian graphs and denotes the incrments of the Y-axis. If not given, the size would be random based on the Y-axis values supplied to the graph

Sample Configuration

@Label("Bar Graph")
@Chart(value=Type.BAR, xAxisLabel="Domain", yAxisLabel="Count")
private List<DataGroup> barGraph;

@Label("Line Graph")
@Chart(value=Type.LINE, xAxisLabel="Domain", yAxisLabel="Count")
private List<DataGroup> lineGraph;

@Label("Pie Graph")
@Chart(value=Type.PIE)
private List<DataGroup> pieGraph;

@Label("Doughnut Chart")
@Chart(value=Type.DOUGHNUT)
private List<DataGroup> doughnutGraph;

Data Type of Chart

Every chart that is configured with a datatype as List<DataGroup>. In a chart there could be 1 or more graphs that can be plotted. Each DataGroup qualifies to be painted as a graph. A DataGroup has a legend that indicates what the graph is and has a list of x,y co-ordinates.

If line graph configured above has the following dataset provided to the UI -

[
    {
        "legend": "Region 1"
        "datapoints": [
            {1,1},{2,2},{3,3}
        ]``
    }
    {
        "legend": "Region 2"
        "datapoints": [
            {10,10},{20,20},{30,30}
        ]
    }
]

There would be 2 line graphs rendered on the page, one for Region 1 and the other for Region 2.

CheckBox

Checkbox is an extension to standard checkbox element.

Allowed Parent Components

Allowed Children Components

None. @CheckBox should decorate a field having a simple type of Boolean or boolean.

Sample Configuration

@CheckBox(postEventOnChange=true)
private boolean admin;

CheckBoxGroup

CheckBoxGroup is used for multi-select CheckBox components.

Allowed Parent Components

Allowed Children Components

None. @CheckBoxGroup should decorate a field having a collection/array of type String.

Sample Configuration

@CheckBoxGroup(postEventOnChange=true)
private String[] days;

ComboBox

Combobox is used to select an item from a collection of options.

Allowed Parent Components

CardDetail.Body, CardDetail.Header, FieldValueGroup

Allowed Children Components

None. @ComboBox should decorate a field having a simple type.

Sample Configuration

@Path
@Values(url = "...")
@ComboBox
private String goalCategory;

Supplying Values to a ComboBox

When decorated with @Values, the resolved values as defined by the logic within Values will be used as the options for the rendered @ComboBox component.

FieldValue

FieldValue is a container for displaying a single value. Has the ability to become an in place edit field with several configurable properties.

Allowed Parent Components

Allowed Children Components

None. @FieldValue should decorate a field having a simple type.

Sample Configuration

@MapsTo.Type(Goal.class)
@Getter @Setter
public static class VCDHGoals {

    @FieldValue(showName = false, cols = "2")
    @Path
    private String description;

    @FieldValue(showName = false, iconField = "date")
    @Path
    private LocalDate targetDate;

    @FieldValue(showName = false, iconField = "planned")
    @Path("/status")
    private String status;

    @FieldValue(showName = false, datePattern = "MM/dd/yyyy")
    @Path
    private LocalDate startDate;
}

FieldValueGroup

FieldValue is a container for displaying a logical grouping of multiple FieldValue components.

Allowed Parent Components

CardDetail.Body

Allowed Children Components

FieldValue

Sample Configuration

@FieldValueGroup
private AddressGroup addressGroup;

@MapsTo.Type(Address.java)
@Getter @Setter
public static class AddressGroup {

    @FieldValue
    @Path
    private String line1;

    @FieldValue
    @Path
    private String line2;

    @FieldValue
    @Path
    private String city;

    @FieldValue
    @Path
    private String state;

    @FieldValue
    @Path
    private String zip;
}

FileUpload

FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

Allowed Parent Components

Allowed Children Components

None. @FileUpload should decorate a field having a simple type.

Sample Configuration

@FileUpload(type = "${app.config.upload.allowedTypes}")
private String uploader;

Form

A Form is an HTML form container for user input contents.

Allowed Parent Components

Allowed Children Components

Accordion, Button, ButtonGroup, Calendar, CheckBox, CheckBoxGroup, ComboBox, FileUpload, FormElementGroup, Grid, Header, InputMask, Paragraph, PickList, Radio, RichText, Signature, TextArea, TextBox TreeGrid

Sample Configuration

@Form(cssClass = "twoColumn")
@Path(linked = false, state = State.External)
private VFGoals vfGoals;

@Model
@Getter @Setter
public static class VFGoals { ... }

FormElementGroup

FormElementGroup is a grouping container that enables the form elements to be grouped in such a way that they appear to look as a sub section of the form. For example if there is a Name of person that needs to be gathered with 3 sub fields firstName, middleName and lastName, this can be displayed as a FormElementGroup for better user experience.

Sample Configuration

@Model @Getter @Setter
public static class VSAddEditForm {

    @Form
    private VFAddEditForm vfAddEditForm;
}

@Getter @Setter
public static class VFAddEditForm {

    @Label("Name")
    @FormElementGroup(cssClass="oneColumn")
    private SectionName sectionName;

}

@Model
@Getter @Setter
public static class SectionName {

    @Label("First Name")
    @TextBox(cssClass="inline")
    @NotNull
    @Path
    private String firstName;

    @Label("Middle Name")
    @TextBox(cssClass="inline")
    @NotNull
    @Path
    private String middleName;

    @Label("Last Name")
    @TextBox(cssClass="inline")
    @NotNull
    @Path
    private String lastName;

}

The above code illustrates the usecase of showing name field in the form of a sub group of 3 other fields and gives the visual experience of grouping them for better undertanding. The css class "oneColumn" helps in formatting the fields as if they fall under the "name" field. If the existing style classes are not sufficient, a custom css class can be added to the app styles and be used.

Allowed Parent Components

TODO

Allowed Children Components

TODO

Grid

Grid is a table container capable of displaying tabular data.

Allowed Parent Components

http://localhost:8080/client/org/app/p/visitview/vpVisitsServer/vtVisits/vsVisits/visits/_get?b=$execute&pageSize=5&page=0

Allowed Children Components

@Grid should decorate a field having a collection/array with a defined type. The defined type is treated as the definition for the row data in the rendered HTML table. This is referred to as the collection element type. The allowed children components of the collection element’s type are:

GridColumn, LinkMenu, GridRowBody

Sample Configuration

@Grid(export=true)
private List<PetLineItem> vgPets;

@Model
@Getter @Setter
public static class PetLineItem {

    @GridColumn
    private String field1;

    @LinkMenu
    private VLMMain vlmMain;

    @GridRowBody
    private ExpandedRowContent expandedRowContent;

    @Model
    @Getter @Setter
    public static class VLMMain { ... }

    @Model
    @Getter @Setter
    public static class ExpandedRowContent { ... }
}

Multiple row selection

@Grid offers the ability to select multiple rows of data and submit the indexes of the selected rows as JSON data to the server for processing.

To enable this feature, the following attributes must be set:

rowSelection = true
- renders a checkbox at the beginning of each row in the table for row selection
postButton = true
- renders a button below the rendered @Grid that when clicked, submits an HTTP POST request with a payload containing the selected index to the path at postButtonUri
postButtonUri
- a parameter path relative to the decorated @Grid parameter to invoke an HTTP POST request on with the selected indexes
postButtonTargetPath
- the key to be used for the JSON object sent as a payload
(Optional) postButtonLabel
- controls the label of the button rendered by postButton
(Optional) headerCheckboxToggleAllPages
- when true, selecting the "select all" checkbox in the header of the @Grid will select all the records in the dataset across all pages. When false, only within the current page items will be selected
(Optional) export
- exposes the capability to download the grid data in .csv format

Example configuration for multiple row selection using @Grid

@Grid(onLoad = true, rowSelection = true, postButton = true, postButtonUri = "../actionRemove", postButtonTargetPath = "ids", postButtonLabel = "Remove")
@Path
@Config(url = "/p/member/_search?fn=example")
private List<MemberLineItem> membersGrid;

@Config(url = "/page/tile/section/selectedIdsWrapper/_replace") //(1)
@Config(url = "/p/member:<!/../membersGrid/<!col!>/memberId!>/_delete", col = "<!/selectedIdsWrapper/ids!>") //(2)
private String actionRemove;

private SelectedIdsWrapper selectedIdsWrapper;

@Model
@Getter @Setter
public static class SelectedIdsWrapper {
    private List<String> ids;
}

@MapsTo.Type(Member.class)
@Getter @Setter
public static class MemberLineItem { ... }

In this example, assume there are ten rows of data and the user selects indexes 1, 3, and 7 (Indexes are zero based). When clicking the "Remove" button, the an HTTP POST call is sent to the param at actionRemove with the payload:

{
    "ids": ["1", "3", "7"]
}

Next, the @Config statements decorating actionRemove are executed. Config #1 uses _replace to update the sepectedIdsWrapper ids field to be ["1", "3", "7"]. Config #2 is a bit trickier to read, but it iterates over the values just set into "selectedIdsWrapper/ids" and for each id, retrieves a record from membersGrid. From that point, the object in context is a MemberLineItem object, from which memberId is retrieved and used with _delete to delete the selected members them from the member domain.

Exporting grid content

The attribute export=true instructs the grid component to show an export link (clicking of which the grid data can be exported). There are 2 kinds of scenarios where the export of grid data can be used. 1. When grid is configured to use client side pagination, the export functionality would export all the data to a csv file that gets downloaded on the machine. 2. When the grid is configured with server side pagination, the export functionality would export only the current page data.

Note	The data downloaded would be in CSV format.

Using inline edit for @Grid records

@Grid supports inline editing, allowing the user to edit the first-level visible fields in a table row.

@Grid(editRow = true) (1)
private List<SampleLineItem> editableGrid;

@Model @Getter @Setter
public static class SampleLineItem {

    private String _action_onEdit; (2)

    // Line item fields below here
}

Toggling the attribute editRow will enable/disable an edit icon which will make a _get request parameter defined by onEdit.
Decorate _action_onEdit with any @Config or framework supported annotations.

Configuring server side pagination

By default, if the the @Grid component is configured to use pagination, it uses client side pagination. The rendered table can be configured to work with the framework by providing Command DSL statements that the framework then interpolates and hands off to Spring to take advantage of it’s rich server side pagination features.

Certain pagination specific query parameters can be used to leverage framework support.

Pagination Query Parameters

`page`	An integer representing the starting page number
`pageSize`	An integer for the number of elements to display per page
`sortBy`	A "key:value" string with the `key` representing the field over which to sort and the `value` representing the sort direction. Supported values are determined by the `org.springframework.data.domain.Direction` (`asc`, `desc`, etc.)

Server side pagination example

@MapsTo.Path(linked = false)
@Grid(onLoad = true, pageSize = "3", lazyLoad = true) (1)
@Config(url = "/vpVisitsServer/vtVisits/vsVisits/visits.m/_process?fn=_set&url=/p/visit/_search?fn=example&<!page=y!>") (2)
private List<VisitLineItem> visits;

Setting lazyLoad = true as seen in <1> informs the client side to use server side pagination by sending Command DSL statements to the server. The client side will send pagination information as query parameters and payload data depending upon the action taken upon the rendered @Grid component.

Setting <!page=y!> as seen in <2>, invokes the Path Variable Resolver to construct/pass along any query parameters/payload data sent from the incoming Command DSL statement for the pagination query parameters. For example, the following statement:

would result in <2> being invoked as:

/vpVisitsServer/vtVisits/vsVisits/visits.m/_process?fn=_set&url=/p/visit/_search?fn=example&page=0&pageSize=5

Note	When serverside pagination is enabled and `<!page=y!>` is given, it is expected that `\_get` calls invoking the parameter would also send the pagination query parameters, otherwise pagination will not work as expected.

Sorting with server side pagination

Server side sorting can be achieved by setting sortBy as a query paremeter in the Command DSL statement.

/vpVisitsServer/vtVisits/vsVisits/visits.m/_process?fn=_set&url=/p/visit/_search?fn=example&page=0&pageSize=5&sortBy=firstName:DESC

Filtering with server side pagination

Server side filtering can be achieved by setting the filters JSON in the raw payload alongside the Command DSL statement.

Request URL: /vpVisitsServer/vtVisits/vsVisits/visits.m/_process?fn=_set&url=/p/visit/_search?fn=example&page=0&pageSize=5

Payload:

filters: [
    {
        "code": "firstName",
        "value": "bob"
    }
]

GridColumn

GridColumn is a container for displaying a single value within a Grid.

Allowed Parent Components

Grid

Allowed Children Components

None. @GridColumn should decorate a field having a simple type.

Sample Configuration

@Model
@Getter @Setter
public static class PetLineItem {

    @GridColumn
    private String field1;
}

GridRowBody

GridRowBody is used to display additional content about the row data within a Grid.

Allowed Parent Components

Grid

Allowed Children Components

@GridRowBody will display children components in the same manner as Section does. See the Allowed Children Components of Section for more details.

Sample Configuration

@MapsTo.Type(Pet.class)
@Getter @Setter
public static class PetLineItem {

    @GridColumn
    @Path
    private String name;

    @GridRowBody
    private ExpandedRowContent expandedRowContent;

    @Model
    @Getter @Setter
    public static class ExpandedRowContent {

        @CardDetail
        private CardDetails cardDetails;
    }

    @Model
    @Getter @Setter
    public static class CardDetails {

        @CardDetail.Body
        private CardBody cardBody;
    }

    @Model
    @Getter @Setter
    public static class CardBody {

        @FieldValue
        @Path
        private String id;
    }
}

Header

Header is a container with a text header, equivalent to an HTML header.

Allowed Parent Components

Allowed Children Components

None. @Header should decorate a field having a simple type.

Sample Configuration

@Header(size = Header.Size.H1)
private String header;

Hints

Hints is a UI styling behavior applied for some components. The behavior applied is delegated to each individual component where @Hints is supported.

Hints.java

@Link(url = "/#/h/cmdashboard/vpDashboard", imgSrc = "anthem-rev.svg")
@Hints(AlignOptions.Left)
@PageHeader(Property.LOGO)
private String linkHomeLogo;

InputMask

InputMask is a text input component used to enter input in a certain format such as numeric, date, currency, email and phone.

Allowed Parent Components

Allowed Children Components

None. @InputMask should decorate a field having a simple type.

Sample Configuration

@InputMask(mask = "(999) 999-9999")
@Label("Phone Number")

InputSwitch

InputSwitch is used to select a boolean value.

Allowed Parent Components

Allowed Children Components

None. @InputSwitch should decorate a field having a simple type.

Sample Configuration

@Label("On/Off")
@InputSwitch
private boolean on;

Image

An image component used for displaying images.

Allowed Parent Components

None.

Allowed Children Components

None. @Image should not decorate a field and will typically be used as an annotation attribute in other components.

Sample Configuration

@MenuPanel(imgType = Image.Type.SVG, imgSrc = "notesIcon")
private VMPVisits vmpVisits;

Label

Label is used to display label text for a view component.

@Label can be used on all View annotations (e.g. Page, Tile, TextBox, etc.), wherever content is necessary. Multiple @Label annotations can be provided for managing content for different locales.

Sample Configuration

@Label("First Name")
private String firstName;

@Label(value="Last Name")
private String lastName;

@Label(value = "Select 3" , helpText = "Please select atleast 3 cities")
@CheckBoxGroup
private String[] city;

@Tile
@Label("Dashboard")
private VTDashboard vtDashboard;

@Page
@Label(" ")
private VPDashboard vpDashboardWithEmptyLabel;

@Label(value="Test Label C in English", helpText="some tooltip text here C")
@Label(value="Test Label A in French", localeLanguageTag="fr")
private String staticText;

@Textbox
private String addressline;

Link

Link is a hyperlink component used for navigation or user interaction of displayed text.

Allowed Parent Components

CardDetail, Grid, LinkMenu, Menu, Section

Allowed Children Components

None. @Link should decorate a field having a simple type.

Sample Configuration

// UI Navigation to page vpHome under domain petclinic
@Link(url = "/h/petclinic/vpHome")
private String linkToHome;

// Executes a request against _subscribe, and sets the image
@Link(url = "/notifications/_subscribe:{id}/_process", b="$executeAnd$configAnd$nav", method = "POST")
private String subscribeToEmailNotifications;

// Creates an external link, as in a link navigating outside of the context of the Nimbus framework.
@Link(url = "https://www.mywebsite.com", value = Link.Type.EXTERNAL, target = "_new", rel = "nofollow")
private String myWebsiteLink;

LinkMenu is a dropdown component used for displaying links within a Grid row.

Allowed Parent Components

Grid

Allowed Children Components

Link

Sample Configuration

@LinkMenu
private VLMMain vlmMain;

@Model
@Getter @Setter
private static class VLMMain {

    // Display a link that performs some @Config action
    @Label(value = "View Case")
    @Link
    @Config(url = "...")
    private String viewCase;

    // Display a link that performs some @Config action and uses an image icon.
    @Label(value = "Assign Case Owner")
    @Link(imgSrc = "task.svg")
    @Config(url = "...")
    private String assignCase;

    // Display a link that performs an external navigation in a new tab and passing a dynamic value
    @Link(value = Type.EXTERNAL, target = "_blank", url = "${app.endpoints.documents}/showDocument.aspx?documentid={documentId}")
    @Path(linked = false)
    private String viewDoc;

    private String documentId;
}

Menu is a container intended to display other navigation components.

Allowed Parent Components

Allowed Children Components

Link

Sample Configuration

@Menu
private SideMenu sideMenu;

@Model
@Getter @Setter
public static class SideMenu {

    @Link(url = "#")
    private String home;

    @Link(url = "#")
    private String signup;
}

MenuLink is nestable menu link component that is exclusively used with MenuPanel.

Allowed Parent Components

MenuPanel

Allowed Children Components

None. @MenuLink should decorate a field having a simple type.

Sample Configuration

@Label("Link 1")
@MenuLink
private String link1;

@Label("Link 2")
@MenuLink
private String link2;

MenuPanel is a hybrid of accordion-tree components.

Allowed Parent Components

MenuPanel, Page

Allowed Children Components

MenuLink, MenuPanel

Attributes

(Optional) flow
- If specified, aids the breadcrumb to identify the parent domain reference and renders the links correctly when a domain(other than the parent domain reference) and page is configured as a menulink

Sample Configuration

@MenuPanel
private VMPView vmpView;

@Model
@Getter @Setter
public static class VMPView {

    @Label("Show View...")
    @MenuLink
    private String showView;

    @Label("Appearance")
    @MenuPanel(flow="domainAalias")
    private VMPAppearance appearance;

    @Model
    @Getter @Setter
    public static class VMPAppearance {

        @Label("Toggle Full Screen")
        @MenuLink(url="domainAalias/page1")
        private String toggleFullScreen;

        @Label("Toggle Always on Top")
        @MenuLink(url="domainBalias/page1")
        private String toggleAlwaysOnTop;

        @Label("Toggle with Animation")
        @MenuLink(url="domainAalias/page2")
        private String toggleWithAnimation;
    }
}

In the above configuration, the MenuLink has a url that points to either domainAalias or domainBalias. Lets say VMPView belongs to the domain that is the layout of the domainA. In other words, the view domain A has the layout of MenuPanel and MenuLink. So initially, When 'toggle full screen' MenuLink is clicked the breadcrumb would say - Home→Toggle Full Screen When 'Toggle Always on Top' MenuLink is clicked, the breadcrumb would say Home→Toggle Always On Top. When 'Toggle with Animation' is clicked the breadcrumb would say Home→Toggle With Animation Its important to note that even though the transition is from domainBalias to domainAalias, the flow attribute tells the MenuPanel that the parent flow of MenuLink clicked is domainAalias. The value domainAalias is looked up in the breadcrumb list and the value is appended as a suffix.

Modal is a container to display content in an overlay window.

Allowed Parent Components

Tile

Allowed Children Components

Sample Configuration

@Label("Modal Title")
@Modal
private VMMyModal vmMyModal;

@Model
@Getter @Setter
public static class VMMyModal {

    @Section
    private VSMain vs;

    @Model
    @Getter @Setter
    public static class VSMain { ... }
}

Displaying @Modal on Load

@Modal makes use of @ParamContext to render it’s visible property to false during initialization by default. This and other similiar behaviors can be overridden by supplying the context attribute of @Modal with a @ParamContext.

@Modal(context = @ParamContext(enabled = true, visible = true))
private VMMyModal vmMyModal;

public static class VMMyModal { ... }

See ParamContext for more details.

Page

Page is a container component that groups a collection of contents.

Allowed Parent Components

Domain

Allowed Children Components

Tile

Sample Configuration

@Page(defaultPage = true)
private VPHome vpHome;

@Page
private VPPets vpPets;

@Model
@Getter @Setter
public static class VPHome {

    @Tile
    private VTMain vtMain;

    @Model
    @Getter @Setter
    public static class VTMain { ... }
}

@Model
@Getter @Setter
public static class VPPets { ... }

TODO

Allowed Parent Components

TODO

Allowed Children Components

TODO

Sample Configuration

@PageHeader(PageHeader.Property.USERNAME)
private String fullName;

Paragraph

Paragraph is a container for displaying text content.

Allowed Parent Components

Form, Header, Section

Allowed Children Components

None. @Paragraph should decorate a field having a simple type.

Sample Configuration

@Paragraph("Hello! Welcome to Pet Clinic.")
private String welcome;

PickList

PickList is used to reorder items between different lists.

Allowed Parent Components

Allowed Children Components

PickListSelected

Sample Configuration

@PickList(sourceHeader = "Available Category", targetHeader = "Selected Category")
@Values(value = SomeCategory.class)
private PicklistType category;

@MapsTo.Type(SomeClass.class)
@Getter @Setter
public static class PicklistType {

    @PickListSelected(postEventOnChange = true)
    @Path("category")
    @Values(value = SomeCategory.class)
    @NotNull
    private String[] selected;
}

Using @PickList with Dynamic Values

The @PickList implementation is works closely with Values. In the previous sample configuration @PickList and @PickListSelected are using the same @Values source. If the values assigned to the @PickList component need to be conditionally set, meaning that the values on the source list are able to change, ValuesConditional can be used. See the following example:

@ComboBox(postEventOnChange = true)
@Values(value = petType.class)
@ValuesConditional(target = "../category", condition = {
    @ValuesConditional.Condition(when = "state == 'Dog'", then = @Values(value = DogCategory.class)),
    @ValuesConditional.Condition(when = "state == 'Cat'", then = @Values(value = CatCategory.class))
})
@VisibleConditional(targetPath = { "../category" }, when = "state != 'Horse'")
@EnableConditional(targetPath = { "../category" }, when = "state != 'Parrot'")
private String type;

@PickList(sourceHeader = "Available Category", targetHeader = "Selected Category")
private PicklistType category;

@MapsTo.Type(SomeClass.class)
@Getter @Setter
public static class PicklistType {

    @PickListSelected(postEventOnChange = true)
    @Path("category")
    @Values(value = AllCategory.class)
    @NotNull
    private String[] selected;
}

One caveat to this implementation is that the @PickListSelected component should have it’s values set to the comprehensive set of possible values that the parent source list could contain. (e.g. The values in DogCategory.class and CatCategory.class should be contained in AllCategory.class). Not doing so may result in undesirable results.

PickListSelected

PickListSelected is a required supplementary configuration for PickList. The @PickList works exclusively with @PickListSelected by providing the UI a server-side location to store the selected values and any other metadata associated with those selected values.

Allowed Parent Components

PickList

Allowed Children Components

None. @PickListSelected should decorate an array or collection.

Sample Configuration

@PickListSelected(postEventOnChange = true)
@Path("category")
@Values(value = AllCategory.class)
@NotNull
private String[] selected;

Radio

Radio is an extension to standard radio button element.

Allowed Parent Components

Allowed Children Components

None. @Radio should decorate a field having a Boolean or boolean value.

Sample Configuration

@Label("Some question:")
@Radio(postEventOnChange = true, controlId = "27")
@Values(url="~/client/orgname/staticCodeValue/_search?fn=lookup&where=staticCodeValue.paramCode.eq('/q14')")
@Path
private String q14;

RichText

RichText is a rich text editor based on <a href="https://www.primefaces.org/primeng/#/editor">PrimeNG’s Editor</a>.

Allowed Parent Components

Allowed Children Components

None. @RichText should decorate a field having a simple type.

Sample Configuration

@RichText
private String richTextbox;

Displaying Readonly Content

The rich text editor supports readonly mode, which makes the field a true readonly form field that preserves rich text HTML formatting and removes any extra rich text features (e.g. toolbar and other similar features).

Sample Configuration

@RichText(readOnly = true)
private String richTextbox;

Tip	Use `readOnly` when needing to simply display the state of a decorated field containing an HTML formatted string.

Configuring the Toolbar

The rich text editor toolbar by default has most of the available features enabled by default (see the Javadoc for explicit details). Toolbar features can be enabled/disabled via the following:

Sample Configuration

@RichText(toolbarFeatures = { ToolbarFeature.BOLD, ToolbarFeature.ITALIC, ToolbarFeature.UNDERLINE })
private String richTextbox;

Configuring Fonts

Assuming the Toolbar feature ToolbarFeature.FONT is enabled, the fonts that are able to be used are entirely configurable and controlled by providing the following:

A unique string value for the font label
A CSS definition within the client application styles

Sample Configuration

@RichText
@Fonts({ "Times New Roman", "CoolFont" })
private String richTextbox;

Sample Configuration

.ql-editor .ql-font-times-new-roman {
    font-family: "Times New Roman";
}
.ql-editor .ql-font-cool-font {
    font-family: "Cool Font";
}

Note	In order to use custom fonts (such as `"Cool Font"`), clients must ensure to load any/all necessary font files (e.g. `.woff`, `.ttf`).

Section

Section is a container component that groups a collection of contents.

Allowed Parent Components

Grid, Modal, Section, Tile, Tab

Allowed Children Components

Accordion, Button, ButtonGroup, CardDetail, CardDetailsGrid, Chart, ComboBox, Form, Grid, Link, Menu, Paragraph, StaticText, TextBox, Tab

Sample Configuration

@Section
private VSMain vsMain;

@Model
@Getter @Setter
public static class VSMain { ... }

Signature

Signature is an HTML canvas element that can be used to capture signature content. The @Signature component will render the following on the UI:

canvas on which the user can draw
Clear button, which will clear the canvas
Accept button, which will store the user-drawn content captured in canvas as a data-url representation
<img>, which contains the stored image after clicking accept button

Allowed Parent Components

Allowed Children Components

None. @Signature should decorate a field having a simple type.

Sample Configuration

@Signature(postEventOnChange = true)
private String employeeSignature;

StaticText

StaticText is a container for displaying html content or text "as is" to the UI. @StaticText may be used to bind unsafe HTML directly onto the page.

With great power comes great responsibility.

— Voltaire

Allowed Parent Components

CardDetail, Section

Allowed Children Components

None. @StaticText should decorate a field having a simple type.

Sample Configuration

@StaticText
private String description;

Tab

Tab is a container component to group content with TabPanels.

Allowed Parent Components

Tile Section

Allowed Children Components

@TabPanel. TabPanel can support section or another Tab within it.

Sample Configuration

@Tab
    @Path(linked=false)
    private Tab tab;

     @Model
@Getter @Setter
public static class Tab  {

    @Label("Tab Panel")
    @TabPanel
    @Path(linked=false)
    private TabPanel panel;

}

    @Model
@Getter @Setter
public static class TabPanel  {


 @Section
 @Path(linked=false)
 private TabContent tabContent;


    @Tab
    @Path(linked=false)
    private AnotherTabPanel anotherPanel;

}

TextArea

TextArea is a text input component that allows for a specified number of rows.

Allowed Parent Components

Allowed Children Components

None. @TextArea should decorate a field having a simple type.

Sample Configuration

@TextArea
private String description;

TextBox

TextBox is a text input component.

Allowed Parent Components