@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
301 lines (300 loc) • 23.8 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-22 14:49:52
* Update:: import { IWebpartBannerProps } to '@mikezimm/fps-core-v7/lib/banner/mainReact/IWebpartBannerProps;'
*/
import * as React from 'react';
// import { escape } from '@microsoft/sp-lodash-subset';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
import { putObjectIntoJSON } from '../../../../components/atoms/Elements/putObjectIntoJSON';
import { AdvancedCommands, SampleCommands } from './samples/SampleCommands';
// import { PleaseSeeWiki } from '../../atoms/SeeWiki';
const padRight15 = { paddingRight: '15px' };
const padRight40 = { paddingRight: '40px' };
import { FLICONio } from '../../../../components/atoms/Links/LinksDevDocs';
import { CurrentOrigin } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/WindowLocationConstants';
export function getHelpCommands(bannerProps) {
const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Commands' },
React.createElement("div", { className: 'fps-pph-content' },
React.createElement("div", { className: 'fps-pph-topic' }, "Commands are buttons that can do updates to your list."),
React.createElement("div", null, "Commands can be simple or advanced. Please join ShareLab if you want some help or have questions."),
React.createElement("div", null,
React.createElement("mark", null, "TIP: "),
" ",
React.createElement("b", null, "Hold Alt or Ctrl"),
" keys while clicking any Command button to see the code for them."),
React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "Sample Command"),
putObjectIntoJSON(SampleCommands, 'Commands')),
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "About Commands structure"),
React.createElement("ul", null,
React.createElement("li", null, "Must follow this minimum structure."),
React.createElement("li", null,
React.createElement("mark", null, "NOTE: "),
" ",
React.createElement("b", null, "Quotes"),
" are required per the example. ",
React.createElement("br", null),
"All column names and view properties are ",
React.createElement("b", null, "Case Sensitive"),
"!"),
React.createElement("li", null, "Quick Commands structure is made up of an array of buttons, view fields may not yet be supported."),
React.createElement("li", null, `the "buttons" is an array of rows. Each row can have specific command buttons in it`),
React.createElement("li", null, "A typical button is made up of these common properites"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, "str1:"),
" Use this like a variable to add a string to multiple places"),
React.createElement("li", null,
React.createElement("b", null, "str2:"),
" ^^^^^^^^, use like this: label:",
`{str1}`),
React.createElement("li", null,
React.createElement("b", null, "label:"),
" Button text"),
React.createElement("li", null,
React.createElement("b", null, "primary:"),
" true for highlighted button, false for typical button"),
React.createElement("li", null,
React.createElement("b", null, "secondary:"),
" Additional button text for primary buttons"),
React.createElement("li", null,
React.createElement("b", null, "confirm:"),
" Popup text asking to confirm update"),
React.createElement("li", null,
React.createElement("b", null, "alert:"),
" Popup text alert after save"),
React.createElement("li", null,
React.createElement("b", null, "icon:"),
" Icon name. Go to ",
FLICONio,
" for complete list."),
React.createElement("li", null,
React.createElement("b", null, "updateItem:"),
" JSON structure of the item to save. See the full web part wiki for how to update dates, users and other list values."),
React.createElement("li", null,
React.createElement("b", null, "showWhenEvalTrue:"),
" Shows button for specific user. In this example, when the current user is NOT the person in the AssignedTo column.")),
React.createElement("li", null,
"To add a ",
React.createElement("b", null, "Divider"),
" with an optional label, see example with ",
React.createElement("b", null, "\"type\": \"divider\""),
". styleButton applies to the divider itself."),
React.createElement("li", null,
"To add ",
React.createElement("b", null, "just a label"),
", see example with ",
React.createElement("b", null, "\"type\": \"label-only\""),
". styleButton applies to h3 tag Title"),
React.createElement("li", null, "Note that the icon property does work on Dividers and Labels as well"),
React.createElement("li", null,
React.createElement("b", null, "Date Column updates:"),
" To CLEAR a date column, set to null, NOT to \"\" or it will cause this error message: \"Cannot convert a primitive value to the expected type 'Edm.DateTime'.\"")))),
React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "Advanced Column Updates"),
putObjectIntoJSON(AdvancedCommands)),
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "Advanced Updates styntax and structure"),
React.createElement("ul", null,
React.createElement("li", null, "Must follow this minimum structure listed above"),
React.createElement("li", null, "For simplicity, this portion just shows the updateItem object: fields that are updated."),
React.createElement("div", { style: { height: '15px' } }),
React.createElement("li", null,
React.createElement("mark", null, "NOTE: "),
" ",
React.createElement("b", null, "Quotes"),
" are required per the example. ",
React.createElement("br", null),
"All column names are ",
React.createElement("b", null, "Case Sensitive"),
"!"),
React.createElement("li", null,
"Use the ",
React.createElement("b", null, `"{{spo required}}"`),
" syntax to prompt user for a SHAREPOINT Link"),
React.createElement("li", null,
"Use the ",
React.createElement("b", null, `"{{link required}}"`),
" syntax to prompt user for any Link",
React.createElement("ul", null,
React.createElement("li", null, "If a spo or link column"),
React.createElement("li", null,
"Adding ",
React.createElement("b", null, "required"),
" will require the user to enter a url or the update will fail."),
React.createElement("li", null,
React.createElement("b", null, "spo"),
" links must begin with ",
React.createElement("b", null, CurrentOrigin)),
React.createElement("li", null,
React.createElement("b", null, "link"),
" links must begin with 'http....'"),
React.createElement("li", null, "Links are not actually validated or tested to work. That is on the user to ensure it is accurate"),
React.createElement("li", null,
React.createElement("mark", null, "NOTE: "),
": If you add BOTH spo or link AND a comment option for the same column, link takes precedance."))),
React.createElement("li", null,
"Use the ",
React.createElement("b", null, `"{{append rich stamp required}}"`),
" syntax to prompt user for Comments or Text",
React.createElement("ul", null,
React.createElement("li", null, "Can include any or all of the above keywords inside the curley braces"),
React.createElement("li", null,
"use ",
React.createElement("b", null, "append"),
" to add new text to the top of an existing multi-line text field"),
React.createElement("li", null,
"use ",
React.createElement("b", null, "stamp"),
" to add a line above the comment with user initials and current timestamp"),
React.createElement("li", null,
"use ",
React.createElement("b", null, "rich"),
" to make the stamp ",
React.createElement("b", null, "bold rich text")),
React.createElement("li", null,
"use ",
React.createElement("b", null, "required"),
" to require an actual comment - at least a single letter or number. Empty or cancel will fail"))),
React.createElement("div", { style: { height: '15px' } }),
React.createElement("li", null,
"Use the ",
React.createElement("b", null, `"{{captcha=Author/Title?Verify Created By Name}}"`),
" syntax to prompt user for a specific response",
React.createElement("ul", null,
React.createElement("li", null, "You could use this to ask a person to verify their name is in a particular field for successful save."),
React.createElement("li", null,
"This ",
React.createElement("b", null, "DOES NOT"),
" actually verify who they are!"),
React.createElement("li", null, "It will just force them to type something in and possibly prevent them from updating an item that you do not want them to update."),
React.createElement("li", null, "For instance, if you have a generic account pc and want someone to confirm they picked something up, you could target the column their name would be in."),
React.createElement("li", null, "It would not prevent someone from typing in someone elses name, just give them a test to make sure they are not accepting someone elses item by accident."),
React.createElement("li", null, "Another potential use case, prompt to scan a unique bar code or tracability number that is already stored on the list item in another field."),
React.createElement("li", null, "Must have following components:"),
React.createElement("li", null,
React.createElement("b", null, `"{{ captcha = InternalFieldNameHere ? Prompt Text-Hint Here }}"`)),
React.createElement("li", null,
"More specifically, these strings are required: ",
React.createElement("b", null, `"{{ captcha = ? }}"`)),
React.createElement("li", null,
"Require Captcha text meets same casing as test: ",
React.createElement("b", null, `"{{ captcha^ = ? }}"`)),
React.createElement("li", null,
"Require Item has a value to compare to to pass: ",
React.createElement("b", null, `"{{ captcha* = ? }}"`),
" - if no * and item does not have comparision to make, auto-passes"),
React.createElement("li", null,
"Require Item has a value to compare AND proper CaSE is entered: ",
React.createElement("b", null, `"{{ captcha^* = ? }}"`),
" - MUST spell exactly like ",
React.createElement("b", null, "captcha^*"),
" "),
React.createElement("li", null,
"You fill in the parts in between like ",
React.createElement("b", null, "InternalFieldNameHere"),
" and ",
React.createElement("b", null, "Prompt Text-Hint Here")),
React.createElement("li", null,
React.createElement("b", null, "Prompt Text-Hint Here"),
" MUST NOT contain any of these special characters or words ",
React.createElement("b", null, `"{{ captcha = ? }}"`)),
React.createElement("li", null,
"Examples of ",
React.createElement("b", null, "InternalFieldNameHere"),
React.createElement("ul", null,
React.createElement("li", null,
`"{{ captcha = Author/Title ? }}"`,
" - Require CreatedBy Users name/title"),
React.createElement("li", null,
`"{{ captcha = Receiver/Title ? }}"`,
" - Require Users name/title in a column called Receiver"),
React.createElement("li", null,
`"{{ captcha* = Modified/YYYY-MM-DD ? }}"`,
" - Require Modified Date in format: 2022-12-25"))))),
React.createElement("div", { style: { height: '15px' } }),
React.createElement("li", null,
"Conditional add ",
React.createElement("b", null, "||"),
" ONLY when current column is empty.",
React.createElement("ul", null,
React.createElement("li", null, "If the designated column already has a value, it skips that update."),
React.createElement("li", null,
"Add double pipes: ",
React.createElement("b", null, "||"),
" to the beginning of some columns to update like this:"),
React.createElement("li", null,
React.createElement("b", null,
"\"DateColumn\": ",
`"||[Today]"`),
": Adds today's date and time to the DateColumn - only if currently empty"),
React.createElement("li", null,
React.createElement("b", null,
"\"DateColumn\": ",
`"||[Today+30]"`),
": Adds the date 30 days in the future to the DateColumn - only if currently empty"),
React.createElement("li", null,
React.createElement("b", null,
"\"DateColumn\": ",
`"||[Today-14]"`),
": Adds the date 14 days ago in the DateColumn - only if currently empty"),
React.createElement("li", null,
React.createElement("b", null,
"\"SingleUserColumn\": ",
`"||{Me}"`),
": Add your name to the column SingleUserColumn - only if currently empty"),
React.createElement("li", null,
React.createElement("b", null,
"\"TextColumn\": ",
`"||Add This Note If Empty"`),
": Add \"Add This Note If Empty\" to the TextColumn - only if currently empty"))),
React.createElement("div", { style: { height: '15px' } }),
React.createElement("li", null,
"Use the ",
React.createElement("b", null, `"eval( javascript function )"`),
" to assign a value using a condition",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("mark", null, "NOTE: "),
" ",
React.createElement("b", null, "This option requires knowledge of Javascript AND interal logic of the web part.")),
React.createElement("li", null,
React.createElement("b", null, "If you are not using this with help from the SharePoint team, it is not supported.")),
React.createElement("li", null,
"Must have following components: ",
`with all the correct " \` and ' `,
" quote marks"),
React.createElement("li", null, "Double quotes around the entire eval object."),
React.createElement("li", null, "Single quotes around the entire eval string within the braces."),
React.createElement("li", null, "Back-tick quotes around string values in the eval function."),
React.createElement("div", { style: { height: '10px' } }),
React.createElement("li", null,
React.createElement("b", null, `"eval( 'javascript function which returns the value you want' )"`)),
React.createElement("div", { style: { height: '10px' } }),
React.createElement("li", null,
React.createElement("b", null, `"eval( 'item.TESTCOLUMN===\`RequiredValue\` ? \`[Today]\` : item.TESTCOLUMN===\`OtherValue\` ? null : item.TESTCOLUMN' )"`)),
React.createElement("div", { style: { height: '10px' } }),
React.createElement("li", null, "In the above example, if the column called TESTCOLUMN is equal to RequiredValue, then the column will be set with todays date."),
React.createElement("li", null, "If the column called TESTCOLUMN is equal to OtherValue, then the column will be set to null."),
React.createElement("li", null, "If neither of the conditions are met, the column will be set to the current value.... basically not change."))),
React.createElement("li", null,
React.createElement("b", null, `Multi-Select User`),
React.createElement("br", null),
"Use the ",
React.createElement("b", null, `"[+Me]"`),
" to Add current user to MultiUser column",
React.createElement("br", null),
"Use the ",
React.createElement("b", null, `"[-Me]"`),
" to Remove current user from MultiUser column",
React.createElement("br", null),
"Use the ",
React.createElement("b", null, `"[Me]"`),
" to SET MultiUser column to JUST current user",
React.createElement("br", null)))))));
return WebPartHelpElement;
}
//# sourceMappingURL=Commands.js.map