As a side note as well, it was rather annoying to track down the “latest” versions of all the CDN JS & CSS files for the different elements. Is there a list of this somewhere? They all seem to be independently versioned of each other and the docs just put in a placeholder x.x.x for the versions in the code snippets.

The “Picker” is at version 17.x.x (using 17.1.0) and the “Preview” is at 2.x.x (using 2.93.x). Which is rather confusing and hard to track down. Though possibly I was just looking in the wrong places.

Hi @zjkipping ,

You can find many code samples in our community GitHub repo.

Here are a few:

Specifically for the UI Elements there are also examples in the Box Platform CodePen

Here is the one for the preview element:

About your questions.

With no errors on the console, it is possible that the UI Element is not displaying at all. Try setting at least the height of the container for the UI Element, like the example above.

It is also common to overlook including the CORS domains in your Box app, but that will give you a CORS error on the console.

Sometimes an invalid access token also produces a CORS error, so check both.

As for the versions, the Preview element does not follow the same versioning conventions, the UI Elements teams plans to make it consistent.

Let us know if this helps.

Cheers

Also, this page lists the versions of the UI Elements and should be up-to-date. If you (or anyone else) ever finds this not to be the case, please drop us a note in the developer experience feedback channel.

Right so a lot of the codepens use the raw JS CDN instead of the React elements. So, it’s hard to translate it and have it be helpful. I mentioned I had no problem using the raw JS way of doing things so that seems to work very well. Just have issues using the React component itself. I did set a height, but the body of the preview literally just had 0 content to render. I wish there was an easy way to show this as I can’t get the package to work in stackblitz due to the large amount of dependencies that have to added on top of the package.

I might try to make a public repo on github I can show.

Perfect, thanks! The page looks familiar so it’s possible I found that later. I am mostly writing this forum post after the fact on an MVP I had written with a box integration.

Having looked through the list you mentioned most of that is in Python and I am working in React. I have been mostly relying on this github and other random pages I can sort of find that mention the React setup for the ui-elements.

https://opensource.box.com/box-ui-elements/

Thanks for sharing. Much appreciated!

Hi @zjkipping

This one:

Is nodeJs and React:


Example: ui-elements-demo/src/Explorer-Simple.js at main · box-community/ui-elements-demo · GitHub

import * as React from 'react';





import ContentExplorer from 'box-ui-elements/es/elements/content-explorer';


import messages from 'box-ui-elements/i18n/en-US';








// Importing css related to the content explorer. More can be seen under the dist folder.


import 'box-ui-elements/dist/explorer.css';


import './Explorer.css'





class ExplorerSimple extends React.Component {





    render() {


        return (


            <div className='content'>


                <div className='nav-header'>


                    <h2>Explorer Simple</h2>


                </div>


                <ContentExplorer


                    token={this.props.token}


                    language={'en-US'}


                    messages={messages}


                />


            </div>


        );


    }


}





export default ExplorerSimple;

Cheers