Level up your Box knowledge with brand new learning paths on Box University. Visit training.box.com to get started

Box Status

box-ui-elements ContentPreview react component header is always hidden

Follow
New post
jonathanmarks

I am trying to use the ContentPreview react component of the box-ui-elements. I have successfully implemented the ContentPicker with no issues, I am now trying to add the ContentPreview and I believe I am using everything correctly, but no matter what settings I adjust I cannot get the header to display. I am trying to add the showAnnotations and showDownload features to the ContentPreview but I believe because the header is hidden that none of these options are working. See my code below:

 

fileId={fileId}
token={token}
header={'light'}
logoUrl={'box'}
showAnnotations={true}
showDownload={true}
language={'en-US'}
messages={enMessages}
/>

 

I am setting the fileId and token elsewhere in my code so those values are good, I am seeing the ContentPreview load and I see my file, the thing is like I mentioned before that non of the extra features or the header are shown, am I missing something for getting the header to display???

0

Comments

4 comments

Date Votes
  • jonathanmarks

    This is what my current preview window looks like, just the file preview, no box logo, no header, no download/annotation/print buttons: 

    Screen Shot 2018-09-14 at 1.26.29 PM.png 

    Inspecting the HTML, it looks like any part of the header is hidden:

    Screen Shot 2018-09-14 at 1.55.23 PM.png

     

     

    I have looked at the examples as well as the box-ui-elements-demo which only provides a basic example, I cannot even find a working example or test of enabling the header, annotations, or download features with the react ContentPreview.

    0
    Comment actions Permalink
  • Priyajeet

    Sorry for the mess. Unfortunately, we are still in the process of migrating some of the Preview library functionality (specially the header) over to the Preview React UI Element. Hence the header, logoUrl and showAnnotations properties have no effect at the moment. You can instead use a new boolean prop hasHeader instead as shown in this example https://github.com/box/box-content-preview-demo/blob/master/src/index.js. Please upgrade to UI Elements v7 via npm (and respective peer dependencies). I have added a note on the README.md https://github.com/box/box-ui-elements#props-3 for Preview options.

    0
    Comment actions Permalink
  • jonathanmarks

    Thanks alot, I'll check out the new version and see how it goes. Are the annotations still supported as well?

    0
    Comment actions Permalink
  • Priyajeet

    Also, showDownload --> canDownload (which visually shows/hides the download and print button in the header), however this is defaulted to true, so you don't have to pass it in as a prop. Annotations button is missing in the header atm.

    0
    Comment actions Permalink

Please sign in to leave a comment.