Skip to content

Instantly share code, notes, and snippets.

@cchrisv
Last active February 5, 2020 22:49
Show Gist options
  • Save cchrisv/c86913683572254eff3cdebc732f2150 to your computer and use it in GitHub Desktop.
Save cchrisv/c86913683572254eff3cdebc732f2150 to your computer and use it in GitHub Desktop.
import {
LightningElement,
api,
track
} from "lwc";
import {
FlowAttributeChangeEvent
} from "lightning/flowSupport";
import {
FlowNavigationNextEvent
} from "lightning/flowSupport";
/* eslint-disable no-alert */
/* eslint-disable no-console */
export default class visualNav extends LightningElement {
@api value;
@track item;
@api choiceLabels; //string collection
@api choiceSubLabels; //string collection
@api choiceValues; //string collection
@api choiceIcons; //string collection
@api showIcons = false;
@api showSubLabel = false;
@api autoNext = false;
@api extraValue;
@api iconSize;
@api required;
@api outputLabel;
@api outputSubLabel;
@api outputUniqueId;
@api iconVariant;
@api buttonSize = 165;
@track items = [];
connectedCallback() {
console.log("initializing visualPicker ");
console.log("showIcons is: " + this.showIcons);
console.log("choiceIcons is: " + this.choiceIcons);
let items = [];
let index = 0;
console.log("choiceLabels is: " + this.choiceLabels);
this.choiceLabels.forEach(label => {
items.push({
label: label,
sublabel: this.choiceSubLabels[index],
value: this.choiceValues[index],
icon: this.choiceIcons[index],
uniqueId: this.choiceValues[index] + "+" + index
});
console.log("items is: " + items);
index += 1;
});
this.items = items;
}
@api
validate() {
//If the component is invalid, return the isValid parameter as false and return an error message.
console.log(
"entering validate: required=" + this.required + " value=" + this.value
);
let errorMessage = "You must make a selection to continue";
if (this.required === true && !this.value) {
return {
isValid: false,
errorMessage: errorMessage
};
}
return {
isValid: true
};
}
handleChange(event) {
this.outputLabel = event.target.dataset.outputlabel;
this.outputSubLabel = event.target.dataset.outputsublabel;
this.value = event.target.dataset.outputvalue;
this.outputUniqueId = event.target.dataset.outputunique;
console.log("outputLabel: ", this.outputLabel);
console.log("outputSubLabel: ", this.outputSubLabel);
console.log("value: ", this.value);
console.log("uniqueId: ", this.outputUniqueId);
this.dispatchEvent(new FlowAttributeChangeEvent("value", this.value));
this.dispatchEvent(
new FlowAttributeChangeEvent("outputLabel", this.outputLabel)
);
this.dispatchEvent(
new FlowAttributeChangeEvent("outputSubLabel", this.outputSubLabel)
);
if (this.autoNext === true) {
console.log("autoNext: ", this.autoNext);
const nextNavigationEvent = new FlowNavigationNextEvent("navigate");
this.dispatchEvent(nextNavigationEvent);
}
}
handleKeyUp(event) {
console.log("keyCode: ", event.keyCode);
this.outputLabel = event.target.dataset.outputlabel;
this.outputSubLabel = event.target.dataset.outputsublabel;
this.value = event.target.dataset.outputvalue;
this.outputUniqueId = event.target.dataset.outputunique;
console.log("outputLabel: ", this.outputLabel);
console.log("outputSubLabel: ", this.outputSubLabel);
console.log("value: ", this.value);
console.log("uniqueId: ", this.outputUniqueId);
this.dispatchEvent(new FlowAttributeChangeEvent("value", this.value));
this.dispatchEvent(
new FlowAttributeChangeEvent("outputLabel", this.outputLabel)
);
this.dispatchEvent(
new FlowAttributeChangeEvent("outputSubLabel", this.outputSubLabel)
);
if (event.keyCode === 13 || event.keyCode === 32) {
const nextNavigationEvent = new FlowNavigationNextEvent("navigate");
this.dispatchEvent(nextNavigationEvent);
}
}
get sizeWidth() {
return 'width: ' + this.buttonSize + 'px ; height: ' + this.buttonSize + 'px';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment