Skip to content

Commit

Permalink
Add Custom button (Screen Flow) functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@engPabloMartinez
engPabloMartinez committed Dec 9, 2023
1 parent 9971927 commit 841d6bd
Show file tree
Hide file tree
Showing 9 changed files with 426 additions and 96 deletions.
43 changes: 37 additions & 6 deletions force-app/main/default/lwc/odDatatable/odDatatable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@ import { FlowNavigationNextEvent } from 'lightning/flowSupport';
import CSSStyles from '@salesforce/resourceUrl/OD_DatatableCSS';
import getFieldsForObject from '@salesforce/apex/OD_ConfigurationEditorController.getFieldsForObject';
import saveRecords from '@salesforce/apex/OD_ConfigurationEditorController.saveRecords';
import { YES_NO, EMPTY_STRING, EVENTS, ROW_BUTTON_CONFIGURATION, INLINE_FLOW } from 'c/odDatatableConstants';
import {
YES_NO,
EMPTY_STRING,
EVENTS,
ROW_BUTTON_CONFIGURATION,
INLINE_FLOW,
ROW_BUTTON_TYPE,
} from 'c/odDatatableConstants';
import { reduceErrors, getFieldType, getPrecision, generateRandomNumber } from 'c/odDatatableUtils';
import OdDatatableFlow from 'c/odDatatableFlow';

const ROW_BUTTON_TYPE = 'rowButtonType';

export default class ODDatatable extends LightningElement {
// internal use
@api uniqueTableName;
Expand Down Expand Up @@ -478,7 +483,7 @@ export default class ODDatatable extends LightningElement {
this._doUpdateOutputs(newRecord, EVENTS.ADD);
}

async _doOpenFlow(record = undefined) {
_doAddEditWithFlow(record = undefined) {
const modalProps = {
size: 'small',
label: 'Edit or Add from a flow',
Expand All @@ -493,7 +498,30 @@ export default class ODDatatable extends LightningElement {
// this is an edit
modalProps.flowName = this.editFlowName;
modalProps.inputVariables = this.editFlowInputVariables ? JSON.parse(this.editFlowInputVariables) : [];
}

this._doOpenFlow(modalProps, record);
}

_doOpenFlowButton(fieldName, record) {
const modalProps = {
size: 'small',
label: 'Flow Button',
};

const column = this.columnsToShow.find((cl) => cl.fieldName === fieldName);

// this is an edit
modalProps.flowName = column.typeAttributes.config.flowName;
modalProps.inputVariables = column.typeAttributes.config.flowInputVariables
? JSON.parse(column.typeAttributes.config.flowInputVariables)
: [];

this._doOpenFlow(modalProps, record);
}

async _doOpenFlow(modalProps, record = undefined) {
if (record) {
modalProps.inputVariables.unshift({
name: 'recordId',
type: 'String',
Expand Down Expand Up @@ -685,7 +713,7 @@ export default class ODDatatable extends LightningElement {
break;
case EVENTS.CHANGE:
if (this._editWithFlow) {
this._doOpenFlow(record);
this._doAddEditWithFlow(record);
} else {
this._doChangeField(recordIndex, fieldName, value);

Expand All @@ -696,6 +724,9 @@ export default class ODDatatable extends LightningElement {
record = this.recordsToShow[recordIndex];
}

break;
case EVENTS.OPEN_FLOW:
this._doOpenFlowButton(fieldName, record);
break;
default:
break;
Expand All @@ -710,7 +741,7 @@ export default class ODDatatable extends LightningElement {
handleAdd() {
// add the record to the table with the defaults if inline, otherwise open the flow to add
if (this._addWithFlow) {
this._doOpenFlow();
this._doAddEditWithFlow();
} else {
this._doAddRecord();
}
Expand Down
165 changes: 124 additions & 41 deletions ...app/main/default/lwc/odDatatableConfigurationColumns/odDatatableConfigurationColumns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@
Select the columns you want to add to the table and configure each one
</span>
<c-od-datatable-input-generic
label="Object Fields"
field-name="fields"
type={theType}
editable
class="alignItemsCenter slds-grid slds-p-around--xx-small"
extra-container-classes="slds-size--11-of-12"
extra-label-classes="slds-form-element__legend"
value={selectedFields}
options={fields}
placeholder="Search field..."
Expand All @@ -29,6 +33,16 @@
auto-focus
>
</c-od-datatable-input-generic>
<div class="slds-p-around--xx-small">
<lightning-button
label="Add Custom Column"
title="Add Custom Column"
icon-name="utility:new"
onclick={handleAddNonObjectColumn}
variant="brand"
>
</lightning-button>
</div>
<template lwc:if={fieldsToDisplayTable.length}>
<div class="slds-m-top--medium slds-p-around--xx-small">
<table class="columnsTable">
Expand All @@ -40,7 +54,7 @@
<th class="slds-p-around--x-small slds-text-align--center" style="width: 100px">Editable?</th>
<th class="slds-p-around--x-small slds-text-align--center" style="width: 100px">Required?</th>
<th class="slds-p-around--x-small slds-text-align--center" style="width: 100px">Hidden?</th>
<th class="slds-p-around--x-small" style="width: 250px">Default Value</th>
<th class="slds-p-around--x-small" style="width: 250px">Default Value / Custom Column Configuration</th>
<th class="slds-p-around--x-small" style="width: 140px">Initial Width (px)</th>
<th class="slds-p-around--x-small" style="width: 80px">Order</th>
</tr>
Expand All @@ -49,36 +63,60 @@
<template for:each={fieldsToDisplayTable} for:item="field">
<tr key={field.value}>
<td>
<c-od-datatable-input-generic type={fieldTypes.TEXT} field-name="apiName" value={field.value}>
</c-od-datatable-input-generic>
<template lwc:if={field.isFieldColumn}>
<c-od-datatable-input-generic type={fieldTypes.TEXT} field-name="apiName" value={field.value}>
</c-od-datatable-input-generic>
</template>
</td>
<td>
<c-od-datatable-input-generic
type={fieldTypes.TEXT}
field-name="tableLabel"
data-field="label"
data-value={field.value}
editable
value={field.tableLabel}
onupdatefield={handleUpdateField}
>
</c-od-datatable-input-generic>
</td>
<td class="slds-grid slds-p-top--xx-small slds-wrap">
<c-od-datatable-input-generic type={fieldTypes.TEXT} field-name="type" value={field.typeSpec}>
</c-od-datatable-input-generic>
<template lwc:if={field.isLookup}>
<lightning-button
label="Configure"
title="Configure"
icon-name="utility:settings"
data-object={field.parentObjectName}
class="slds-m-left--small"
data-field={field.value}
data-configuration={field.lookupConfig}
onclick={handleOpenLookupConfiguration}
>
</lightning-button>
</template>
<td>
<div class="slds-grid slds-wrap">
<template lwc:if={field.isFieldColumn}>
<c-od-datatable-input-generic type={fieldTypes.TEXT} field-name="type" value={field.typeSpec}>
</c-od-datatable-input-generic>
<template lwc:if={field.isLookup}>
<lightning-button
label="Configure"
title="Configure"
icon-name="utility:settings"
data-object={field.parentObjectName}
class="slds-m-left--small"
data-field={field.value}
data-configuration={field.lookupConfig}
onclick={handleOpenLookupConfiguration}
>
</lightning-button>
</template>
</template>
<template lwc:elseif={field.isCustom}>
<c-od-datatable-input-generic
type={fieldTypes.SELECT}
field-name="customType"
data-custom="true"
data-value={field.value}
inside-popup-height={popupHeight}
editable
value={field.customType}
onupdatefield={handleUpdateField}
options={field.typeSpec}
opened={field.opened_customType}
onfocusdropdown={handleColumnsOnFocusDropdown}
onblurdropdown={handleColumnsOnBlurDropdown}
>
</c-od-datatable-input-generic>
</template>
</div>
</td>
<td class="slds-p-around--xx-small slds-text-align--center">
<c-od-datatable-input-generic
Expand Down Expand Up @@ -106,34 +144,67 @@
<c-od-datatable-input-generic
type={fieldTypes.CHECKBOX}
field-name="hidden"
editable={field.isFieldColumn}
data-value={field.value}
value={field.hidden}
editable
onupdatefield={handleUpdateField}
>
</c-od-datatable-input-generic>
</td>
<td>
<c-od-datatable-input-generic
type={field.typeForDefault}
field-name="defaultValue"
data-value={field.value}
inside-popup-height={popupHeight}
editable
value={field.defaultValue}
onupdatefield={handleUpdateField}
parent-object-name={field.parentObjectName}
precision={field.precision}
is-html={field.isHTML}
scale={field.scale}
max-length={field.maxLength}
options={field.options}
opened={field.opened}
onfocusdropdown={handleDefaultOnFocusDropdown}
onblurdropdown={handleDefaultOnBlurDropdown}
is-multi={field.isMulti}
>
</c-od-datatable-input-generic>
<template lwc:if={field.isFieldColumn}>
<c-od-datatable-input-generic
type={field.typeForDefault}
field-name="defaultValue"
data-value={field.value}
inside-popup-height={popupHeight}
editable
value={field.defaultValue}
onupdatefield={handleUpdateField}
parent-object-name={field.parentObjectName}
precision={field.precision}
is-html={field.isHTML}
scale={field.scale}
max-length={field.maxLength}
options={field.options}
opened={field.opened_defaultValue}
onfocusdropdown={handleColumnsOnFocusDropdown}
onblurdropdown={handleColumnsOnBlurDropdown}
is-multi={field.isMulti}
>
</c-od-datatable-input-generic>
</template>
<template lwc:elseif={field.isCustom}>
<template lwc:if={field.flow}>
<div class="slds-grid slds-wrap">
<c-od-datatable-input-generic
type={fieldTypes.SELECT}
field-name="flowName"
data-value={field.value}
inside-popup-height={popupHeight}
editable
value={field.flowName}
onupdatefield={handleUpdateField}
options={flows}
opened={field.opened_flowName}
onfocusdropdown={handleColumnsOnFocusDropdown}
onblurdropdown={handleColumnsOnBlurDropdown}
>
</c-od-datatable-input-generic>
<template lwc:if={field.flowName}>
<lightning-button
label="Conf. Flow"
title="Configure Flow Variables"
icon-name="utility:flow"
class="slds-m-left--small slds-m-top--xx-small"
data-value={field.value}
onclick={handleOpenFlowInputVariables}
>
</lightning-button>
</template>
</div>
</template>
</template>
</td>
<td>
<c-od-datatable-input-generic
Expand Down Expand Up @@ -198,11 +269,23 @@
<c-od-datatable-configuration-column-lookup
onclose={handleCloseLookupConfiguration}
object-name={lookupObjectName}
class="onTopOfEverything"
configuration={lookupConfiguration}
data-value={lookupFieldName}
onsave={handleSaveLookupConfiguration}
>
</c-od-datatable-configuration-column-lookup>
</template>

<!-- Flow Input variables popup -->
<template lwc:if={showFlowInputVariables}>
<c-od-datatable-configuration-flow-input-variables
type="editFlowInputVariables"
builder-context={builderContext}
onclose={handleCloseFlowInputVariables}
inputs={flowInputs}
object-name={objectName}
onsave={handleSaveFlowInputVariables}
>
</c-od-datatable-configuration-flow-input-variables>
</template>
</template>
Loading

0 comments on commit 841d6bd

Please sign in to comment.