PACoCo is a responsive canvas app to demonstrate how several canvas components work together. A screenshot of the home screen is shown below.

Not all canvas components are used in PACoCo. The canvas app PACO Examples does include an example for all canvas components.

Functionalities

This section gives a high-level overview of the functionalities in PACoCo:

  • The home screen contains most features.
  • The header of the home screen has all features enabled:
    • Navigation
      • This image is shown when the width of the canvas app is small.
      • The navigation contains 5 items.
    • Logo
      • The logo is clickable.
    • Languages menu
      • The languages “English” and “Dutch” are available to select.
    • Help
    • Settings menu
  • The theme can be changed via the option “Themes” in the settings menu.
  • A navigation is shown on all screens to be able to switch between screens.
    • When the width of the canvas app is small, the navigation is accessible via the navigation image in the header. This functionality is only implemented on the home screen.
    • The navigation items “Second screen” and “Fourth screen” contain no new functionality.
    • The navigation item “Third screen” has no image.
    • The navigation item “Fifth screen” is disabled.
  • The details list contains 20 columns.
  • The commands (command bar items) shown depend on number of details list items checked (0, 1 or more than 1).
  • The search box is a real-time filter for values in the property (column) “Item type”.
  • The drop-down filters the items in the details list on the property (column) “Item type”.
  • A tile is used to show the number of checked details list items compared to the number of all details list items.
  • How the tile, the drop-down and the search box are shown depends on the width of the screen.
  • When a details list item is selected a panel is shown.
    • This panel also contains commands.
    • Selecting an item is not the same as checking an item. Checking an item means selecting the checkbox and selecting an item means clicking on the item row.
  • The following commands have active logic when they are clicked on:
    • New
    • Edit
    • Delete
    • Reload
  • A form placeholder is shown for the commands:
    • New
    • Edit
  • The form placeholder contains tabs. Clicking on a tab changes the text in the form placeholder.
  • A progress indicator (with static values) is also shown for the command “Edit”.
  • A dialog screen is shown for the commands:
    • Delete
    • Reload
  • Both the command bar as well as the tabs show a menu indicator (three dots) when the available width is smaller than the total width of the commands/tabs. A menu is shown when a menu indicator is clicked on.
  • The third screen contains a button per simulated situation to navigate to a messages screen. Situations which can occur in real business solutions. The PACo canvas component “PACo_Dialog_A” is used to show the messages. PACoCo has been setup such that it is not possible to go back for the situations “Maintenance” and “Time-out” (the canvas app must be restarted). The situation “Error” does provide the option to go back to the home screen.
  • The following parameters are defined so the canvas app can be started using a language/theme other than the default:
    • Language
      • Possible values: NL and US
    • Theme
      • Possible values: Dark, Default and HighContrast

Responsiveness

PACoCo is a responsive canvas app meaning that the width and height of the canvas app changes how the canvas app behaves. To understand how responsiveness is achieved, the actual settings of the canvas components must be investigated. The best documentation is the code (logic) 😁

Four breakpoints are defined in App.Formulas:

  • glb_BreakPoint1 (= 1500)
  • glb_BreakPoint2 (= 1200)
  • glb_BreakPoint3 (= 900)
  • glb_BreakPoint4 (= 640)

Screens

There are four special screens which need some extra explanation:

  • Color Screen
  • Controls Screen
  • Redirect Screen
  • Restart Screen

Color screen

This screen is only visible when editing the canvas app and is described in detail on the documentation page Theming.

Controls screen

This screen is only visible when editing the canvas app and contains default controls which are configured to work with the PACO theme structure. These controls can for instance be used on a custom form.

image

Redirect screen

The navigation has the following setup:

  1. Each navigation item is related to a dedicated screen.
  2. When a navigation item is clicked on, the current screen is configured in the global variable glb_RedirectScreen.
  3. The user is then navigated to the screen Redirect Screen.
  4. The property Onvisible of the redirect screen has one line of code which selects the button btn_Redirect.
  5. The property OnSelect of the button btn_Redirect has code to redirect the logged in user to the screen set in the global variable glb_RedirectScreen.

With this setup, the code in the property OnVisible is run again for the navigation item which was clicked on. You can implement your own setup on how to deal with the navigation of course but this setup does what most people expect: When clicking on the screen in the navigation which you are already on, you reset the screen to its default state.

To be able to change the code in the property OnSelect of the button btn_Redirect, The global variable glb_Redirect must be set to false in App.Formulas.

Restart screen

This screen is only visible when editing the canvas app and contains one button. When the button is clicked on, the global variable glb_AppStart is cleared and the user is redirected to the home Screen. Because of this, the logic in btn_Start.OnSelect is executed again which in effect is as if you just opened the canvas app in edit mode.

Data

The data used in the details list is based on an imported Microsoft Excel table. The related file (PACoCo_Data.xlsx) is located on the PACo GitHub repository: https://github.com/formsandflows/PACo/tree/main/Files

Each item represents a sales record. This data, and more 100% copyright free test data, is offered here: https://excelbianalytics.com/wp/downloads-18-sample-csv-files-data-sets-for-testing-sales/

PACoCo uses only a portion of the set with 50.000 sales records:

  • Region = Europe
  • Country = The Netherlands