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

mvvm double click event in listview

If you want to get the double click event on a listview item you can try with this code; <ListView Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Width="250" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Top" AlternationCount="2" BorderBrush="#FFA8CC7B" ItemContainerStyle="{StaticResource alternatingStyle}" ItemsSource="{Binding FromPayerNameList}" SelectedItem="{Binding SelectedFromPayer, Mode=TwoWay}"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" Text=...
Post a Comment
Read more

WPF datagrid cell textbox change event

Entity/Class: public class FeesDetails : INotifyPropertyChanged { public int Id { get; set; } public string FeesName { get; set;} public string FeesDetailsName { get; set; } public int? PaidAmount { get; set; } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(System.String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); } } public int feesAmount { get; set; } public int FeesAmount { get { return this.feesAmount; } set { if (value != this.feesAmount) { this.feesAmount = value; NotifyPropertyChanged("FeesAmount"); } } } } XAML: <DataGrid AutoGenerateColumns="False" Height="21...
Post a Comment
Read more

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