mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-08 16:25:58 +08:00
addressing review feedback, enhancing component knowledge
This commit is contained in:
parent
2c2ab90576
commit
de1e6e357f
@ -188,7 +188,7 @@ npm install -g @salesforce/cli@latest
|
|||||||
### Step 2: Deploy Base Page
|
### Step 2: Deploy Base Page
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
sf project deploy start --source-dir force-app/main/default/flexipages
|
sf project deploy start --dry-run --source-dir force-app/main/default/flexipages
|
||||||
```
|
```
|
||||||
|
|
||||||
**Deploy early, deploy often.** Start with the bootstrapped page, validate it works, then enhance.
|
**Deploy early, deploy often.** Start with the bootstrapped page, validate it works, then enhance.
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
# fieldSection
|
# flexipage:fieldSection
|
||||||
|
|
||||||
**Use for:** Displaying fields in columns.
|
**Use for:** Displaying fields in columns.
|
||||||
|
|
||||||
@ -7,10 +7,108 @@
|
|||||||
2. Column Facets (Facet type)
|
2. Column Facets (Facet type)
|
||||||
3. Field Facets (Facet type)
|
3. Field Facets (Facet type)
|
||||||
|
|
||||||
|
**Critical:** the `columns` property must match the name of the facet where the columns are defined. It is *not* a number.
|
||||||
|
|
||||||
**Referenced in component property:**
|
**Referenced in component property:**
|
||||||
```xml
|
```xml
|
||||||
<componentInstanceProperties>
|
<!-- field facet for first column -->
|
||||||
<name>columns</name>
|
<flexiPageRegions>
|
||||||
<value>Facet-{uuid}</value>
|
<itemInstances>
|
||||||
</componentInstanceProperties>
|
<fieldInstance>
|
||||||
|
<fieldInstanceProperties>
|
||||||
|
<name>uiBehavior</name>
|
||||||
|
<value>required</value>
|
||||||
|
</fieldInstanceProperties>
|
||||||
|
<fieldItem>Record.Field0</fieldItem>
|
||||||
|
<identifier>RecordColumn1Field0</identifier>
|
||||||
|
</fieldInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<itemInstances>
|
||||||
|
<fieldInstance>
|
||||||
|
<fieldInstanceProperties>
|
||||||
|
<name>uiBehavior</name>
|
||||||
|
<value>none</value>
|
||||||
|
</fieldInstanceProperties>
|
||||||
|
<fieldItem>Record.Field1</fieldItem>
|
||||||
|
<identifier>RecordColumn1Field1</identifier>
|
||||||
|
</fieldInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<!-- any additional fields in first column -->
|
||||||
|
<name>Facet-FieldSection-Column1</name>
|
||||||
|
<type>Facet</type>
|
||||||
|
</flexiPageRegions>
|
||||||
|
<!-- field facet for second column -->
|
||||||
|
<flexiPageRegions>
|
||||||
|
<itemInstances>
|
||||||
|
<fieldInstance>
|
||||||
|
<fieldInstanceProperties>
|
||||||
|
<name>uiBehavior</name>
|
||||||
|
<value>none</value>
|
||||||
|
</fieldInstanceProperties>
|
||||||
|
<fieldItem>Record.Field2</fieldItem>
|
||||||
|
<identifier>RecordColumn2Field0</identifier>
|
||||||
|
</fieldInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<itemInstances>
|
||||||
|
<fieldInstance>
|
||||||
|
<fieldInstanceProperties>
|
||||||
|
<name>uiBehavior</name>
|
||||||
|
<value>none</value>
|
||||||
|
</fieldInstanceProperties>
|
||||||
|
<fieldItem>Record.Type</fieldItem>
|
||||||
|
<identifier>RecordColumn2Field1</identifier>
|
||||||
|
</fieldInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<!-- any additional fields in second column -->
|
||||||
|
<name>Facet-FieldSection-Column2</name>
|
||||||
|
<type>Facet</type>
|
||||||
|
</flexiPageRegions>
|
||||||
|
<!-- columns facet -->
|
||||||
|
<flexiPageRegions>
|
||||||
|
<itemInstances>
|
||||||
|
<componentInstance>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>body</name>
|
||||||
|
<value>Facet-FieldSection-Column1</value> <!-- matches name of field facet for first column -->
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentName>flexipage:column</componentName>
|
||||||
|
<identifier>flexipage_column1</identifier>
|
||||||
|
</componentInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<itemInstances>
|
||||||
|
<componentInstance>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>body</name>
|
||||||
|
<value>Facet-FieldSection-Column2</value> <!-- matches name of field facet for second column -->
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentName>flexipage:column</componentName>
|
||||||
|
<identifier>flexipage_column2</identifier>
|
||||||
|
</componentInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<name>Facet-FieldSection-Columns</name>
|
||||||
|
<type>Facet</type>
|
||||||
|
</flexiPageRegions>
|
||||||
|
<!-- template region -->
|
||||||
|
<flexiPageRegions>
|
||||||
|
<itemInstances>
|
||||||
|
<componentInstance>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>columns</name>
|
||||||
|
<value>Facet-FieldSection-Columns</value> <!-- matches name of columns facet -->
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>horizontalAlignment</name>
|
||||||
|
<value>false</value>
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>label</name>
|
||||||
|
<value>Information</value>
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentName>flexipage:fieldSection</componentName>
|
||||||
|
<identifier>flexipage_fieldSection</identifier>
|
||||||
|
</componentInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<name>main</name>
|
||||||
|
<type>Region</type>
|
||||||
|
</flexiPageRegions>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
# Rich Text Component
|
# flexipage:richText (Rich Text Component)
|
||||||
|
|
||||||
**Component name:** `flexipage:richText`
|
**Component name:** `flexipage:richText`
|
||||||
|
|
||||||
@ -17,10 +17,12 @@
|
|||||||
<name>decorate</name>
|
<name>decorate</name>
|
||||||
<value>true</value>
|
<value>true</value>
|
||||||
</componentInstanceProperties>
|
</componentInstanceProperties>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>richTextValue</name>
|
||||||
|
<value>{encoded text goes here}</value>
|
||||||
|
</componentInstanceProperties>
|
||||||
<componentName>flexipage:richText</componentName>
|
<componentName>flexipage:richText</componentName>
|
||||||
<identifier>flexipage_richText</identifier>
|
<identifier>flexipage_richText_{uuid}</identifier>
|
||||||
</componentInstance>
|
</componentInstance>
|
||||||
</itemInstances>
|
</itemInstances>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Identifier Pattern:** `flexipage_richText` or `flexipage_richText_{sequence}`
|
|
||||||
|
|||||||
@ -1,12 +1,79 @@
|
|||||||
# dynamicHighlights (RecordPage Header)
|
# record_flexipage:dynamicHighlights (RecordPage Header)
|
||||||
|
|
||||||
|
**Use for:** Displaying key record information and actions prominently. This component is particularly useful for providing a quick and configurable overview of record details.
|
||||||
|
|
||||||
**Location:** Must be in `header` region.
|
**Location:** Must be in `header` region.
|
||||||
|
|
||||||
**Explicit Fields** (via CLI): Use the most important fields to show a summary of the record. The single primary field is used to identify the record, like a name. The secondary fields (max 12, recommended 6) are used as a summary of the record.
|
**Explicit Fields:** Use the most important fields to show a summary of the record. The single primary field is used to identify the record, like a name. The secondary fields (max 12, recommended 6) are used as a summary of the record.
|
||||||
|
|
||||||
```bash
|
**Structure:** Requires three flexiPageRegions: one template region (Region type) that contains the component and two facets (one for the primary field and one for the secondary fields) that are referenced by the component.
|
||||||
--primary-field Name
|
|
||||||
--secondary-fields Phone,Industry,AnnualRevenue
|
```xml
|
||||||
|
<flexiPageRegions>
|
||||||
|
<itemInstances>
|
||||||
|
<fieldInstance>
|
||||||
|
<fieldInstanceProperties>
|
||||||
|
<name>uiBehavior</name>
|
||||||
|
<value>none</value>
|
||||||
|
</fieldInstanceProperties>
|
||||||
|
<fieldItem>Record.Name</fieldItem> <!-- or other primary field -->
|
||||||
|
<identifier>RecordNamePrimaryField</identifier>
|
||||||
|
</fieldInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<name>Facet-PrimaryFields</name>
|
||||||
|
<type>Facet</type>
|
||||||
|
</flexiPageRegions>
|
||||||
|
|
||||||
|
<flexiPageRegions>
|
||||||
|
<itemInstances>
|
||||||
|
<fieldInstance>
|
||||||
|
<fieldInstanceProperties>
|
||||||
|
<name>uiBehavior</name>
|
||||||
|
<value>none</value>
|
||||||
|
</fieldInstanceProperties>
|
||||||
|
<fieldItem>Record.Phone</fieldItem> <!-- or other secondary field -->
|
||||||
|
<identifier>RecordPhoneSecondaryField0</identifier>
|
||||||
|
</fieldInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<!-- additional secondary fields -->
|
||||||
|
<itemInstances>
|
||||||
|
...
|
||||||
|
</itemInstances>
|
||||||
|
|
||||||
|
<name>Facet-SecondaryFields</name>
|
||||||
|
<type>Facet</type>
|
||||||
|
</flexiPageRegions>
|
||||||
|
<flexiPageRegions>
|
||||||
|
<itemInstances>
|
||||||
|
<componentInstance>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>actionNames</name>
|
||||||
|
<valueList>
|
||||||
|
<valueListItems>
|
||||||
|
<value>Edit</value>
|
||||||
|
</valueListItems>
|
||||||
|
<valueListItems>
|
||||||
|
<value>Delete</value>
|
||||||
|
</valueListItems>
|
||||||
|
</valueList>
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>numVisibleActions</name>
|
||||||
|
<value>3</value>
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>primaryField</name>
|
||||||
|
<value>Facet-PrimaryFields</value> <!-- reference to facet containing primary field -->
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentInstanceProperties>
|
||||||
|
<name>secondaryFields</name>
|
||||||
|
<value>Facet-SecondaryFields</value> <!-- reference to facet containing secondary fields -->
|
||||||
|
</componentInstanceProperties>
|
||||||
|
<componentName>record_flexipage:dynamicHighlights</componentName>
|
||||||
|
<identifier>record_flexipage_dynamicHighlights</identifier>
|
||||||
|
</componentInstance>
|
||||||
|
</itemInstances>
|
||||||
|
<name>header</name>
|
||||||
|
<type>Region</type>
|
||||||
|
</flexiPageRegions>
|
||||||
```
|
```
|
||||||
|
|
||||||
CLI generates Facets with field references automatically.
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user