lwc#api JavaScript Examples

@api
    async generateCsv() {
        const convertToCsvValue = value => {
            if (/[\n",]/.test(value)) {
                return `"${value.replace(/"/g, '""')}"`;
            }
            return value;
        };
        await this._fetchSubsequentRecords(this._nextRecordsUrl);
        const header = this.columns.map(convertToCsvValue).join(',');
        const data = this._allRows
            .map(row => {
                return row.values
                    .map(cell => {
                        return convertToCsvValue(cell.data);
                    })
                    .join(',');
            })
            .join('\n');
        return `${header}\n${data}`;
    }

@api addStampOption(label, svgString) {
        let coreId = label.toLowerCase().replace(/ /g,"-");
        this.stamps.push({
            id: "stamp" + coreId,
            label: label,
            class: "toolbar-stamp toolbar-stamp-" + coreId,
            checked: false,
            toolbar: TOOLBAR.STAMPS,
            menuitem: coreId,
            svgString: svgString,
        });

        if (this.isStampingMode) {
            this.menuitem = coreId;
            this.toolbar = TOOLBAR.STAMPS;
            this.resolveMenuItemClick(label, this.stamps);
        }
    }

@api interactionMode(value) {
        if (value === INTERACTION_MODE.STAMPING) {
            this._interactionMode = INTERACTION_MODE.STAMPING;
        } else if (value === INTERACTION_MODE.DRAWING) {
            this._interactionMode = INTERACTION_MODE.DRAWING;
        } else {
            this._interactionMode = INTERACTION_MODE.FULL;
        }
    }

@api
    predict() {
        if (this.recordId && this.jobOrModel) {
            this.spinnerVisible = true;
            return predict({
                recordId: this.recordId,
                jobOrModel: this.jobOrModel,
                isPolling: this.pollingCount > 0
            })
            .then(result => {
                this.predictCallback(result);
            })
            .catch((error) => {
                this.handleError(error);
            });
        }
        else {
            return null;
        }
    }

/* 
    *  Info: This Method is called on click of edit pencil icon
    *  Params: event
    *  Result: Toggles form view to recor edit mode
    */
    toggleEditForm(event){
        this.isEditVisible = true;
        this.isViewVisible = false;
        this.focusFieldApi  = event.target.dataset.api;
        this.isStencilVisible = true;
    }

@api hide() {
        this.showModal = false;
    }

@api
  getElementAtEventChart(e) {
    let res = null;
    if (this._chart) {
      res = this._chart.getElementAtEvent(e);
    }
    return res;
  }

@api
  getElementsAtEventChart(e) {
    let res = null;
    if (this._chart) {
      res = this._chart.getElementsAtEvent(e);
    }
    return res;
  }

@api
  getDatasetAtEventChart(e) {
    let res = null;
    if (this._chart) {
      res = this._chart.getDatasetAtEvent(e);
    }
    return res;
  }

@api
  getDatasetMetaChart(index) {
    let res = null;
    if (this._chart) {
      res = this._chart.getDatasetMeta(index);
    }
    return res;
  }

@api
    customHandler() {
        alert("It's a custom action!")
    }

@api show() {
        this.showModal = true;
    }

@api hide() {
        this.showModal = false;
    }

@api show() {
        this.showModal = true;
    }

@api
    unregisterAllListeners() {
        unregisterAllListeners(this);
    }

@api
  clearChart() {
    if (this._chart) {
      this._chart.clear();
    }
    return this;
  }

@api
    close() {
        this.template.host.remove();
    }

@api show() {
        this.showModal = true;
    }

@api hide() {
        this.showModal = false;
    }

@api
    registerListener(eventName, callback) {
        registerListener(eventName, callback, this);
    }

@api
    fireEvent(eventName, data) {
        fireEvent(this.pageRef, eventName, data);
    }

@api
    unregisterListener(eventName, callback) {
        unregisterListener(eventName, callback, this);
    }

@api
  destroyChart() {
    if (this._chart) {
      this._chart.destroy();
      this._chart = null;
    }
  }

@api restoreValue() {
        this._value = this._savedValue;
    }

@api getDateTime() {
        return getDateTime();
    }

@api saveValue() {
        this._savedValue = this._value;
    }

@api restoreValue() {
        this._value = this._savedValue;
    }

@api
    getPrediction() {
        return this.predictCluster;
    }

@api
    setSearchResults(results) {
        // Reset the spinner
        this.loading = false;
        // Clone results before modifying them to avoid Locker restriction
        const resultsLocal = JSON.parse(JSON.stringify(results));
        // Format results
        const regex = new RegExp(`(${this._searchTerm})`, 'gi');
        this._searchResults = resultsLocal.map((result) => {
            // Format title and subtitle
            if (this._searchTerm.length > 0) {
                result.titleFormatted = result.title
                    ? result.title.replace(regex, '<strong>$1</strong>')
                    : result.title;
                result.subtitleFormatted = result.subtitle
                    ? result.subtitle.replace(regex, '<strong>$1</strong>')
                    : result.subtitle;
            } else {
                result.titleFormatted = result.title;
                result.subtitleFormatted = result.subtitle;
            }
            // Add icon if missing
            if (typeof result.icon === 'undefined') {
                result.icon = 'standard:default';
            }
            return result;
        });
        // Add local state and dynamic class to search results
        this._focusedResultIndex = null;
        const self = this;
        this.searchResultsLocalState = this._searchResults.map((result, i) => {
            return {
                result,
                state: {},
                get classes() {
                    let cls =
                        'slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta';
                    if (self._focusedResultIndex === i) {
                        cls += ' slds-has-focus';
                    }
                    return cls;
                }
            };
        });
    }