Tech Blog

New Portal View and AEK Full Screen

Next month, campusM will release a new portal view option for how campusM can display in browsers. This new release will give institutions the ability to provide a more portal oriented experience that their users know and expect. The new portal view is extremely easy to configure and offers personalization for users. In tandem with this new portal view, AEK projects can be used to create full screen services to give users the experience they expect from a responsive web portal. Screen real estate for UI’s is very important. These features will help admins optimize the app’s UI.

The code for this project can be found here, in the Ex Libris campusM GitHub repo. The project is titled “full-screen-project.”

Contents

  1. campusM’s New Portal View
  2. Full Screen AEK Projects in the New Portal View
  3. Full Screen AEK Projects With the New Portal View Disabled
  4. Testing AEK Projects in Full Screen Mode While Developing

campusM’s New Portal View

The new portal view allows the institution to display a menu, whose items are associated with various app services. The menu is completely configurable, allowing admins to brand it appropriately, arrange the items in the menu, and even associate menu items with roles, adding personalization to the user’s portal experience. For additional details on how the portal works and how it can be configured, please click here.

Example of the new portal view:

Full Screen AEK Projects in the New Portal View

With the new portal view, campusM moves easily away from the previous modular view of services. By default, the portal view sets all AEK screens to be full screen and non-modular. In other words, if the new portal view is enabled, no further steps need to be taken to make your AEK projects full screen. Note, that during the creation of the AEK project, it will be helpful to test the project in both full screen and mobile views. To test an AEK project in full screen view, edit your runserver.yaml file as shown below in the section labelled “Testing AEK Projects in Full Screen Mode While Developing.”

Example of the new portal view with an AEK screen clicked open:

Full Screen AEK Projects With the New Portal View Disabled

From within the App Manager, admins can apply a “Full-Screen AEK” property to tiles. Set this property to “Full-Screen.” When clicked open, this will make the tile screen take up the entire width of the browser. To use full screen mode, you first must make sure that you are not using the Container element within your code base. The container is made to stop pages from being too big and keeps all elements in place. Find out more here.

Example of the setting a tile to full screen mode within the App Builder in the App Manager:

Testing AEK Projects in Full Screen Mode While Developing

This setting can be easily disabled/enabled from within the runserver.yaml file.

To enable full screen mode, add the following to your file:

modal:
  fullscreen: true

Your runserver.yaml file should now look something like this:

homepage:
  menu:
    replace:
      - desc: Screen
        screenName: screen
        modal:
          fullscreen: true

Note: Sometimes you have to close the tile from localhost:5000, refresh, and reopen the tile to see the full screen change take place.

To disable full screen mode, just remove the following:

modal:
  fullscreen: true

After you have deployed your AEK project, you will also have to set the tile as full screen from within the App Manager (if you have the new portal view disabled).

Remember, to use full screen mode you first must make sure that you are not using the Container element within your code base. The container is made to stop pages from being too big and keeps all elements in place. Find out more here.

As always, complete various tests on the project to ensure the AEK screens are showing up how you expected.

Happy coding!

Leave a Reply