Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dynamic Forms Layout without button layout changes #174

Merged
merged 6 commits into from
Oct 8, 2024
Merged

Dynamic Forms Layout without button layout changes #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
08db8cd
Dynamic Forms Layout without button layout changes
JodieM Aug 18, 2024
ad28d64
Changes to CSS to make titles Align. Change to CPE to use Title Style
JodieM Sep 1, 2024
82fc05d
Incorporating vertical space changes into this branch also
JodieM Sep 2, 2024
304a249
Modifed CSS for Dynamic Forms to be more like standard Field Sections
JodieM Sep 2, 2024
6bcbcc5
Pull Request changes
tschug Oct 8, 2024
ba1c95d
Merge branch 'main' into feature/173-dynamic-forms-styling
tschug Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .forceignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,7 @@ package.xml
**/Account/**
**/Contact/**

**/unpackaged/**
**/unpackaged/**
**/tsconfig.json

**/*.ts
83 changes: 52 additions & 31 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,61 @@
onclick={refreshCmdt}
></lightning-button-icon>
</template>
<template lwc:if={hasHeader} class="cardIcon">
<template lwc:if={showTitle}>
<h3 slot="title">
<lightning-icon
lwc:if={card.icon}
icon-name={card.icon}
size="small"
class={card.iconClass}
>
</lightning-icon>
{card.title}
</h3>
</template>
<template lwc:if={showDescription}>
<p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
</template>
</template>
<!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
<div class="slds-var-m-left_medium slds-clearfix ">
<template if:true={results}>
<template for:each={results} for:item="fld">
<c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fTextShown}
ind-size={indsSize}
ind-shape={indsShape}
ind-hover-text={fld.fHoverValue}
ind-icon={fld.fIconName}
ind-image={fld.fImageURL}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
<template lwc:if={isStandardUsage}>
<template lwc:if={hasHeader} class="cardIcon">
<template lwc:if={showTitle}>
<h3 slot="title">
<lightning-icon
lwc:if={card.icon}
icon-name={card.icon}
size="small"
class={card.iconClass}
>
</c-indicator-bundle-item>
</lightning-icon>
{card.title}
</h3>
</template>
</template>
</template>
<template lwc:else>
<div class="slds-card__body slds-card__body_inner">
<template lwc:if={showTitle}>
<div class="section-layout-container slds-section slds-is-open slds-button slds-section__title-action slds-theme_shade">
<h3 slot="title" class="slds-truncate slds-p-around_xx-small">
<span class="slds-text-heading_small" title="Section Title">{card.title}</span>
</h3>
</div>
</template>
</div>
</template>
<div class={sectionBodyClass}>
<div class="slds-col slds-grid slds-grid_vertical">
<div class="slds-col">
<template lwc:if={showDescription}>
<p class="slds-var-p-left_medium slds-var-p-right_x-small slds-var-p-bottom_small">{card.body}</p>
</template>
</div>
<div class="slds-col">
<!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
<div class="slds-var-m-left_medium slds-clearfix">
<template if:true={results}>
<template for:each={results} for:item="fld">
<c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fTextShown}
ind-size={indsSize}
ind-shape={indsShape}
ind-hover-text={fld.fHoverValue}
ind-icon={fld.fIconName}
ind-image={fld.fImageURL}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
>
</c-indicator-bundle-item>
</template>
</template>
</div>
</div>
</div>
</div>
</lightning-card>
</template>
Expand Down
14 changes: 13 additions & 1 deletion force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default class IndicatorBundle extends LightningElement {
@api flexipageRegionWidth; // Width of the container on record page
@api showDescription;
@api showTitle;
@api titleStyle = 'Lightning Card';
@api indsSize = 'large';
@api indsShape = 'base';
@api showRefresh = false;
Expand Down Expand Up @@ -57,6 +58,10 @@ export default class IndicatorBundle extends LightningElement {
}
}

get isStandardUsage(){
return this.titleStyle == 'Lightning Card';
}

initCSSVariables() {

if(this.bundle.CardIconBackground || this.bundle.CardIconForeground) {
Expand Down Expand Up @@ -108,10 +113,17 @@ export default class IndicatorBundle extends LightningElement {
}

if(this.bundle.CardIconBackground || this.bundle.CardIconForeground ){
this.card.iconClass = 'cardIcon slds-var-m-right_xx-small ';
this.card.iconClass = 'cardIcon slds-var-m-right_x-small ';
} else {
this.card.iconClass = 'slds-var-m-right_x-small ';
}

if(this.isStandardUsage != true){
this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body slds-card__body_inner';
} else {
this.card.iconClass = 'slds-media__figure slds-var-m-right_x-small';
this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
}

// console.log('Card Data');
// console.dir(JSON.stringify(this.card));
Expand Down
1 change: 1 addition & 0 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.js-meta.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
<property name="titleStyle" type="String" label="Title Style" placeholder="Lightning Card" datasource="Lightning Card,Dynamic Forms" description="Choose the Title Style: Standard Lightning Card or a style to match Dynamic Forms"/>
<property name="showTitle" type="Boolean" default="true" label="Display Title" description="Display the Indicator's Title on the component."/>
<property name="showDescription" type="Boolean" default="true" label="Display Description" description="Display the Indicator's Description on the component."/>
<property name="indsSize" type="String" label="Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>
Expand Down
20 changes: 9 additions & 11 deletions force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
<template>
<div class="slds-var-m-bottom_x-small slds-float_left">
<template if:false={record}>
<lightning-avatar
size={indSize}
variant={indShape}
initials={indText}
src={indImage}
fallback-icon-name={indIcon}
alternative-text={indHoverText}
class={indClass}>
</lightning-avatar>
</template>
<lightning-avatar
size={indSize}
variant={indShape}
initials={indText}
src={indImage}
fallback-icon-name={indIcon}
alternative-text={indHoverText}
class={indClass}>
</lightning-avatar>
</div>
</template>
Loading