@mikezimm/fps-library-v2/lib/common/PropPaneHelp/atoms/HandleBarsJSONObjectHelp.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
// import {  } from '@fluentui/react/lib/Icon';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
// import { IAllPropPaneProps } from '../components/IFpsNetworkBuilderWPProps';
import { JSONEditor } from '../../../components/atoms/Links/LinksDevDocs';
import { DoubleQuotesEle, FormPropNameEle, HandleBarsEle } from './HandleBarsHelp';
import { FPSReactJSON, } from '../../../components/atoms/ReactJSON/ReactJSONObjectV2';
/**
 * This gets called by getHelpHandleBarsPivotItem... use it as primary entry point if possible.
 * @param reactJSONSettings
 * @param explained
 * @returns
 */
export function buildHandleBarsJSONObjectHelp(reactJSONSettings, explained) {
    const ele = React.createElement("div", null,
        React.createElement("div", null,
            "Use a ",
            HandleBarsEle,
            " like syntax to completely customize a created Item using any fields on the form."),
        React.createElement("div", null, "Rules"),
        React.createElement("ul", null,
            React.createElement("li", null,
                "The string must represent a valid JSON object.  Use a popular free web site to validate: ",
                JSONEditor,
                " "),
            React.createElement("li", null,
                "Some of the most common errors of JSON objects:  Forgetting ",
                DoubleQuotesEle,
                " and adding a comma after the last item in the object!"),
            React.createElement("li", null,
                "The Keys must represent the list Internal Column Name and be surrounded by ",
                DoubleQuotesEle),
            React.createElement("li", null,
                "All Text Values must be surrounded by ",
                DoubleQuotesEle,
                " including Choice column values"),
            React.createElement("li", null,
                "You can use the ",
                FormPropNameEle,
                " syntax to substitute values in the Object with values from the Form"),
            React.createElement("li", null,
                "You can VIEW the ",
                FormPropNameEle,
                " names by using the toggle at the top of the page"),
            React.createElement("li", null,
                "You can create a ",
                React.createElement("b", null, "Link type"),
                " of column using:  ",
                `{ "LinkColName": "Url": "www...", "Description": "www... or Title" }`),
            React.createElement("li", null,
                "You can create a ",
                React.createElement("b", null, "Multi-select"),
                " column using:  ",
                `{ "MultiChoiceColName": [ "AddChoiceHere" ] }`)),
        React.createElement("div", { style: { display: 'flex' } },
            React.createElement("div", { style: { width: '50%' } },
                React.createElement("div", { className: 'fps-pph-topic' }, "Here is an example HandleBars object:"),
                FPSReactJSON(reactJSONSettings)),
            React.createElement("div", null, explained)));
    return ele;
}
/**
 *
 * @param reactJSONSettings
 * @param explained - see comment example below
 * @returns

      This is the 'explained' element from Network-Builder for an example:
        <div className={ 'fps-pph-topic' }>This is what it should create:</div>
        <ul>
          <li><b>Title</b> Column will be something like <b>CompanyX - Youtube</b></li>
          <li><b>Link</b> Column will be something like <b>`{ `{ "Url": "LinkUrlFromForm", "Description": "LinkUrlFromForm" }` }`</b></li>
          <li><b>LinkType</b> Column will be something like <b>Youtube</b></li>
          <li><b>ImageUrl</b> Column will be something like <b>/sites/Collection/Library/CompanyX.png</b></li>
          <li><b>CompanyLogo</b> Column will be something like <b>{ LogosBase }/CompanyX Logo.png</b></li>
          <li><b>Company</b> Column will be something like <b>CompanyX</b></li>
        </ul>
 */
export function getHelpHandleBarsPivotItem(reactJSONSettings, explained) {
    const WebPartHelpElement = React.createElement(PivotItem, { headerText: '{{HandleBars}}' },
        React.createElement("div", { className: 'fps-pph-content' },
            React.createElement("div", { className: 'fps-pph-topic' }, `{{HandleBars}}`),
            buildHandleBarsJSONObjectHelp(reactJSONSettings, explained)));
    return WebPartHelpElement;
}
//# sourceMappingURL=HandleBarsJSONObjectHelp.js.map