Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

Image Picker

Simon Bonds on July 5th, 2018

Image Picker

The Image picker example allows you to see how the Image Picker works.

We are using a form to send this information to a Email address

Destination email should be changed in the main.jsx file

Form fields can be customised as well as the look and feel if needed.

The example also has hard coded information that can be tweaked or additional calls may be used to show dynamic data in place of this.

You are free to do what you like with this project and improve it as you see fit.

 

Modifying the Source Code

Source code can be modified in the /src directory.

 

CSS

Anything at the root of the css directory /src/css/[name].* will be treated as an entry point for the AEK CSS buildtool. This will process the source code by transpiling any less [name].less and stylus [name].styl. The output of this, along with any [name].css files will be passed on to autoprefixer post processing (this adds vendor prefixes to css properties). In development, the result is supplemented with source mapping, in production, it is minified. The output file will be available at [publicPath]/css/[name].css

The boilerplate contains a default stylesheet that uses the aek-css framework to provide a number of css components. You can configure colours, etc in /aek-css-config.styl
 

JS

Anything at the root of the js directory /src/js/[name].* will be treated as an entry point for AEK webpack buildtool. This will process source code by transpiling any [name].es6.js or [name].jsx files with BabelJS, and any *.coffee files through CoffeeScript. The webpack buildtool can also process less,stylus and css as css modules which are injected into the document with a styl-loader. Again, source maps are applied and production assets are minified. The output file will be available at [publicPath]/js/[name].js

The boilerplate includes some basic .jsx code that demonstrates some of the available react components.

note that [publicPath] will be /public in development but will be very different in production

 

Screens

Everything at the root of the screens directory /src/screens/*.ect will be treated as an ECT template. The output from the ECT process will provide either raw HTML (for disconnected screens), or the Twig code that is sent to the server (for connected screens).
 

Installation Steps

  1. Go to the folder you would want the project to exist in
  2. Download the code from GitHub: https://github.com/ExLibrisGroup/campusm-aek/tree/master/exlib-image-picker
  3. Once this project had been successfully installed then go into the project folder
  4. Then use the following command: aek start
  5. You will then need to use your login details
  6. You will then need to choose your environment you would like to run against

 

Once these steps are done, you should see the project running on http://locahost: 5000. You will be able to look at this project locally and deploy. You can also copy this project and create your own version.