Skip to main content

Dynamic 365 Preview note file attachments

 To preview note attachment i use PCF control. In my PCF control based on entity Id it loads is corresponding note file like : pdf, docs and other into a grid. when i will click on preview then it preview the document.

To preview document i use https://www.npmjs.com/package/react-file-viewer  this npm package support

  • Images: png, jpeg, gif, bmp, including 360-degree images
  • pdf
  • csv
  • xslx
  • docx
  • Video: mp4, webm
  • Audio: mp3


Into my PCF control i use :

Import:

 const FileViewer = require('react-file-viewer');

react return view:

 <div>  
      <FileViewer  
        fileType={this.state.filePreviewType}  
        filePath={this.state.filePreviewPath}  
       />  
    </div>

On preview document click event i pass the id


 private _previewAttachment = (id: string): void => {  
   debugger;  
   // this._refreshData();  
   this._props.context.webAPI  
    .retrieveRecord(  
     "annotation",  
     id,  
     "?$select=documentbody,filename,filesize,mimetype"  
    )  
    .then((result) => {  
     return {  
      fileContent: result["documentbody"],  
      fileName: result["filename"],  
      fileSize: result["filesize"],  
      mimeType: result["mimetype"],  
     };  
    })  
    .then((fileObj) => {  
     let mimeTypeforPreview = "";  
     // eslint-disable-next-line no-empty  
     if (fileObj.mimeType == "application/msword" || fileObj.mimeType == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {  
      mimeTypeforPreview = "application/docx";  
     } else {  
      mimeTypeforPreview = fileObj.mimeType;  
     }  
     const imageBase64pdf: string = "data:" + mimeTypeforPreview + ";base64, " + fileObj.fileContent;  
     let mimeTypestring = mimeTypeforPreview;  
     let mimetypeindex = mimeTypestring.indexOf('/');  
     const filePreviewTypestring = mimeTypestring.substring((mimetypeindex + 1), mimeTypestring.length);  
     this.setState({  
      sidePanelState: SidePanelState.closed,  
      noteId: "",  
      noteTitle: "",  
      noteText: "",  
      noteFile: null,  
      filePreviewPath: imageBase64pdf,  
      filePreviewType: filePreviewTypestring  
     });  
    });  
    debugger;  
  };


If you generated file stream is not working then you can also check the stream.

https://codesandbox.io/s/0uysf?file=/src/index.js:85-102






Labels:

Comments

Post a Comment

Popular posts from this blog

C# run powershell script as administrator

Recently I was fetching a problem that I need to run a PowerShell script that will change TFS user Display name and SID. I was trying to run that script from C# that was not working due to TFS security update and TLS certificate. Using this code block I resolve the Issue. var newProcessInfo = new System.Diagnostics.ProcessStartInfo(); newProcessInfo.FileName = @"C:\Windows\SysWOW64\WindowsPowerShell\v1.0\powershell.exe"; newProcessInfo.Verb = "runas"; // Define Run as administrator newProcessInfo.Arguments = script; //Define your powershell script newProcessInfo.UseShellExecute = false; newProcessInfo.RedirectStandardOutput = true; // This will enable to read Powershell run output newProcessInfo.RedirectStandardError = true; Process proces = System.Diagnostics.Process.Start(newProcessInfo); proces.WaitForExit(); // I want to read the output string from powershell window StringBuilder output = new StringBuilder(); output.Append("Started"); while (!proces.St
Post a Comment
Read more

ASP.NET MVC razor SAP Crystal report

Crete a new project: Add a aspx Master Page Create a new folder Reports and 2 sub folder crystal & crystalviewer Now add a web form page in crystalviewer  folder. Add the master page namespace in your web form page. MasterPageFile ="~/Views/Shared/ReportSite.Master" Replace your web form by this code < asp : Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" runat ="server">      </ asp : Content > Now go to design mode of your web form drag & drop the crystal report viewer in your web form. After that your page will be look look like this. Replace the code: < CR : CrystalReportViewer ID ="EmployeeList" runat ="server"   HasCrystalLogo ="False"     AutoDataBind ="True"   Height ="50px"   EnableParameterPrompt ="false" EnableDatabaseLogonPrompt
Post a Comment
Read more

mvc razor textboxfor change event change another textboxfor value

Based on value of Weight, Rate , CNF & AWB it will change the value of Freight , TTLCNF anfd TTLFright . Freight= Weight*Rate; TTLCNF  = Weight*CNF; TTLFright=  Freight+ TTLCNF  + AWB; @Html.TextBoxFor(model => model.Weight, new { onChange="return GetWight(this);"}) @Html.TextBoxFor(model => model.Rate, new { onChange="return GetWight(this);"})/Kg @Html.TextBoxFor(model => model.Freight, new {disabled = "disabled" , @readonly = "readonly" ,onChange="return GetTTLFright(this);"}) @Html.TextBoxFor(model => model.CNFPK, new { onChange="return GetCNFPK(this);"}) @Html.TextBoxFor(model => model.TTLCNF, new {disabled = "disabled" , @readonly = "readonly",onChange="return GetTTLFright(this);" }) @Html.TextBoxFor(model => model.AWB, new { onChange="return GetTTLFright(this);"}) and script <script> function GetW
Post a Comment
Read more