honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

format values based on site language setting

This commit is contained in:
Abderahman88 2022-01-12 23:03:28 +01:00
parent 5d086e2119
commit 4472dc3385
4 changed files with 18 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-advanced-page-properties/README.md
View File

@ -50,6 +50,7 @@ Version|Date|Comments
1.0.0|March 30, 2021|Initial release
1.0.1|September 22, 2021|Added support for multi-language sites
1.0.2|December 24, 2021|Fix retrieving fields from SitePages
1.0.3|January 12, 2022|Fix formatting of date, number and currency values
## Minimal Path to Awesome

2
samples/react-advanced-page-properties/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "Advanced Page Properties",
"id": "daae06a2-8599-445c-93c0-3bd739305f56",
"version": "1.0.2.0",
"version": "1.0.3.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"developer": {

2
samples/react-advanced-page-properties/src/webparts/advancedPageProperties/AdvancedPagePropertiesWebPart.ts
View File

@ -75,7 +75,7 @@ export default class AdvancedPagePropertiesWebPart extends BaseClientSideWebPart
Log.Write(`${fi.length.toString()} fields retrieved!`);
fi.forEach((f) => {
if (!f.FromBaseType && !f.Hidden && f.SchemaXml.indexOf("ShowInListSettings=\"FALSE\"") === -1
&& f.TypeAsString !== "Boolean" && f.TypeAsString !== "Note" && f.TypeAsString !== "User") {
&& f.TypeAsString !== "Boolean" && f.TypeAsString !== "Note") {
this.availableProperties.push({ key: f.InternalName, text: f.Title });
Log.Write(f.TypeAsString);
}

54
samples/react-advanced-page-properties/src/webparts/advancedPageProperties/components/AdvancedPageProperties.tsx
View File

@ -44,7 +44,7 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
var allValues: any = {};
const sitePagesList = await sp.web.lists.ensureSitePagesLibrary();
if (props.context.pageContext.listItem !== undefined && props.context.pageContext.listItem !== null) {
allValues = await sitePagesList.items.getById(props.context.pageContext.listItem.id).select(...props.selectedProperties).get();
allValues = await sitePagesList.items.getById(props.context.pageContext.listItem.id).select(...props.selectedProperties).fieldValuesAsText();
}
for (let i = 0; i < props.selectedProperties.length; i++) {
@ -57,19 +57,21 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
// Establish the values array
var values: any[] = [];
if (allValues.hasOwnProperty(prop)) {
if (allValues.hasOwnProperty(field.InternalName)) {
switch (field.TypeAsString) {
case "UserMulti":
case "TaxonomyFieldTypeMulti":
values = _.clone(allValues[field.InternalName].split(";"));
break;
case "MultiChoice":
values = _.clone(allValues[prop]);
values = _.clone(allValues[field.InternalName].split(","));
break;
case "Thumbnail":
values.push(JSON.parse(allValues[prop]));
values.push(JSON.parse(allValues[field.InternalName]));
break;
default:
// Default behavior is to treat it like a string
values.push(allValues[prop]);
values.push(allValues[field.InternalName]);
break;
}
}
@ -124,53 +126,27 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
*/
const RenderPagePropValue = (prop: PageProperty) => {
var retVal = _.map(prop.values, (val) => {
if (val !== null) {
if (val !== null && val !== "") {
switch (prop.info.TypeAsString) {
case "URL":
const url_parts = val.split(",");
return (
<span className={styles.urlValue}><a href={val.Url} target="_blank" style={{color: semanticColors.link}}>{val.Description}</a></span>
<span className={styles.urlValue}><a href={url_parts[0]} target="_blank" style={{color: semanticColors.link}}>{url_parts[1]}</a></span>
);
case "Thumbnail":
return (
<span><img className={styles.imgValue} src={val.serverRelativeUrl} /></span>
);
case "Number":
return (
<span className={styles.plainValue}>{(prop.info["ShowAsPercentage"] === true ? Number(val).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:0}) : (prop.info["CommaSeparator"] === true ? val.toLocaleString('en') : val.toString()))}</span>
);
case "Currency":
return (
<span className={styles.plainValue}>{(prop.info["CommaSeparator"] === true ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val) : Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', useGrouping: false }).format(val))}</span>
);
case "DateTime":
//,"",,
switch (prop.info["DateFormat"]) {
case "StandardUS":
return (
<span className={styles.plainValue}>{new Date(val).toLocaleDateString()}</span>
);
case "ISO8601":
const d = new Date(val);
return (
<span className={styles.plainValue}>{`${d.getFullYear().toString()}-${d.getMonth()}-${d.getDate()}`}</span>
);
case "DayOfWeek":
return (
<span className={styles.plainValue}>{new Date(val).toLocaleDateString("en-US", { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</span>
);
case "MonthSpelled":
return (
<span className={styles.plainValue}>{new Date(val).toLocaleDateString("en-US", { month: 'long', day: 'numeric', year: 'numeric' })}</span>
);
default:
return (
<span className={styles.plainValue}>{new Date(val).toLocaleDateString()}</span>
);
}
return (
<span className={styles.plainValue}>{val}</span>
);
case "TaxonomyFieldTypeMulti":
case "TaxonomyFieldType":
return (
<span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val.Label}</span>
<span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span>
);
default:
return (