sc-party
1 Purpose
This document is a user guide for the sc-party component as of version 5.11.
sc-party places a party field on a form, allowing the user to enter a person's details (title, first name and surname).
The sc-party definition provides fields for setting the properties of the party field and is fully described below.
2 Definition
sc-party is defined by a set of name/value pair fields consisting of:
- Required system fields
- Required customizable fields
- Optional customizable fields
Note:
- Default values for fields described in the tables below are shown in bold text.
2.1 Required System Fields
| Field | Valid Values | Description |
|---|---|---|
| componentName | sc-party | The component name. Example: "componentName": "sc-party" |
2.2 Required Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| name | Any value written in camel case. | Defines the name of the party field in the document and database. Example: "name": "testScParty" |
2.3 Optional Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| defaultValueParty | Set of values | A set of 1, 2 or 3 values to initially load into the title, firstName and surname components of the sc-party field.If an invalid value is specified for the title component, then the title component will display without a value.Example: "defaultValueParty": "{'title':'Miss','firstName':'Louisa','surname':'McAvoy'}"Example: "defaultValueParty": "{'firstName','Louisa','surname':'McAvoy'}" |
| Defaults to displaying the labels "Title", "First Name" and "Surname" within the corresponding components of the sc-party field. | ||
| disableSave | true | Changing the sc-party field value (i.e. entering or editing a party value) does not trigger the Save icon to flash. Exiting the form without saving changes to the sc-party field value does not trigger a warning message to display. In the Angular version of the sc-party component, clicking the Save icon will not save the sc-party field value to the document. In the AngularJS version of the sc-party component, clicking the Save icon will save the sc-party field value to the document. Example: "disableSave": true |
| false | Default value. Changing the sc-party field value (i.e. entering or editing a party value) does trigger the Save icon to flash. Exiting the form without saving changes to the sc-party field value does trigger a warning message to display. In both the Angular and AngularJS versions of the sc-party component, clicking the Save icon will save the sc-party field value to the document. |
|
| dropDownList | Array of titles | Lists the title values for the Party Title drop down field. Example: "dropDownList": ["Mr","Mrs","Miss"] |
Defaults to:"dropDownList": ["Mr","Mrs","Miss","Ms","Dr"] |
||
| enabled | false | The party field is greyed out. A Stop icon appears on mouseover. A value cannot be entered in the party field. Example: "enabled": false |
| true | Default value. Values can be entered in the party field. |
|
| fullWidth | true | The party field displays full width on the form. Example: "fullWidth": true |
| false | Default value. The party field does not display full width on the form. |
|
| label | Any value | Defines the name of the party field on the form i.e. the field label. Example: "label": "Test sc-party" |
| Defaults to the numeric field displays without a field label on the form. | ||
| mandatory | true | The party field displays as mandatory (i.e. label in red text with an asterisk). Saving without a value, a message prompts the user to enter a value for the party field. Example: "mandatory": true |
| false | Default value. The party field displays as optional (i.e. label in black text). |
|
| mandatoryFields | Array of party fields | Lists which Party fields are mandatory when the "mandatory" field is set to "true". Saving without entering a value, a message prompts the user to enter a value for the party field. Example: "mandatoryFields": ["firstName","surname"] |
| ["title","firstName","surname"] | Default value when the "mandatory" field is set to "true". Note:: If "mandatory" is set to false, then no mandatory checks are enforced, regardless of the "MandatoryFields" value. |
|
| visible | false | The party field is not visible on the form. Example: "visible": false |
| true | Default value. The party field is visible on the form. |
3 Typical Definition
sc-party defined with the typically needed fields.
{
"componentName": "sc-party",
"name": "testScPartyComponent",
"fullWidth":true,
"label": "Test sc-party",
}
One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.
"defaultValueParty": "{'title':'Miss','firstName':'Louisa','surname':'McAvoy'}",
"disableSave":true,
"dropDownList": [
"Mr",
"Mrs",
"Miss"
],
"enabled":false,
"mandatory": true,
"mandatoryFields": [
"firstName",
"surname",
],
"visible":false
4 Examples
Example 1
sc-party defined with the typically needed fields.
{
"componentName": "sc-party",
"name": "testScPartyComponent",
"fullWidth":true,
"label": "Test sc-party",
}
Resulting field on the form:
Resulting field on the form after entering and saving data:
Resulting field in the document and database:
"testScParty": {
"title": "Mr",
"firstName": "James",
"surname": "McAllan"
}
Example 2
sc-party defined with the typically needed fields plus the "dropDownList", "mandatory" and "mandatoryFields", fields.
{
"componentName": "sc-party",
"name": "testScParty",
"label": "Test sc-party",
"fullWidth": true,
"dropDownList": [
"Mr",
"Mrs",
"Miss"
],
"mandatory": true,
"mandatoryFields": [
"firstName",
"surname"
]
}
Resulting field on the form:
Resulting field on the form after entering a value in one of the sc-party fields:
First Name is shown in red text as it was defined as a mandatory sc-party field.
Salutation is shown in black text as it was not defined as a mandatory sc-party field.
Saving without a value in a mandatory field will display an error message.
Resulting field on the form after entering values in the mandatory fields and saving:
