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

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

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

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