@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
230 lines (229 loc) • 17.2 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 { PivotItem, } from '@fluentui/react/lib/Pivot';
import { Icon, } from '@fluentui/react/lib/Icon';
const SampleViewJSON = [
// https://github.com/mikezimm/drilldown7/issues/161
{
"name": "Id",
"displayName": "Id",
"minWidth": 20,
"maxWidth": 35,
"linkPropertyName": "goToPropsLink"
},
{
"name": "Author/Title",
"displayName": "Created by",
"minWidth": 50
},
{
"name": "FileRef",
"displayName": "FileLeafRef",
"maxWidth": 50,
"linkPropertyName": "goToItemPreview"
},
{
"name": "folderString/Breadcrumb",
"displayName": "Folder",
"maxWidth": 50,
"linkPropertyName": "goToFolderLink"
},
{
"name": "TextColumn",
"displayName": "Link formula",
"maxWidth": 50,
"linkSubstitute": "https://www.google.com/search?q={{Editor/Title}}",
"textSubstitute": "{{Editor/Title}} was the last to modify this item",
"showEmptyAsEmpty": true,
},
];
// import { PleaseSeeWiki } from '../../atoms/SeeWiki';
import { putObjectIntoJSON } from '../../../../components/atoms/Elements/putObjectIntoJSON';
import { FindInternalNameHelpLink } from '../../../../components/atoms/Links/LinksDevDocs';
import { ReactViewSpecialKeys } from '../../../../components/molecules/ReactListV1/interfaces/SpecialViewKeys';
const ShieldIcon = React.createElement(Icon, { iconName: 'Shield', style: { fontSize: 'large' } });
const ShareIcon = React.createElement(Icon, { iconName: 'Share', style: { fontSize: 'large' } });
export function getHelpReactListViews(bannerProps) {
const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'React-List Views' },
React.createElement("div", { className: 'fps-pph-content' },
React.createElement("div", null, "Views are how you define your list view in the web part."),
React.createElement("div", null, "The easiest way to get started, is to unlock our Pre-Configured List definitions in page 1 of properties. Then select one of the pre-configured lists. Or contact your local SharePoint team if you have a good candidate for a company wide template."),
React.createElement("div", null, "TIP: Enable sync views option in Wide View to copy those settings to all widths"),
React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "Sample view"),
putObjectIntoJSON(SampleViewJSON)),
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "About view structure"),
React.createElement("ul", null,
React.createElement("li", null, "A view definition is an array of view fields."),
React.createElement("li", null, "A view field defines how you want each column to look."),
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, "Some common properties of view fields are..."),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, "name:"),
" is the Internal Column name for the field. ",
FindInternalNameHelpLink),
React.createElement("li", null,
React.createElement("b", null, "name: \"folderString\""),
" is a special variation which for files, will show the Folder the item is in."),
React.createElement("li", null,
React.createElement("b", null, "displayName:"),
" is the what you want the column heading to show"),
React.createElement("li", null,
React.createElement("b", null, "minWidth:"),
" typically is the number of pixels for minimum column width"),
React.createElement("li", null,
React.createElement("b", null, "maxWidth:"),
" typically is the number of pixels for maximum column width"),
React.createElement("li", null,
React.createElement("b", null, "linkPropertyName:"),
" is the column or property with the Url if you want to have a link"),
React.createElement("li", null,
"Typical values you can use in ",
React.createElement("b", null, "linkPropertyName"),
" are: FileRef, ",
ReactViewSpecialKeys.join(', '),
" "))),
React.createElement("div", { className: 'fps-pph-topic' }, "Advanced View capability"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, "Icon Columns - Can be used in place of field.name property - Case Sensitive!!!"),
React.createElement("ul", null,
React.createElement("li", null,
"'",
React.createElement("b", null, "HasUniqueRoleAssignments"),
"' Shows ",
ShieldIcon,
" for any items that have ",
React.createElement("b", null, "Unique Permissions")),
React.createElement("li", null,
"'",
React.createElement("b", null, "ItemSharingInfo"),
"' ONLY for Libraries: Shows ",
ShareIcon,
" for any items that have Sharing History. Shows ",
ShieldIcon,
" for any other items that have ",
React.createElement("b", null, "Unique Permissions")),
React.createElement("li", null,
"'",
React.createElement("b", null, "ItemSharingInfo"),
"' may cause fetch error on Lists but ",
React.createElement("b", null, "HasUniqueRoleAssignments"),
" should work on lists AND libraries "))),
React.createElement("li", null,
React.createElement("b", null, "linkSubstitute"),
" property of a view can calculate the url for a clickable link based on column values.",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, `"{{TargetItem/GetLinkUrl}}?adminMode=true"`),
" - Example adding a url paramter to the link in a Url column",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("i", null, `{{ TargetItem/GetLinkUrl }}`),
" - Place Column Name to Subsititue between double curley braces"))),
React.createElement("li", null,
React.createElement("b", null, `"{{TargetItem/GetLinkUrl}}?EditorTitle={{Editor/Title}}"`),
" - Example adding a url paramter based upon a User column to a Link from a Link/Url column",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("i", null, `{{ TargetItem/GetLinkUrl }}`),
" , ",
React.createElement("i", null, `{{ Editor/Title }}`),
" - Place Column Name to Subsititue between double curley braces"))),
React.createElement("li", null,
React.createElement("b", null, `"https://www.google.com/search?q={{Editor/Title}}"`),
" - Example adding Editor's name as a paramter to another link",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("i", null, `{{ Editor/Title }}`),
" - Place Column Name to Subsititue between double curley braces"))),
React.createElement("li", null,
"Rules of linkSubstitute syntax",
React.createElement("ol", null,
React.createElement("li", null,
"Link formula ",
React.createElement("b", null,
"must start with either ",
`"http" or "/sites/"`),
" or it will NOT be considered a link."),
React.createElement("ul", null,
React.createElement("li", null,
"Alternatively, if the Link formula has a valid handleBars such as: ",
React.createElement("b", null, `{{ TargetItem/GetLinkUrl }}`),
", it will assume you know what you are doing... but this has limited testing and only verified in the exact examples listed above.")),
React.createElement("li", null,
"If the column you select ",
React.createElement("b", null, "does not have a value"),
", it will NOT create a link, only show the value from the items view column name."),
React.createElement("li", null,
"In the example to left, if the ",
React.createElement("b", null, "item.Editor/Title"),
" was empty or not valid, the column will show ",
React.createElement("b", null, "item.TextColumn"),
" as a text value."),
React.createElement("li", null, "Only put single column name between curley braces"),
React.createElement("li", null, "Can do up to two substitutions in a linkSubstitute"),
React.createElement("li", null, "Value between the double curley braces must be valid Internal Name"),
React.createElement("li", null,
React.createElement("b", null, "String Functions"),
" syntax on that help tab are also valid"),
React.createElement("li", null,
"use ",
`"showEmptyAsEmpty" = true`,
" if you do not want any textSubstitute value if a field in the substitution is empty. In this example, if Editor/Title was empty, then no text will show. You can use this to NOT show a link or text if it would not be valid due to incomplete substitution."))))),
React.createElement("li", null,
React.createElement("b", null, "textSubstitute"),
" property of a view can calculate a text value based on column values.",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, `"{{Editor/Title}} was the last to modify this item"`),
" - Example syntax"),
React.createElement("li", null,
React.createElement("b", null, `{{ Editor/Title }}`),
" - Place Column Name to Subsititue between double curley braces"),
React.createElement("li", null,
"Rules of textSubstitute syntax",
React.createElement("ol", null,
React.createElement("li", null, "Same rules as linkSubstitute except string does NOT have to be considered a link"),
React.createElement("li", null,
"If the column you select ",
React.createElement("b", null, "does not have a value"),
", it will substitute the column name instead.")))))))),
React.createElement("div", { className: 'fps-pph-topic' }, "Custom NEW Item Form"),
React.createElement("div", null, "If the Url is a typical SharePoint Form, just add the FormName."),
React.createElement("div", null, "If you are using Microsoft Lists or Forms, then put the entire Url of the form."),
React.createElement("div", { className: 'fps-pph-topic' }, "Custom VIEW Item Form"),
React.createElement("div", null, "Add the full Url of the custom"),
React.createElement("div", null,
React.createElement("b", null,
"Replace the Item ID Number in your Url with ",
`{{ItemId}}`)),
React.createElement("div", null, "If you need assistance, please contact your SharePoint team!"),
React.createElement("div", { className: 'fps-pph-topic' }, "RichText max-hights"),
React.createElement("div", null, "This setting lets you adjust the height of multi-line-text fields."),
React.createElement("div", null, "Enter semi-colon separated numbers for the heights in css em values."),
React.createElement("div", null,
"If your view has a multi-line-text field, you will see a hamburger icon ",
React.createElement(Icon, { iconName: 'CollapseMenu' })),
React.createElement("div", null, "Click this icon to cycle through your max-heights set in the property pane setting."),
React.createElement("div", { className: 'fps-pph-topic' }, "Auto-Expand Rich text Height"),
React.createElement("div", null, "This setting over-rides your max-heights when there are only a few items."),
React.createElement("div", null, "Enter semi-colon separated numbers for maximum rows;max-height per row."),
React.createElement("div", null, "The default will set max-height any time your list shows 5 or less items. Cool huh?")));
return WebPartHelpElement;
}
//# sourceMappingURL=ReactListViews.js.map