SharePoint SPFx Web part file upload with file metadata -Bootstrap.. accordion
Install required:
npm instal jquery - - save
npm install jqueryui - - save
npm install @types/jquery - -save-dev
npm install @types/jqueryui - -save-dev
Bootstrap:
npm i react-bootstrap - -save
npm install bootstrap@4 - - save
npm install @types/bootstrap@4 - - save-dev
SP install:
npm install @pnp/common
@pnp/sp @pnp/logging @pnp/odata --save
Config.json |
|
"externals": { "jquery": { "path": "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js", "globalName": "jquery" }, "bootstrap": { "path": "node_modules\bootstrap/dist/js/bootstrap.min.js", "globalName": "bootstrap", "globalDependencies": ["jquery"] } }, |
Webpart.ts
Webpart.ts |
|
import { Version } from '@microsoft/sp-core-library'; import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import { escape } from '@microsoft/sp-lodash-subset'; import styles from './ExpiryDocumentWebPartWebPart.module.scss'; import * as strings from 'ExpiryDocumentWebPartWebPartStrings';
import { sp } from "@pnp/sp/presets/all"; import 'bootstrap/dist/css/bootstrap.css'; import * as $ from 'jquery'; import 'jqueryui'; import { SPComponentLoader } from '@microsoft/sp-loader'; require('bootstrap');
export interface IExpiryDocumentWebPartWebPartProps { description: string; }
export default class ExpiryDocumentWebPartWebPart extends BaseClientSideWebPart<IExpiryDocumentWebPartWebPartProps> { constructor() { super(); SPComponentLoader.loadCss("//code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css"); } public render(): void { let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; SPComponentLoader.loadCss(cssURL); this.domElement.innerHTML = ` <div class="container-fluid"> <div class="container-fluid"> <div class="row"> <div class="col-sm"> <label> <h3>Document Upload</h3> </label> </div> </div> <div class="row"> <div class="col-sm"> <label>File Upload:</label> <input id="fileuploader" type="file" class="form-control"> </div> <div class="col-sm"> </div> </div> <div class="row"> <div class="col-sm"> <label>Project Code:</label> <select id="projectcode" class="form-control"> <option>001</option> <option>002</option> <option>003</option> <option>004</option> <option>005</option> </select> </div> <div class="col-sm"> <label>Project Title:</label> <input type="text" id="projecttitle" class="form-control"> </div> <div class="col-sm"> <label>Document Type:</label> <select id="documenttype" class="form-control"> <option>Type1</option> <option>Type2</option> <option>Type3</option> <option>Type4</option> <option>Type5</option> </select> </div> </div> <div class="row"> <div class="col-sm"> <label>Requestor:</label> <select id="originator" class="form-control"> <option>Sample1</option> <option>Sample2</option> <option>Sample3</option> <option>Sample4</option> <option>Sample5</option> </select> </div> <div class="col-sm"> <label>Valid From:</label> <input type="text" id="validfrom" class="form-control"> </div> <div class="col-sm"> <label>Valid Till:</label> <input type="text" id="validto" class="form-control"> </div> </div>
<div class="row"> <div class="col-sm"> <label>Currency:</label> <select id="currency" class="form-control"> <option>AED</option> <option>SAD</option> <option>INR</option> <option>USD</option> <option>QAR</option> </select> </div>
<div class="col-sm"> <label>Amount:</label> <input type="text" id="amount" class="form-control"> </div> </div> <div class="row"> </div>
<div class="row" style="padding-top: 10px; padding-bottom: 10px"> <div class="col-sm"> <input type="button" id="btnsave" value="Save" class="btn-danger form-control"></div> <div class="col-sm"> <input type="button" id="btncancel" value="Cancel" class="btn-info form-control"></div> <div class="col-sm"></div> <div class="col-sm"></div> </div> <div class="row" style="padding-top: 5px"> <div class="col-sm"> <input type="text" id="itemId" style="display: none;"> <table style="border: 1px solid #ddd;"> <thead style="background: #17a2b8; color: white;"> <tr> <th style="border: 1px solid #ddd;">Project Code</th> <th style="border: 1px solid #ddd;">Project Title</th> <th style="border: 1px solid #ddd;">Document Type</th> <th style="border: 1px solid #ddd;">Requestor</th> <th style="border: 1px solid #ddd;">Amount</th> <th style="border: 1px solid #ddd;">Actions</th> </tr> <thead> <tbody id="expirydocuments"></tbody> </table> </div> </div> </div> </div> <div> <br /> </div>
<div id='AccordionExample'> <h2>Accordion Example</h2> <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div>
`; this.PageLoad(); $('test').addClass('display', 'none'); }
protected get dataVersion(): Version { return Version.parse('1.0'); }
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('description', { label: strings.DescriptionFieldLabel }) ] } ] } ] }; }
protected onInit(): Promise<void> { sp.setup({ spfxContext: this.context }); return super.onInit(); }
public PageLoad() { const webpart: ExpiryDocumentWebPartWebPart = this; $("#validfrom").datepicker(); $("#validto").datepicker(); $("#btnsave").click(f => { let itemId = $("#itemId").val(); if (itemId == "" || itemId == null) { webpart.AddUpdate("Add", ""); } else { webpart.AddUpdate("Update", itemId); } }); $("#btncancel").click(f => { $("#itemId").val(""); webpart.ClearControl(); }); webpart.BindData(); } public BindData1(){ sp.web.lists.getByTitle('DocumentExpiry').items.get() .then(console.log) .catch(console.log); }
public BindData() { const webpart: ExpiryDocumentWebPartWebPart = this; sp.web.lists.getByTitle("DocumentExpiry").items.getAll().then(items => { $("#expirydocuments").html(""); items.forEach(item => { let notification = "No"; let htmlContent = ` <tr> <td style="border: 1px solid #ddd;">${item.ProjectCode}</td> <td style="border: 1px solid #ddd;">${item.ProjectTitle == null ? '' : item.ProjectTitle}</td> <td style="border: 1px solid #ddd;">${item.DocumentType}</td> <td style="border: 1px solid #ddd;">${item.Originator}</td> <td style="border: 1px solid #ddd;">${item.Amount == null ? '' : item.Amount} ${item.Currency}</td> <td style="border: 1px solid #ddd;"> <input id="edit_${item.Id}" class="edit" type="button" value="Edit"> <input type="button" id="btndelete_${item.Id}" class="btndelete" value="Delete" > </td>'; </tr>`; $("#expirydocuments").append(htmlContent); }); webpart.EventBinding(); }); }
public EventBinding() { const webpart: ExpiryDocumentWebPartWebPart = this; $(".btndelete").click(w => { let itemId = Number(w.delegateTarget.id.split("_")[1]); if (confirm("Are you sure,you want to delete this item?")) { webpart.DeleteItem(itemId); } });
$(".edit").click(w => { let itemId = Number(w.delegateTarget.id.split("_")[1]); webpart.LoadItemDetails(itemId); }); }
public LoadItemDetails(itemid: number) { sp.web.lists.getByTitle("DocumentExpiry").items.getById(itemid).get().then(item => { $("#itemId").val(item.Id); $("#projectcode").val(item.ProjectCode); $("#projecttitle").val(item.ProjectTitle = null ? '' : item.ProjectTitle); $("#documenttype").val(item.DocumentType); $("#originator").val(item.Originator); $("#validfrom").val(item.ValidFrom = null ? '' : $.datepicker.formatDate('mm/dd/yy', new Date(item.ValidFrom))); $("#validto").val(item.ValidTill = null ? '' : $.datepicker.formatDate('mm/dd/yy', new Date(item.ValidTill))); $("#currency").val(item.Currency); $("#amount").val(item.Amount = null ? '' : item.Amount); }); }
public DeleteItem(itemid: number) { const webpart: ExpiryDocumentWebPartWebPart = this; sp.web.lists.getByTitle("DocumentExpiry").items.getById(itemid).delete().then(res => { alert("Item Deleted."); webpart.BindData(); }).catch(error => { console.log(error); }); } private AddUpdate(commandType: string, itemid: any): void { const webpart: ExpiryDocumentWebPartWebPart = this; let projectCode = $("#projectcode").val(); let projectTitle = $("#projecttitle").val(); if (projectTitle == null) { projectTitle = ''; } let documentType = $("#documenttype").val(); let originator = $("#originator").val(); let vF: any = $("#validfrom").val(); let vT: any = $("#validto").val(); let validFrom = new Date(vF) let validTill = new Date(vT); let currency = $("#currency").val(); let amount = $("#amount").val(); if (commandType == "Add") { // to find file uploader control by element id let input = <HTMLInputElement>document.getElementById("fileuploader"); let file = input.files[0]; //upload small file in document library. sp.web.getFolderByServerRelativeUrl( this.context.pageContext.site.serverRelativeUrl+"/DocumentExpiry").files.add( file.name,file,true).then(f=> { // use below to update the properties of document f.file.getItem().then(item =>{ item.update({ ProjectCode:projectCode, ProjectTitle:projectTitle, DocumentType:documentType, Originator:originator, ValidFrom:validFrom, ValidTill:validTill, Currency:currency, Amount:amount }).then(f=>{ alert("File uploaded successfully"); $("#itemId").val(""); webpart.BindData(); webpart.ClearControl(); }).catch(error=>{ console.log(error); }); }); }); } else { sp.web.lists.getByTitle("DocumentExpiry").items.getById(itemid).update({ ProjectCode: projectCode, ProjectTitle: projectTitle, DocumentType: documentType, Originator: originator, ValidFrom: validFrom, ValidTill: validTill, Currency: currency, Amount: amount }).then(item => { alert("Item Updated successfully"); $("#itemId").val(""); webpart.BindData(); webpart.ClearControl(); }).catch(error => { console.log(error); }); } }
public ClearControl() { $("#projecttitle").val(''); $("#validfrom").val(''); $("#validto").val(''); $("#amount").val(''); } }
|
No comments:
Post a Comment