1. Database Schema

 

2. APIs Connector (APIs and where to find them)

API calls are quite straightforward, and we can’t add notes here, but we should add a video explaining each workflow if they are complex.

{API Call Platform Name} - {video explaining workflow}

3. Workflows

You may always find workflows using Bubble’s Debug mode

Comments - every comment will be marked with an emoji

4. Folders

Every page needs to have its workflows divided into different folders. For example: Subscription (and every workflow related to subscriptions will be there)

5. BDK

https://thebdk.notion.site/BDK-Native-Plugin-Documentation-f39872f62d84489594aea28e46185947#21a095b457f84766bf643b664827de7c

6. The Canvas template

Canvas is used to develop HelloWellness to speed up UI implementation. As its documentation states, Canvas is a framework based on Bubble that non-coders can use to very rapidly build powerful and beautiful web applications. It combines three things:

1. Base Template: This app template contains features that almost every application needs - things like marketing pages, user management, admin portal, and so much more.
2. Pages & blocks: These are smaller UI & UX components that can be added to the Base Template in order to build almost anything that you might imagine. They also provide consistency to your app's design, so pages you add to the app don't look out of place.
3. Standards & best practices: These will help you make sure your application's functionality, design, and integrations are properly built and result in the best product possible.****

Examples of pages and blocks available in the Canvas Framework.

UI

Besides basic bubble knowledge, please consider the following highlights.

Canvas Hidden Variables Group

The Canvas template implements in most of its pages a popup group named Hidden Variables. This group is used as a convenient way to factor out variables that are used by various elements simultaneously, hence, simplifying the management of the relationship of these UI elements with data. For this project, variables were grouped according to major logic groups (e.g. permissions to manage certain actions, client data processing)

Canvas data types and option sets

It is important to note that the canvas framework includes some option sets and data types for default. These are intended for out of the box functionalities of some features. These are generally labelled with a gear (⚙) emoji.

Example of canvas default data types

It is suggested NOT TO EDIT any of these without full knowledge of implications. For more information, visit https://docs.airdev.co/canvas/canvas-functionality/data-and-workflows.

5.1 Relevant UI Assets

Assessment Process (Page)

This page is built using the **Standard Multi-Step Process Page canvas page template. Here is where most of the app logic happens. The general design pattern is based on major components related to each of the assessment process phases.

• GP TAB Initial Questionnaire: Contains elements related to gathering the end user profile information.
• GP TAB Assessment: Contains WEF Forms for Analyst and Self Assessment.
• GP TAB Assessment Review: Contains assessment answers aggregation.
• GP TAB Invite Referees: Contains elements for referee invitation.
• GP TAB Master Competencies Dashboard: Contains the process word cloud, assessments stats and Skills report deck.

Referee assessment

This page was built using the Standard Page canvas template. Referee UI was not included in the Assessment Process page for simplicity. It contains a WEF Form element for the Referee to rate the end user skills, and banners that display information according to the status of the Assessment.

WEF Skills Form (Reusable element)

This RU displays all the Assessment Answers related to a particular Assessment. For instance, when the form is intended for the self assessment, it will include all possible WEF Skills to evaluate. Whereas, when it is populated with data from a referee assessment, it will only contain the WEF skills that the assessed user selected.

Example of instantiated WEF Skill for the Self Assessment

The form exposes four states to be used in the context of its instantiation. These are intended to make the form behave according to the user, the stage of the Assessment Process and the status of the Assessment used.

WEF Form Custom States

The custom states uses are as follows.

• selected unrated count: stores the count of all selected options that are missing scoring.
• assessment: is the Assessment used to populate the element.
• Mode: Can be either:
  • In progress: Allows the user to select skills and score them
  • Show answers: Disables editing of the form, and displays the full list of skills and its scores.
• selected unrated answers: Lists Assessment Answers which scoring is empty.