gd-sprest-bs
Version:
SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.
1,020 lines • 62.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Field = void 0;
var gd_sprest_1 = require("gd-sprest");
var core_1 = require("../core");
var datetime_1 = require("../datetime");
var peoplePicker_1 = require("../peoplePicker");
var richTextBox_1 = require("../richTextBox");
/**
* Field
*/
var Field = function (props) {
var control;
var lookupFieldInfo = null;
var mmsFieldInfo = null;
// Method to get the choice options
var getChoiceItems = function (isCheckbox, field, selectedValues) {
var items = [];
// Update the selected values
selectedValues = selectedValues && selectedValues.results ? selectedValues.results : [selectedValues];
// Parse the choices
for (var i = 0; i < field.Choices.results.length; i++) {
var choice = field.Choices.results[i];
var isSelected = false;
// Determine if this choice is selected
for (var j = 0; j < selectedValues.length; j++) {
// See if this choice is selected
if (choice == selectedValues[j]) {
// Set the flag and break from the loop
isSelected = true;
break;
}
}
// See if this is a checkbox
if (isCheckbox) {
// Add the item
items.push({
isSelected: isSelected,
label: choice
});
}
else {
// Add the item
items.push({
isSelected: isSelected,
label: choice,
text: choice,
value: choice
});
}
}
// Parse the selected values
for (var i = 0; i < selectedValues.length; i++) {
var existsFl = false;
var selectedValue = selectedValues[i];
// Parse the items
for (var j = 0; j < items.length; j++) {
var itemValue = isCheckbox ? items[j]["label"] : items[j]["value"];
// See if the value exists
if (selectedValue == itemValue) {
// Set the flag
existsFl = true;
break;
}
}
// Ensure a value exists and see if this was a fill-in choice
if (!existsFl && selectedValue) {
// See if this is a checkbox
if (isCheckbox) {
// Add the item
items.push({
isSelected: true,
label: selectedValue
});
}
else {
// Add the item
items.push({
isSelected: true,
label: selectedValue,
text: selectedValue,
value: selectedValue
});
}
}
}
// See if this is a dropdown and no selected values exists, and this is a required field
if (!isCheckbox && items.length > 0 && selectedValues.length == 0 && field.Required) {
// Select the first item
items[0].isSelected = true;
}
// Return the items
return items;
};
// Method to get the file extension
var getFileExtension = function (fileName) {
if (fileName === void 0) { fileName = ""; }
var extension = fileName.split('.');
return extension[extension.length - 1].toLowerCase();
};
// Method to generate the lookup dropdown items
var getLookupItems = function (field, lookupItems, selectedValues) {
var items = [];
// Update the selected values
selectedValues = selectedValues && selectedValues.results ? selectedValues.results : [selectedValues];
// Parse the lookup items
for (var i = 0; i < lookupItems.length; i++) {
var item = lookupItems[i];
var isSelected = false;
// Determine if this lookup is selected
for (var j = 0; j < selectedValues.length; j++) {
var id = selectedValues[j] && selectedValues[j].Id ? selectedValues[j].Id : selectedValues[j];
// See if this choice is selected
if (item.Id == id) {
// Set the flag and break from the loop
isSelected = true;
break;
}
}
// Add the item
items.push({
data: item,
isSelected: isSelected,
text: item[field.LookupField],
value: item.Id.toString()
});
}
// See if no selected values exists, and this is a required field
if (items.length > 0 && selectedValues.length == 0 && field.Required) {
// Select the first item
items[0].isSelected = true;
}
// Return the items
return items;
};
// Method to get the mms dropdown items
var getMMSItems = function (term, selectedValues, isRoot) {
if (selectedValues === void 0) { selectedValues = []; }
if (isRoot === void 0) { isRoot = true; }
var items = [];
// See if information exists
if (term.info && !isRoot) {
var isSelected = false;
// Parse the selected values
for (var i = 0; i < selectedValues.length; i++) {
// See if this item is selected
if (selectedValues[i] == term.info.id) {
isSelected = true;
break;
}
}
// Add the heading
items.push({
data: term,
isSelected: isSelected,
text: term.info.name,
value: term.info.id
});
}
// Parse the terms
for (var termName in term) {
var child = term[termName];
// Skip the info and parent properties
if (termName == "info" || termName == "parent") {
continue;
}
// Get the child items
var childItems = getMMSItems(child, selectedValues, false);
// Add the item
items = items.concat(childItems);
}
// See if no selected values exists, and this is a required field
if (items.length > 0 && selectedValues.length == 0 && isRequired) {
// Select the first item
items[0].isSelected = true;
}
// Return the items
return items;
};
// Set the properties based on the field link
var fieldLink = props.listInfo.fieldLinks ? props.listInfo.fieldLinks[props.field.InternalName] : null;
var isReadonly = fieldLink && typeof (fieldLink.ReadOnly) === "boolean" ? fieldLink.ReadOnly : props.field.ReadOnlyField;
var isRequired = fieldLink && typeof (fieldLink.Required) === "boolean" ? fieldLink.Required : props.field.Required;
// See if this is an internal field
if (props.field.CanBeDeleted == false) {
// Override the property based on the field property
isReadonly = isReadonly || props.field.ReadOnlyField;
}
// Set the default properties for the control
var controlProps = {
description: props.field.Description,
errorMessage: props.errorMessage,
id: props.field.InternalName,
isReadonly: isReadonly,
label: (isRequired ? "* " : "") + props.field.Title,
name: props.field.InternalName,
onControlRendering: function (control) {
// Execute the event
return props.onControlRendering ? props.onControlRendering(control, props.field) : null;
},
onControlRendered: function (formControl) {
// Save the control
control = formControl;
// Execute the event
return props.onControlRendered ? props.onControlRendered(control, props.field) : null;
},
required: isRequired,
type: core_1.Components.FormControlTypes.TextField,
value: props.value
};
// Define a base validation method
var baseValidation = null;
// See if this is a new form, a default value exists and no value has been defined
if (props.controlMode == gd_sprest_1.SPTypes.ControlMode.New && props.field.DefaultValue && props.value == null) {
// Set the default value
controlProps.value = props.field.DefaultValue;
}
// Set the type
var onControlRendered = null;
var onControlRendering = null;
switch (props.field.FieldTypeKind) {
// Boolean
case gd_sprest_1.SPTypes.FieldType.Boolean:
// Set the type
controlProps.type = core_1.Components.FormControlTypes.Checkbox;
// Create the item
controlProps.items = [{ label: controlProps.label }];
// Clear the label
controlProps.label = "";
break;
// Choice
case gd_sprest_1.SPTypes.FieldType.Choice:
var allowFillIn = props.field.FillInChoice;
var displayRadioButtons = props.field.SchemaXml.indexOf('Format="RadioButtons"') > 0 ? true : false;
// See if we are displaying radio buttons
if (displayRadioButtons) {
// Set the type
controlProps.type = core_1.Components.FormControlTypes.Switch;
}
else {
// Set the type
controlProps.type = core_1.Components.FormControlTypes.Dropdown;
}
// Get the items
var items = getChoiceItems(displayRadioButtons, props.field, props.value);
// Add a blank entry if this is a dropdown
if (!displayRadioButtons) {
items = [{
text: "",
value: null
}].concat(items);
}
// See if we are allowing custom values
if (allowFillIn) {
// Set the base validation
baseValidation = function (ctrl, result) {
// Update the value
result.value = result.value && typeof (result.value.text) === "string" ? result.value.value : result.value;
// See if a fill-in choice exists
var fillInChoice = tbFillIn_1.getValue();
if (fillInChoice) {
// Override the value
result.value = fillInChoice;
}
// See if this control is required
if (ctrl.props.required) {
// Update the flag
result.isValid = result.value ? true : false;
}
// Return the result
return result;
};
// Set the rendered event
var tbFillIn_1 = null;
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (formControl) {
// Append a textbox
tbFillIn_1 = core_1.Components.InputGroup({
el: formControl.el,
className: "choice-fill-in",
placeholder: "Fill In Choice"
});
// Call the event
onControlRendered ? onControlRendered(formControl) : null;
};
}
// Set the items
controlProps.items = items;
// Set the base validation
baseValidation = function (ctrl, result) {
// See if a selected item exists and the field is required
if (result.value && ctrl.props.required) {
// See if this is a dropdown
if (ctrl.props.type == core_1.Components.FormControlTypes.Dropdown) {
var ddlItem = result.value;
// See if the text and value don't exist
if (ddlItem.value || ddlItem.text ? false : true) {
// Set the flag
result.isValid = false;
}
}
// Else, it's a switch
else {
var cbItem = result.value;
// See if a value doesn't exist
if (cbItem.label ? false : true) {
// Set the flag
result.isValid = false;
}
}
}
// Return the result
return result;
};
break;
// Currency Field
case gd_sprest_1.SPTypes.FieldType.Currency:
// Set the type
controlProps.type = core_1.Components.FormControlTypes.TextField;
// Set the rendered event
onControlRendering = controlProps.onControlRendering;
controlProps.onControlRendering = function (tbProps) {
// See if the currency exists in the field
var shortName = props.field.TypeShortDescription;
var matches = /\(([^)]+)\)/.exec(shortName);
var symbol = matches.length > 0 ? matches[1] : "$";
// Set the text
tbProps.prependedLabel = symbol;
// Call the event
onControlRendering ? onControlRendering(tbProps) : null;
// Set the validation event
// Validate the extension
baseValidation = function (ctrl, results) {
// Ensure a value exists
if (results.value) {
// Ensure it's a valid currency value
results.isValid = /(?=.*?\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|\d+)?(\.\d{1,2})?$/.test(results.value);
results.invalidMessage = "The currency format is not a valid.";
}
// Return the results
return results;
};
};
break;
// Date/Time
case gd_sprest_1.SPTypes.FieldType.DateTime:
// Set the time flag
var showTime = props.field.DisplayFormat == gd_sprest_1.SPTypes.DateFormat.DateTime;
controlProps.showTime = showTime;
// Set the type
controlProps.type = datetime_1.DateTimeControlType;
// See if there is a formula and this is a new form
var dtValue = (props.field.DefaultFormula || props.field.DefaultValue || "").toLowerCase();
if (dtValue && props.controlMode == gd_sprest_1.SPTypes.ControlMode.New) {
var idx = dtValue.indexOf("today");
// See if the date is a formula
if (idx >= 0) {
var dtNow = new Date(Date.now());
// See if we are adding days
var daysIdx = dtValue.indexOf("+", idx);
if (daysIdx > 0) {
// Get the number of days to add
var days = parseInt(dtValue.substr(daysIdx + 1));
if (days > 0) {
// Add the days
dtNow.setDate(dtNow.getDate() + days);
}
}
// See if we are subtracting days
daysIdx = dtValue.indexOf("-", idx);
if (daysIdx > 0) {
// Get the number of days to add
var days = parseInt(dtValue.substr(daysIdx + 1));
if (days > 0) {
// Add the days
dtNow.setDate(dtNow.getDate() - days);
}
}
// Set the value
controlProps.value = dtNow;
}
else {
// Set the value
controlProps.value = new Date(dtValue);
}
}
break;
// Image
case gd_sprest_1.SPTypes.FieldType.Image:
var fileInfo_1 = null;
var imageValue_1 = controlProps.value;
// Set the type
controlProps.type = core_1.Components.FormControlTypes.TextField;
controlProps.placeholder = "Add an image";
controlProps.isDisabled = true;
// Update the value
if (controlProps.value) {
// Update the value to only display the file name
try {
var imageProps = JSON.parse(controlProps.value);
controlProps.value = imageProps.fileName;
}
catch (_a) { }
}
// Validate the extension
baseValidation = function (ctrl, results) {
// See if we are uploading a new file
if (fileInfo_1) {
// Ensure it's an image
var info = fileInfo_1.name.split('.');
var fileExt = info[info.length - 1].toLowerCase();
if (["tiff", "pjp", "jfif", "bmp", "gif", "svg", "png", "xbm", "dib", "jxl",
"jpeg", "svgz", "jpg", "webp", "ico", "tif", "pjpeg", "avif"].indexOf(fileExt) < 0) {
// Set the flag
results.isValid = false;
results.invalidMessage = "The file must be an image.";
}
}
// Else, see if a value doesn't exist
else if (results.value == null) {
// Set the flag based on if it's required
results.isValid = ctrl.props.required ? false : results.isValid;
}
// Return the results
return results;
};
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (ctrl) {
// Append the edit button
core_1.Components.Button({
el: ctrl.textbox.el,
type: core_1.Components.ButtonTypes.OutlineSecondary,
text: "Edit",
onClick: function () {
// Show a file loader
gd_sprest_1.Helper.ListForm.showFileDialog().then(function (file) {
// Save the file info
fileInfo_1 = file;
fileInfo_1.fieldId = props.field.Id;
fileInfo_1.fieldName = props.field.InternalName;
// Set the value to the file name
ctrl.textbox.setValue(file.name);
});
}
});
// Append the clear button
core_1.Components.Button({
el: ctrl.textbox.el,
type: core_1.Components.ButtonTypes.OutlineSecondary,
text: "Clear",
onClick: function () {
// Clear the value
ctrl.textbox.setValue("");
fileInfo_1 = null;
imageValue_1 = null;
}
});
// Call the rendered event
onControlRendered ? onControlRendered(ctrl) : null;
};
// Set the get value event
controlProps.onGetValue = function () {
// Return the file information
return fileInfo_1 || imageValue_1;
};
break;
// Lookup
case gd_sprest_1.SPTypes.FieldType.Lookup:
// Default the lookup field props will determine the default type
controlProps.type = props.field.AllowMultipleValues ? core_1.Components.FormControlTypes.MultiDropdown : core_1.Components.FormControlTypes.Dropdown;
// See if this field is readonly and a value exists
if (isReadonly) {
// Update the value
controlProps.type = core_1.Components.FormControlTypes.Readonly;
// Ensure a value exists
if (props.value) {
// Set the rendered event
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (formControl) {
// Set the class name
control.el.classList.add("form-control");
control.el.style.backgroundColor = "#e9ecef";
// Override the html rendered
control.el.innerHTML = props.listInfo.fieldValuesAsHtml[props.field.InternalName];
};
}
}
else {
// Set the rendering event
onControlRendering = controlProps.onControlRendering;
controlProps.onControlRendering = function (newProps) {
// Update the control properties
controlProps = newProps;
// Display a loading message
controlProps.loadingMessage = "Loading the Lookup Data";
// Return a promise
return new Promise(function (resolve, reject) {
// Load the field information
gd_sprest_1.Helper.ListFormField.create({
field: props.field,
listName: props.listInfo.list.Title,
name: props.field.InternalName,
webUrl: props.listInfo.webUrl
}).then(
// Success
function (fieldInfo) {
// Save the field information
lookupFieldInfo = fieldInfo;
// Set the lookup filter
lookupFieldInfo.lookupFilter = props.lookupFilter;
// Update the multi property
controlProps.multi = lookupFieldInfo.multi;
// Get the drop down information
gd_sprest_1.Helper.ListFormField.loadLookupData(lookupFieldInfo, 500).then(
// Success
function (items) {
// Get the dropdown items
var ddlItems = getLookupItems(props.field, items, props.value);
// See if this is not a required field and not a multi-select
if (!isRequired && !lookupFieldInfo.multi) {
// Add a blank entry
ddlItems = [{
text: "",
value: null
}].concat(ddlItems);
}
// Set the items
controlProps.items = ddlItems;
// Clear the element
controlProps.el ? controlProps.el.innerHTML = "" : null;
// Clear the value, since the getLookupItems method takes care of this for us
controlProps.value = null;
// Call the event
var returnVal = onControlRendering ? onControlRendering(controlProps) : null;
if (returnVal && returnVal.then) {
// Wait for the promise to complete
returnVal.then(function (props) {
// Resolve the promise
resolve(props || controlProps);
});
}
else {
// Resolve the promise
resolve(controlProps);
}
},
// Error
function (msg) {
// Set the error message
var errorMessage = "Error loading the lookup field values for '" + props.field.InternalName + "'.";
// Display an error message
core_1.Components.Alert({
el: controlProps.el,
content: errorMessage,
type: core_1.Components.AlertTypes.Danger
});
// Call the error event
props.onError ? props.onError(errorMessage) : null;
});
},
// Error
function (msg) {
// Set the error message
var errorMessage = "Error loading the field information for field '" + props.field.InternalName + "'.";
// Display an error message
controlProps.el.innerHTML = "";
core_1.Components.Alert({
el: controlProps.el,
content: "Error loading the lookup field information.",
type: core_1.Components.AlertTypes.Danger
});
// Call the error event
props.onError ? props.onError(errorMessage) : null;
// Reject the request
reject(msg);
});
});
};
}
break;
// Multi-Choice
case gd_sprest_1.SPTypes.FieldType.MultiChoice:
var allowFillInMulti = props.field.FillInChoice;
var isChoice = props.field.SchemaXml.indexOf('Format="RadioButtons"') > 0 ? true : false;
// Set the type
controlProps.type = isChoice ? core_1.Components.FormControlTypes.MultiSwitch : core_1.Components.FormControlTypes.MultiDropdown;
// Update the value
controlProps.value = (props.value ? props.value.results : null) || props.value;
// Set the items
controlProps.items = getChoiceItems(isChoice, props.field, props.value);
// See if we are allowing custom values
if (allowFillInMulti) {
// Set the base validation
baseValidation = function (ctrl, result) {
// See if a fill-in choice exists
var fillInChoice = tbFillIn_2.getValue();
if (fillInChoice) {
// Append the value
result.value.push({
isSelected: true,
label: fillInChoice,
text: fillInChoice,
value: fillInChoice
});
}
// See if this control is required
if (ctrl.props.required) {
// Update the flag
result.isValid = result.value.length ? true : false;
}
// Return the result
return result;
};
// Set the rendered event
var tbFillIn_2 = null;
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (formControl) {
// Append a textbox
tbFillIn_2 = core_1.Components.InputGroup({
el: formControl.el,
className: "choice-fill-in",
placeholder: "Fill In Choice"
});
// Call the event
onControlRendered ? onControlRendered(formControl) : null;
};
}
break;
// Note
case gd_sprest_1.SPTypes.FieldType.Note:
var noteField = props.field;
// See if this is plain text
if (noteField.RichText) {
var rtbProps = controlProps;
var fullToolbar = noteField.SchemaXml.match(/RichTextMode="FullHtml"/i) ? true : false;
// Set the properties
rtbProps.type = richTextBox_1.RichTextBoxControlType;
rtbProps.toolbarType = fullToolbar ? richTextBox_1.RichTextBoxTypes.Full : richTextBox_1.RichTextBoxTypes.Basic;
}
else {
// Set the properties
controlProps.type = core_1.Components.FormControlTypes.TextArea;
controlProps.rows = props.field.NumberOfLines;
}
break;
// Number Field
case gd_sprest_1.SPTypes.FieldType.Number:
var numberField_1 = props.field;
var numberProps = controlProps;
// Set the default value
numberProps.value = numberProps.value == null ? numberField_1.DefaultValue : numberProps.value;
// See if this is a percentage
var isPercent = numberField_1.ShowAsPercentage;
if (isPercent == null) {
// Set the value from the schema (2013 environments)
isPercent = numberField_1.SchemaXml.toLowerCase().indexOf('percentage="true"') > 0;
}
if (isPercent) {
// Set the type
numberProps.type = core_1.Components.FormControlTypes.Range;
// Default the max
numberProps.max = numberField_1.MaximumValue == 1 || numberField_1.MaximumValue == Number.MAX_VALUE ? 100 : numberField_1.MaximumValue;
// Set the min value
numberProps.min = numberField_1.MinimumValue == -1.7976931348623157e+308 ? 0 : numberField_1.MinimumValue;
// Set the value
numberProps.value = numberProps.value == null || numberProps.value == Number.MIN_VALUE ? 0 : numberProps.value;
numberProps.value = numberProps.value * (numberProps.max == 100 && numberProps.value <= 1 ? 100 : 1);
}
// Else, see if the min/max values are defined
else if ((typeof (numberField_1.MaximumValue) == "number" && numberField_1.MaximumValue != Number.MAX_VALUE) && (typeof (numberField_1.MinimumValue) == "number" && numberField_1.MinimumValue != Number.MIN_VALUE)) {
// Update the properties to display a range
numberProps.type = core_1.Components.FormControlTypes.Range;
numberProps.max = numberField_1.MaximumValue;
numberProps.min = numberField_1.MinimumValue;
numberProps.value = typeof (numberProps.value) == "number" ? numberProps.value : numberProps.min;
// Set validation
if (numberField_1.MinimumValue || numberField_1.MaximumValue) {
// Add validation
baseValidation = function (control, result) {
// Ensure the value is a number
if (/^[0-9]*$/.test(result.value) == false) {
// Update the validation and return it
result.isValid = false;
result.invalidMessage = "The value must be a number.";
return result;
}
// Validate the min value
if (numberField_1.MinimumValue && result.value < numberField_1.MinimumValue) {
// Update the validation and return it
result.isValid = false;
result.invalidMessage = "The value must be greater than or equal to " + numberField_1.MinimumValue;
return result;
}
// Validate the max value
if (numberField_1.MaximumValue && result.value > numberField_1.MaximumValue) {
// Update the validation and return it
result.isValid = false;
result.invalidMessage = "The value must be less than or equal to " + numberField_1.MaximumValue;
return result;
}
// Valid
result.isValid = true;
// Return the result
return result;
};
}
}
else {
// Set the type
numberProps.type = core_1.Components.FormControlTypes.TextField;
// Set the render event
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (formControl) {
// Set the type to be a number
formControl.textbox.elTextbox.setAttribute("type", "number");
};
}
break;
// URL
case gd_sprest_1.SPTypes.FieldType.URL:
var desc_1 = null;
var url_1 = null;
var value_1 = props.value;
// See if a value exists
if (props.value) {
// Update the value
controlProps.value = props.value.Url;
}
// Set the render event
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (formControl) {
// Save the control
control = formControl;
// Clear the element
control.el.innerHTML = "";
// See if we are rendering the description
var showDesc = controlProps.showDescription;
showDesc = typeof (showDesc) === "boolean" ? showDesc : true;
if (showDesc) {
// Render the description
desc_1 = core_1.Components.FormControl({
className: "mb-1",
el: control.el,
placeholder: "Description",
type: core_1.Components.FormControlTypes.TextField,
value: value_1 ? value_1.Description : null
});
}
// Render the url
url_1 = core_1.Components.FormControl({
el: control.el,
placeholder: "Url",
type: core_1.Components.FormControlTypes.TextField,
value: value_1 ? value_1.Url : null
});
// Set the get value event
control.props.onGetValue = function () {
// Return the value
return {
Description: desc_1 ? desc_1.getValue() : url_1.getValue(),
Url: url_1.getValue()
};
};
// Call the event
onControlRendered ? onControlRendered(formControl) : null;
};
// Set the validate event
baseValidation = function (control, result) {
var descValid, urlValid = false;
// Get the form control elements
var elFormControl = control.el.querySelectorAll(".form-control");
// See if both the description and url are displayed
var elDesc = null;
var elUrl = null;
if (elFormControl.length > 1) {
// Set the elements
elDesc = elFormControl[0];
elUrl = elFormControl[1];
}
else {
// Set the elements
elUrl = elFormControl[0];
// Set the flag
descValid = true;
}
// See if the description exists
if (elDesc) {
// Clear the classes
elDesc.classList.remove("is-invalid");
elDesc.classList.remove("is-valid");
// Set the flag
descValid = control.props.required ? (desc_1.getValue() ? true : false) : true;
// Set the class
elDesc.classList.add(descValid ? "is-valid" : "is-invalid");
}
// See if the url exists
if (elUrl) {
// Clear the classes
elUrl.classList.remove("is-invalid");
elUrl.classList.remove("is-valid");
// Set the flag
urlValid = control.props.required ? (url_1.getValue() ? true : false) : true;
// Set the class
elUrl.classList.add(urlValid ? "is-valid" : "is-invalid");
}
// Set the validation falg
result.isValid = descValid && urlValid;
// Return the result
return result;
};
break;
// User
case gd_sprest_1.SPTypes.FieldType.User:
// Set the type
controlProps.type = isReadonly ? core_1.Components.FormControlTypes.Readonly : peoplePicker_1.PeoplePickerControlType;
// Update the properties, based on the field settings
controlProps.allowGroups = props.field.SelectionGroup == gd_sprest_1.SPTypes.FieldUserSelectionType.PeopleAndGroups;
controlProps.groupId = props.field.SelectionGroup;
controlProps.multi = props.field.AllowMultipleValues;
// Set the rendered event
onControlRendered = controlProps.onControlRendered;
controlProps.onControlRendered = function (formControl) {
// Save the control
control = formControl;
// See if this field is readonly and a value exists
if (props.value && isReadonly) {
// Set the class name
control.el.classList.add("form-control");
control.el.style.backgroundColor = "#e9ecef";
// Override the html rendered
control.el.innerHTML = props.listInfo.fieldValuesAsHtml[props.field.InternalName];
}
// Call the event
onControlRendered ? onControlRendered(formControl) : null;
};
break;
}
// See if this is the document name field
if (props.field.InternalName == "FileLeafRef") {
// Set base validation
baseValidation = function (control, result) {
var value = result.value;
// Ensure the value exists
result.isValid = value ? true : false;
if (result.isValid) {
// See if it ends w/ a .
if (value[value.length - 1] == '.') {
// Update the validation
result.isValid = false;
result.invalidMessage = "The value cannot end with a '.' character.";
}
// Else, see if it contains invalid characters
else if (/[~"\#\%\&\*\:\<\>\?\/\\\{\|\}"]/.test(value) || value.indexOf('\\') >= 0) {
// Update the validation
result.isValid = false;
result.invalidMessage = "The value cannot contain the following characters: ~ \" # % & * : < > ? / \\ { | }";
}
// Else, see if we are changing the extension
else if (control.props.value) {
// Get the file extensions
var origExtension = getFileExtension(control.props.value);
var newExtension = getFileExtension(value);
// Update the validation
result.isValid = origExtension == newExtension;
result.invalidMessage = "The file extension cannot be changed. It must end with '." + origExtension + "'";
}
}
// Return the validation result
return result;
};
}
// See if this is a taxonomy field
if (/^TaxonomyFieldType/.test(props.field.TypeAsString)) {
// Set the type
controlProps.type = core_1.Components.FormControlTypes.Dropdown;
// Set a render event
onControlRendering = controlProps.onControlRendering;
controlProps.onControlRendering = function (newProps) {
// Update the control properties
controlProps = newProps;
// Return a promise
return new Promise(function (resolve, reject) {
// Display a loading message
controlProps.loadingMessage = "Loading the MMS Data";
// Load the field information
gd_sprest_1.Helper.ListFormField.create({
field: props.field,
listName: props.listInfo.list.Title,
name: props.field.InternalName,
webUrl: props.listInfo.webUrl
}).then(
// Success
function (fieldInfo) {
// Save the field information
mmsFieldInfo = fieldInfo;
// Set the type
controlProps.type = mmsFieldInfo.multi ? core_1.Components.FormControlTypes.MultiDropdown : core_1.Components.FormControlTypes.Dropdown;
// Load the value field
gd_sprest_1.Helper.ListFormField.loadMMSValueField(mmsFieldInfo).then(
// Success
function (valueField) {
// Set the value field
mmsFieldInfo.valueField = valueField;
// See if this is a new form
if (props.controlMode == gd_sprest_1.SPTypes.ControlMode.New) {
var fieldValue = [];
// Get the default values
var values = (props.field.DefaultValue || "").split(";#");
for (var i = 0; i < values.length; i++) {
var value = values[i].split("|");
if (value.length == 2) {
// Add the term id
fieldValue.push(value[1]);
}
}
// Update the field value
controlProps.value = fieldValue;
}
else {
var fieldValue = props.value;
// Get the field value
var values = fieldValue && fieldValue.results ? fieldValue.results : [fieldValue];
// Clear the field values
fieldValue = [];
// Parse the values
for (var i = 0; i < values.length; i++) {
// Ensure the value exists
if (values[i] && values[i].TermGuid) {
// Add the value
fieldValue.push(values[i].TermGuid);
}
}
// Update the field value
controlProps.value = fieldValue;
}
// Load the terms
gd_sprest_1.Helper.ListFormField.loadMMSData(mmsFieldInfo).then(
// Success
function (terms) {
// Get the items
var items = getMMSItems(gd_sprest_1.Helper.Taxonomy.toObject(terms), controlProps.value);
// See if this is not a required field and not a multi-select
if (!isRequired && !mmsFieldInfo.multi) {
// Add a blank entry
items = [{
text: "",
value: null
}].concat(items);
}
// Set the items
controlProps.items = items;
// Clear the element
controlProps.el ? controlProps.el.innerHTML = "" : null;
// Call the event
var returnVal = onControlRendering ? onControlRendering(controlProps) : null;
if (returnVal && returnVal.then) {
// Wait for the promise to complete
returnVal.then(function (props) {
// Resolve the promise
resolve(props || controlProps);
});
}
else {
// Resolve the promise
resolve(controlProps);
}
},
// Error
function (msg) {
// Set the error message
var errorMessage = "Error loading the mms terms for '" + props.field.InternalName + "'.";
// Display an error message
core_1.Components.Alert({
el: controlProps.el,
content: errorMessage,
type: core_1.Components.AlertTypes.Danger
});
// Call the error event
props.onError ? props.onError(errorMessage) : null;
});
},
// Error
function (msg) {
// Set the error message
var errorMessage = "Error loading the mms value field for '" + props.field.InternalName + "'.";
// Display an error message
core_1.Components.Alert({
el: controlProps.el,
content: errorMessage,
type: core_1.Components.AlertTypes.Danger
});
// Call the error event
props.onError ? props.onError(errorMessage) : null;
// Reject the request
reject(msg);
});
}, function (msg) {
// Display an error message
core_1.Components.Alert({
el: controlProps.el,
content: msg,
type: core_1.Components.AlertTypes.Danger
});
// Call the error event
props.onError ? props.onError(msg) : null;
});
});
};
}
// Create the field
var field = {
control: control,
controlProps: controlProps,
setControl: function (ctrl) { control = ctrl; field.control = ctrl; },
getValue: function () {
var fieldValue = {
name: props.field.InternalName,
value: control ? control.getValue() : null
};
// Get the checkbox and dropdown val