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

The calling thread must be STA, because many UI components require this.

Using Thread: // Create a thread Thread newWindowThread = new Thread(new ThreadStart(() => { // You can use your code // Create and show the Window FaxImageLoad obj = new FaxImageLoad(destination); obj.Show(); // Start the Dispatcher Processing System.Windows.Threading.Dispatcher.Run(); })); // Set the apartment state newWindowThread.SetApartmentState(ApartmentState.STA); // Make the thread a background thread newWindowThread.IsBackground = true; // Start the thread newWindowThread.Start(); Using Task and Thread: // Creating Task Pool, Each task will work asyn and as an indivisual thread component Task[] tasks = new Task[3]; // Control drug data disc UI load optimize tasks[0] = Task.Run(() => { //This will handle the ui thread :The calling thread must be STA, because many U...
Post a Comment
Read more

WPF Crystal Report Viewer Using SAP

There is no doubt that we fall a great problem that the VS2010 is not intregated crystal report. Initially it seems to be a big problem. Hare is some step for SAP crystal report that we can use in our WPF application. 1.Download  Crystal report from this Link: http://scn.sap.com/docs/DOC-7824 2 . Remove Crystal report if any exist. 3. Close your VS-2010 and install the new downloaded CRforVS_13_0 . 4. Take a new WPF project   5. Right click on the project click on Properties 6. Change the target framework .NET Framework 4 Client Profile to  .NET Framework 4. 7. Click on main window then click on Toolbox.  Right Click on the General Tab then click on Choose Item. 8. It will appear this window click on WPF Component. 9.  Select CrystalReportsViewer  click on ok   Button. 10. Now you will see the report viewer control. 11. Your Crystal Report Environment is ready. Now we will a...
11 comments
Read more

SQL Query Execution time of you in SQL Management Studio

You can check the Execution time of you SQL Query in SQL Management Studio. like this It is very simple that you just put your SQL Query in to the Estimated time execution query DECLARE @StartTime datetime DECLARE @EndTime datetime SELECT @StartTime=GETDATE() -- Write Your Query SELECT @EndTime=GETDATE() --This will return execution time of your query SELECT DATEDIFF(NS,@StartTime,@EndTime) AS [Duration in millisecs]
Post a Comment
Read more