Worker Mobile App - Control Menus

From 3B Knowledge
Jump to navigation Jump to search

We have added two new properties to the Clock App

hide-menus - Accepts a boolean true/false (default is false) and allows you to hide the navigation menus and tabs in the mobile app

and

target-view - Allows you to define what screen the mobile app should be rendered in by default (on landing). This property is also available through a URL parameter targetView. Possible options are:

  • clock - usually the default view - the clock in out component
  • expenses - shows expenses
  • requests - shows availability
  • shifts - shows schedule
  • currentInvites - shows any active invitations
  • searchShifts - shows shift job board search
  • pastInvites - shows past invitations

You can now embed the mobile app in a 3B Portal page and allow that page to accept the url parameter targetView in order to render the target page view. This can be used so you can create your own burger menu / menu system.

Example Implementation

Create a portal page - make it the home page for a Web Portal. Call it MobileAppHome. Add 3 options as buttons on the page:

  • Home - #MobileApp?targetView=clock
  • Schedule - #MobileApp?targetView=shifts
  • Search - #MobileApp?targetView=searchShifts

Create another page called MobileApp. Embed the Candidate Mobile app component. In the component settings, set the Hide Menus option to "true" (to hide the default menu).

Add a new component (a button or something more sophisticated) and set the href to #MobileAppHome - this will be your "back" button. Set its position as "Fixed" and z-idnex to 999 (e.g. using the class z-999). This will ensure that the back button is overlayed on top of the mobile app and on click, will bring the user to the home page.

When the mobile app is loaded from the web portal, the main screen will present the three buttons you created and added on the MobileAppHome page.