Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

Fullscreen AEK

Simon Bonds on August 15th, 2018

This project showcases the ability of AEK to be used within a full screen Modal window. This will allow users to have a better experience if they are accessing the app on a desktop (for example if it is being used as a portal).

The CSS of AEK is fully responsive and will allow your pages to adapt to the size of the desktop. There is no need for any additional CSS to be added to any of the AEK components.

In this example, in the main.jsx file we are checking the width as the window updates.

This allows us to set a desktop mode. If we are in desktop mode you can see we are displaying the menu on the left hand side.

If we are not in desktop mode the page will show the Menu Page first. This is usual practice within AEK to have the Menu Page appear as the index page and allow the user to navigate through into pages.

This in itself is a basic example, but outlines the basic idea to allow you to hide and show elements on a page if you wish, to allow for a better desktop experience.

In the main.jsx file you can see we are watching the window dimensions. This is done with a reducer which at every change updates a local store. (Line 11 - 15)

Also in the file at line 50 you can see we are saying that Desktop mode is true if the screen size is greater than 768 pixels.

This is then passed to each page within the router to allow you to use the Desktop mode to hide or show components.

You can see an example of this in any of the test.jsx pages or the home.jsx pages. You will see we are setting a component of HomeButton to show if the Desktop mode false.

This allows you to return to the Menu without having to press the back button.

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

Using fullscreen.

To use fullscreen you first must make sure that you are not using the Container element within your code base.

The container as listed below is to stop pages being too big and keeping all elements in place.

https://npm.campusm.net/-/docs/@ombiel/aek-css/latest/pages/container

You will see that in the runserver.yaml on line 18 - 19

There is a new property added to the tile, which allows you to make the modal window fullscreen.

To replicate this in the app builder you will need to use the code below


"modal":{

  "fullscreen":true

}

This means when you click on the tile it will show the modal fullscreen.

This can be added to any AEK menu option under the code button when you are looking at the tile. 

See screenshot below.

Fullscreen with a container

However if you haven't removed the container then your screen will look like this below.

Fullscreen with no container

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-fullscreen-demo
  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.