Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
The ComUnity Digital Service Delivery Platform is a comprehensive solution that provides organisations with the tools, templates, and infrastructure they need to build, deploy, and manage digital solutions, products and services. The platform is designed to be highly flexible, scalable, and secure, making it well-suited for organisations of all sizes and industries.
The platform falls into an emerging technology area called Platform Engineering. It aggregates many disparate elements of a digital solution and reduces technical complexity. Platform engineering is a new socio-engineering concept that straddles team structure and the engineering discipline behind it to build scalable and resilient digital platforms. The old way of development teams not communicating with each other and doing whatever they want is now replaced by teams all working on a unified platform.
Platform engineering allows an autonomous delivery team to use the platform to deliver new product features at a higher pace, with reduced coordination. Other benefits are:
Encourages innovation and creativity
Rapid implementation
Faster time-to-value
Governance is baked-in
Manages all end-to-end business processes
Reduced cost of development
Improves engagement between IT and business stakeholders
Standardised user experience
Ease of maintenance
ComUnity has a data-centric intelligent core, connecting external stakeholder experiences with internal systems and processes.
The model adopted by the ComUnity Platform comprises three layers:
The Cloud Infrastructure Layer provides organisations with the underlying base cloud infrastructure and services that are necessary to build, deploy, and manage the higher layers of digital products and services.
Many large and complex organisations may choose to assemble “Platform Engineering” teams who build out such an internal platform from scratch. However, the ComUnity Rapid Digitisation Platform contains all the complex platform engineering capabilities out-of-the-box thus removing the need to build out such a platform from scratch. The broad capabilities provided by ComUnity include:
Base Platform Architecture/Core: the digital foundation required to build an internal Digital Platform.
Reusable Components: the digital building blocks required to build an internal Digital Platform.
Platform Developer Toolkit: the developer tools and SDKs required to build an internal Digital Platform.
Internal Developer Portal: the self-service capabilities required to operate an internal Digital Platform.
Digital Service Delivery Teams are the multidisciplinary, compact, co-located, and empowered development teams which build real value adding services and applications on top of the ComUnity Platform Instance. They do this buy leveraging the capabilities of the ComUnity Rapid Digitisation Platform layer.
Digital platforms built on the principles of platform engineering offer the concept of a “paved road.” This avoids the complex processes and standards of traditional development, implementation and maintenance. Instead, it provides optimised processes developed using accepted best practices and processes, pre-defined tools, and development languages.
The General tab in Project Settings displays key project properties, including the Application Name, Application Namespace, Organisation Name, Creation Date, Last Modified Date, and Application Title.
Application Name: Displays the current name of your application. This name is normally used when referring to the code dynamically in the source code for customisations and is immutable.
Application Namespace: Shows the namespace associated with your application.
Organisation Name: Indicates the name of the organisation linked to the project.
Created: Shows the date and time when the project was created.
Last Modified: Displays the date and time of the last modification made to the project.
Application Title: Allows you to modify the title of your app. When you create a project, the name you set during the project creation process becomes the default title of your app. The General section offers an opportunity to create a new title distinct from the project name. This flexibility allows you to tailor the app title to better reflect its purpose or branding without altering the project's original name.
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Open Project Settings: After opening your project in the Toolkit, access Project settings by clicking the cog icon with the tooltip "Project settings" (as shown below).
Select General Settings: In the Project Settings menu, click on the "General" option.
Locate Application Title: In the General settings section, find the "Application Title" field.
Enter New Title: Click on the text field next to "Application Title" and enter your desired new title.
Save Changes: After entering the new title, click the "Save" button to apply the changes.
The Manage Your Account menu provides quick access to essential options for managing your profile, updating account settings, and performing key actions. From here, you can customise your personal details, change your password, clear the application cache, and securely sign out. This menu ensures users have effortless control over their account and related actions.
The Profile section allows users to view and edit their profile details. Users can update their name, surname, cell number, email, company name, company role and avatar.
To access Profile settings, follow these steps:
Navigate to the 'Profile' tab in the account settings.
Click the 'Edit your profile details below' button.
Update the desired fields: Name, Surname, Cell, Email, Company Name, and Company Role.
Click 'Save' to apply the changes.
Account Settings provides a shortcut to an interface with the detailed Accounts section which contains subsections Profile, Change Password and Notification Settings.
The Change Password section allows users to update their account password.
To access Change Password, follow these steps:
Navigate to the 'Change Password' tab in the account settings.
Enter your current password (if required).
Enter the new password in the 'New password' field.
Click 'Change password' to update your password.
The Clear Application Cache option allows users to clear the stored cache data in the application.
To Clear Cache of you application, follow these steps:
Click on your avatar in the top-right corner of the application.
Select 'Clear application cache' from the dropdown menu.
Confirm the action if prompted to clear the cache.
The Sign Out option allows users to securely log out of the application.
To Sign Out, follow these steps:
Click on your avatar in the top-right corner of the application.
Select 'Sign out' from the dropdown menu.
You will be redirected to the login screen after signing out.
: View and edit personal details such as name, surname, cell number, email, company name, and role within the company.
: Customise the types of notifications you receive and how you receive them, tailored to different categories like organisational events, platform events, and project events.
: Securely update your account password to maintain the safety and privacy of your account.
: Remove cached data to ensure the application runs smoothly and efficiently.
: Safely log out of your account to protect your personal information and maintain account security.
For more detailed documentation, refer to ..
- Learn how to manage organisation-wide settings and configure role-based access. This section is essential for administrators who oversee user permissions and governance across multiple projects.
The ComUnity Developer Toolkit enables developers to customise the appearance of their applications across client platforms, including Android, iOS, Web, and Windows, using themes. A theme is a collection of attributes that define the style and layout of the application, providing flexibility to align the app’s design with branding and user preferences.
Themes offer extensive customisation options, allowing developers to modify components such as tabs, buttons, text size, and label appearance:
Tabs: Developers can customise tab colours, including background and font colours, to align with the app’s design language and branding.
Buttons: Adjust button attributes like background colour, font colour, and visual feedback to seamlessly integrate with the app’s overall aesthetic.
Text Size: Tailor font sizes to enhance readability and support accessibility across devices and screen sizes.
It's important to note that the availability of customisation options may vary depending on the platform. For example, in mobile app development, developers may have the option to modify the accent colour, which is a platform-specific customisation feature.
By leveraging these capabilities, developers can create visually appealing interfaces that enhance usability and cater to diverse user needs. Themes ensure that the app maintains consistency across platforms while accommodating specific design and branding requirements.
Supported clients include:
To customise the appearance of your app across different client platforms, the Themes feature in the Toolkit provides developers with a convenient interface. Themes allow you to modify attributes and properties of various components, such as tabs, buttons, text size, and label appearance. This guide will walk you through accessing the Themes interface and provide an overview of its layout and functionality.
To access Themes in the Toolkit and begin customising your app's appearance, follow these simple steps:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Tab View of Supported Clients: Upon selecting the Themes tab, you will be presented with a tab view layout. Each tab represents a supported client platform, such as Android, iOS, Web, and Windows. The tab view allows you to navigate between different clients to customise their specific appearance.
Once you've accessed the Themes interface, you will find a user-friendly layout that simplifies the customisation process. Here are some key aspects of the interface:
Tab View Menu: The tab view menu presents each supported client as a separate tab. This enables you to focus on customising the appearance of the app for a specific platform. Simply click on the desired tab to access the corresponding customisation options.
Attributes and Properties: Within each client tab, you will find relevant attributes and properties that can be modified. These options may include colour schemes, font styles, sizes, and other visual settings. All colour attributes are equipped with a built-in colour picker, which supports both selection from a colour palette and manual input of hexadecimal colours.
View More Attributes: In some cases, you may find that the initial view of attributes is condensed to provide a streamlined interface. If you require additional customisation options, you can click on a More Attributes option to expand the tab view. This allows you to access and modify a wider range of settings to refine the app's appearance.
Save: Once you have made the desired changes to the attributes and properties, clicking on the Save button will save the modifications. This ensures that your customised settings are applied to the app, reflecting the desired appearance for the selected client platform.
By utilising the intuitive interface of the Themes feature, developers can easily navigate through the supported client tabs, modify the relevant attributes, and create visually appealing and consistent user interfaces for their apps.
In conclusion, accessing and customising Themes in the Toolkit involves navigating to the project settings, selecting the Themes option, and exploring the tab view layout for each supported client platform. With the ability to modify various attributes and properties, including the use of a built-in colour picker, developers can easily customise the appearance of their apps to match branding, enhance usability, and create a personalised user experience.
In this section, we will provide an overview of the supported settings in the ComUnity Platform that can be customised for each client platform. These settings allow you to modify various aspects of your app's appearance and behaviour to create a unique and engaging user experience that aligns with your brand and audience.
Basic Settings
When creating a new project, the primary and accent colours can be selected from the dialog. These colours will be used as shown below, with suitable values set for the additional values. These values can be changed as required.
Primary
Set on project creation
The default colour for the app bar and other primary UI elements
PrimaryDark
Primary
A darker variant of the primary colour, used for the status bar (on Android 5.0+) and contextual app bars
Accent
Set on project creation
A secondary colour for controls like checkboxes and text fields
Background
#f6f7f8
The app background colour
Text
#908f9b
The app text colour
Deselected
#d8d9db
The colour used for disabled controls
CardBackground
#ffffff
The background colour for cards (used in grid lists)
LinkText
Primary
The text colour for links that can be clicked
ErrorText
#e96b47
The text colour for error messages
InverseText
#ffffff
The text colour for dark backgrounds (i.e. text on the App bar)
More attributes
The following settings will use the specified default value if not value is set. The values can be overridden if required.
TitleTextSize
20
The text size of title text items
BodyTextSize
14
The text size of body text items
SelectedTextSize
BodyTextSize
The text size of selected text items
DetailedTextSize
12
The text size of detailed text items
LabelTextSize
10
The text size of label text items
TabIndicator
InverseText
The colour for the Tab indicator
TabIndicatorHeight
4
The height of the Tab indicator
TabTextNormal
InverseText
The colour for the Tab item text
TabTextSelected
InverseText
The colour for the selected Tab item text
TabTextNormalAlpha
180
The alpha value for Tab item text
AppBar
Primary
The colour for the App Bar
AppBarText
InverseText
The colour for the App Bar text
UseNavigatorDrawer
True
Enables the menu selection (hamburger icon) in the App bar
UseNavigatorButtons
True
Enables the menu bar at the bottom of the screen
NavigationButtonBackground
#000000
Background colour for the bottom menu buttons
NumNavigationButtons
5
The number of menu button to display in the bottom menu bar
ShowNavigationButtonText
False
Show text descriptions on the bottom menu bar buttons
NavigationButtonNormal
InverseText
The colour for the bottom menu bar button icon and text
NavigationButtonSelect
Accent
The colour for the bottom menu bar button icon and text for the selected button
NavigationButtonTextSize
DetailedTextSize
The text size of the descriptions on the bottom menu buttons
DrawerHeaderBackground
Primary
The colour for the drawer header background
DrawerHeaderText
InverseText
The colour for the drawer header text
DrawerHeaderTextSize
34
The size of the drawer header text
DrawerHeaderHeight
160
The height of the drawer header
DrawerBackground
Background
The colour for the drawer background
DrawerText
Text
The colour of the drawer text
DrawerTextSize
BodyTextSize
The text size of the drawer text items
IconSize
24
Sets the app icon size
CardIconSize
36
Sets the icon sizes for lists
GridIconSize
48
Sets the icon sizes for grids
GridSize
128
Sets the size of grid items for a list
GridElevation
4
Sets the elevation of the grid items
SearchTextSize
BodyTextSize
The text size of the search text
SearchText
Text
The colour of the search text
SearchHintText
Text
The colour of the search hint text
Button
Primary
The colour for buttons
ButtonDisabled
Text
The colour for disabled buttons
ButtonText
InverseText
The colour for button text
ButtonTextSize
BodyTextSize
The text size for button text
LinkButton
Accent
The colour for link buttons
Background
#f6f7f8
The app background colour
FormBackground
#ffffff
The background colour of forms
Text
#9008f9b
The colour of the text
Accent
#008000
The colour of button labels
Navbar
#004080
The background colour of the navigation bar
NavbarAction
#ffffff
The colour of the action buttons in the navigation bar
TabSelected
#008000
The colour of an active tab's text and icons
Tab
#333333
The the colour of tab text and icons
Label
#004080
The text colour of form labels
Error
#ff0000
The text colour of error messages
Link
#004080
Colour of links in markdown documents
SegmentedMenu
#004080
Colour of text and icons in segmented menus
StatusbarWhite
checked
Allows you to toggle the colour of the Status bar at the top of the screen which can be light or dark
LabelAllCaps
checked
Allows you to capitalise all labels
LabelFont
5
Allows you to set the font size of labels
ContentFont
8
The font size of content
ToolbarBackground
#004080
Toolbar background
ToolbarTitle
#ffffff
Toolbar text colour
ToolbarIcon
#008000
>>>>>>>Developer Input Requested
InputHighlight
#004080
Changes the input (field) lower line to this colour and slightly increases the line width.
InputLabel
#004080
Label text colour
TabsBackground
#efefef
Background of the colour
TabsText
#004080
Text colour within tabs
Asside
#004080
The text colour of the list items in the list adjacent to the Asside
Avatar
#004080
No longer in use
BaseText
#303030
Base text colour
BaseBackground
#ffffff
Base page background colour
TitleForeground
#fffffff
The colour of the title
Title Background
#004080
The background colour of the title
ListForeground
#494751
The colour of list items
ListBackground
#ffffff
The background colour of the list
FormLabel
#008000
The colour of form labels
FormError
#e96b47
The colour of form error messages
FormForeground
#494751
The colour of the input text of form fields
FormBackground
#ffffff
The background colour of a form element
MenuForeground
#495741
The text colour of the menu items
MenuBackground
#ffffff
The background colour of the menu element
PivotSelected
#ffffff
The colour of the pivot when selected
PivotUnselected
#004080
The colour of the pivot when unselected
PivotBackground
#004080
The background colour of the pivot
TileForeground
#494751
The text colour of tiles
TileBackground
#d8d9db
The background colour of tiles
TabForeground
#004080
The text colour of the tab text
TabBackground
#ffffff
The background colour of tab
FormMargin
8px
The margin of the form element
TileMargin
4px
The margin of the tile
MenuItems
5
Menu items count
ButtonSize
35
The size of button in width
A robust user role and permission management system, empowering administrators to control user access and capabilities.
The ComUnity Toolkit empowers project administrators with a robust and intuitive user role and permission management system, designed to streamline project governance and enhance security. With this feature, administrators can easily control the actions individual users can perform on specific data entities, based on predefined permission rules.
At the core of this functionality is the Data model, which serves as the foundation for permission control within entities. When users register in your application, their default user role is set as User. However, project administrators have the flexibility to customise user access and capabilities by assigning them to one of the three default user roles: Administrator, Staff, or User. Moreover, the ComUnity Toolkit provides the capability for administrators to define custom user roles to cater to specific project requirements.
Each role, whether default or custom, provides a starting point for permissions. However, the specific permissions for each role are configured and customised using the Table Security feature. This allows project administrators to have granular control over user access at the entity level. With Table Security, you can define and manage permissions for specific entities within your project. By selecting from a list of supported roles and customising the CRUD permissions (Create, Read, Update, Delete) for individual entities, you can finely tune the access and actions that users can perform, enhancing security and control.
Additionally, the user management utility in the ComUnity Toolkit allows administrators to delete users and reset user passwords. This ensures efficient management of user accounts and enhances security protocols within your project.
By leveraging the Data model, supported roles, Table Security, and the user management utility, you can effectively manage user permissions, account deletion, and password resets to align precisely with your project's specific requirements. This flexibility empowers you to grant or restrict access at both the data and entity levels, ensuring that users have the appropriate access and capabilities within your project while maintaining data integrity and security. Whether utilising the default user roles or creating custom roles, the ComUnity Toolkit offers a comprehensive permission control system to meet the diverse needs of your project.
The Manage Users section provides a comprehensive set of instructions on how to effectively manage user accounts within the ComUnity Toolkit. As a project administrator, you have the ability to view users, delete user accounts, and reset passwords, empowering you to maintain control over user access and enhance security protocols.
To effectively manage users in your project, follow these steps:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Access Environment Settings: In the Project Settings panel, navigate to the top section where environment tabs are displayed. You will see options for Global, Development environment, QA environment, and Production environment. Click on the relevant environment tab to access its specific settings.
Open the App Users & Roles Panel:
In the left sidebar, select App Users & Roles to manage user access.
The panel provides three tabs:
Users – Manage registered users.
Roles – Assign and define roles.
Credentials – Configure authentication settings.
Manage Users
Within the App users & roles tab, you will find three sub-tabs: Users, Roles, and Credentials. The initial tab labelled as Users, shows a comprehensive list of all registered users in your application, if any exist.
To delete a user, locate the user in the list and click on the trash icon or delete button associated with that user - functionality currently disables.
To add a new user role to an existing user:
Locate the user in the list a, click on the green plus icon. This will open a modal where you can assign user roles.
Select the appropriate role for the new user from the available options.
It's important to note that a user can have multiple roles, granting them different levels of access and permissions within your project.
Throughout the process, you will find helpful tooltips associated with each button, providing a brief description of their functions. This ensures a seamless user experience and helps you navigate the user management system with ease.
By following these steps, you will be able to efficiently manage users, assign roles, and maintain control over user access and permissions within your project.
In the ComUnity Toolkit, you have full control over managing user roles to precisely define access and permissions for different users within your project. By default, the Toolkit provides three pre-defined roles: Administrator, Staff, and User.
Here's a step-by-step guide on how to manage user roles:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Access Environment Settings: In the Project Settings panel, navigate to the top section where environment tabs are displayed. You will see options for Global, Development environment, QA environment, and Production environment. Click on the relevant environment tab to access its specific settings.
Open the App Users & Roles panel: Click on the Roles tab to manage user roles. Here, you will find the default roles: Administrator, Staff, and User.
To add a custom role, locate and click the Add Role button.
A dialog box will appear, allowing you to enter the name of the new role.
If you need to remove an existing role, click on the corresponding delete icon next to the role you wish to delete.
A confirmation prompt will appear, ensuring you want to proceed with the deletion. Confirm the action if you are certain about removing the role.
By managing user roles effectively, you can precisely define the access privileges and permissions granted to different users, allowing for efficient project governance and enhanced security.
The ability to create custom roles enables you to tailor user access and permissions to meet the specific requirements of your project, ensuring a personalised and secure user experience.
Authentication in ComUnity Development Toolkit is an integrated service which provides functionality to create and manage user accounts/profiles, securely store personal user data(passwords and emails) and also to validate and verify user credentials when users access resources in your applications. In the ComUnity Toolkit, user registration and authentication are handled by two entities: Auth and UserProfile. The Auth entity is responsible for managing authentication-related properties such as AuthId, CellNumber, Password, NewPassword, ConfirmPassword, Name, Surname, and OTP. On the other hand, the UserProfile entity focuses on user profile information, including properties like Id, Cell, Name, Surname, Email, StreetAddress, ContactByEmail, ContactByPush, and Photo.
To ensure secure authentication and user data management, the ComUnity Toolkit follows best engineering practices. It leverages technologies such as JSON Web Tokens (JWT) for authentication, which provide a secure and efficient method for verifying user identity. Additionally, all user data stored within the UserProfile entity is encrypted to protect sensitive information and maintain data integrity.
By utilising these technologies and implementing strong security measures, the ComUnity Toolkit ensures that user registration and authentication processes are robust and follow industry-standard practices. This approach safeguards user privacy and helps maintain a secure environment for user interactions within the toolkit.
When you build your projects in the ComUnity Development Toolkit, the system will create a fully featured authentication service which can be visualised and customised through specific data entities and their corresponding editing pages.
In the ComUnity Development Toolkit, you have the flexibility to configure custom Rule Sets for validating authentication credentials. These Rule Sets are enforced during Server Side Form Validation when receiving HTTP requests from the client. This feature allows you to define specific validation rules and customise error messages for authentication credential validation failures.
To configure Rule Sets for authentication validation, follow these steps:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Access Environment Settings: In the Project Settings panel, navigate to the top section where environment tabs are displayed. You will see options for Global, Development environment, QA environment, and Production environment. Click on the relevant environment tab to access its specific settings.
Open the App Users & Roles panel: Click on the Credentials tab to manage app authentication credentials. Here, you will find a preselected list of authentication credentials, such as Cell, Email, and Plain.
To add more credentials, locate and click the Add Rule Set button.
Select a credential from the list to configure its authentication validation rules as as configuration properties.
LoginMinLength: Specifies the minimum number of characters required in a valid username (account name, email address, or mobile number) used during authentication.
LoginMinLengthMessage: Defines a custom error message to display when the LoginMinLength check fails.
PasswordMinLength: Specifies the minimum length of the plain text password (before encryption).
PasswordMinLengthMessage: Defines a custom error message to display when the PasswordMinLength is invalid.
PasswordMinCapitalLetterCount: Specifies the minimum number of capital letter characters required in a valid password.
PasswordMinCapitalLetterCountMessage: Defines a custom error message to display when the PasswordMinCapitalLetterCount rule is broken.
PasswordMinSmallLetterCount: Specifies the minimum number of lowercase letter characters required in a valid password.
PasswordMinSmallLetterCountMessage: Defines a custom error message to display when the PasswordMinSmallLetterCount rule is broken.
PasswordMinNumericCount: Specifies the minimum number of digits required in a valid password.
PasswordMinNumericCountMessage: Defines a custom error message to display when the PasswordMinNumericCount rule is broken.
PasswordMinNonalphanumericCount: Specifies the minimum number of non-alphanumeric characters required in a valid password.
PasswordMinNonalphanumericCountMessage: Defines a custom error message to display when the PasswordMinNonalphanumericCount rule is broken.
PasswordReuseProhibitCount: Specifies the number of times a user can change their password before they are allowed to reuse a previous password.
PasswordLifetimeDays: Specifies the lifetime of a valid password credential in days.
PasswordLifetimeDaysMessage: Defines a custom error message to display when the PasswordLifetimeDays has expired.
MaxFailedLogins: Specifies the maximum number of failed login attempts permitted before a user account is locked.
PinSlidingWindowSecsMessage: Defines a custom error message to display when the authenticated session is invalid due to the expiration of the PinSlidingWindowSecs window.
PasswordIntruderDelaySecs: Specifies the time in seconds a user has to wait between two successive login attempts in case of suspicious login activity.
PasswordIntruderDelaySecsMessage: Defines a custom error message to display when login fails due to enforced delay between successive login attempts by platform intruder detection.
PinRequiredMessage: Specifies a custom error message to display on the client, indicating that a One Time Password (OTP) is required.
SmsPinRazorTemplate: Allows you to create an SMS template for sending One Time Passwords (OTP) using Razor Pages.
DisableAutoRegistration: Disables the automatic creation of a default UserProfile record when logging in for the first time.
By configuring these Rule Sets, you can ensure that authentication credentials adhere to the defined validation rules and enhance the security of your application.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
During , the ComUnity Toolkit provides you with an interface to select primary and accent colours for the colour scheme of your project, which will in turn affect the colours in your theme. However, the document assumes you used the default colour scheme, which consists of primary colour #004080 and accent colour #008000.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
The ComUnity Toolkit offers a robust, role-based settings system designed to manage various project specific settings. Understanding these settings is crucial for effective management and configuration. For more detailed information, refer to the relevant sections within Project Settings.
The new consolidated Project Settings section, with configurations now organised into the following tabs:
Global Tab:
This tab includes settings applicable across all environments, such as:
Environment-Specific Tabs:
Separate tabs are available for managing configurations specific to each environment:
Each environment tab includes the following settings:
Reports
These tabs clearly differentiate between global and environment-specific settings, streamlining navigation and configuration management. Some features, such as Communications, may require management at both the global and environment levels.
Centralised Management: Project-related and environmental configurations are now accessible from a single location.
Improved Usability: The consolidated structure simplifies the process of configuring and updating settings, reducing the effort required for navigation and management.
Icons are essential UI elements that visually represent functions, features, and commands in applications. In the ComUnity Developer Toolkit, the Icon Management feature allows developers to browse system icons, upload custom icons, and organise them for easy retrieval and implementation.
Developers can also upload custom icons, allowing them to integrate unique branding elements and design icons tailored to their application’s needs.
This guide covers how to browse, add, and use icons in your projects.
To browse system and custom icon libraries in an existing project in the Toolkit, follow these steps:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
You can also access Legacy icons from previous Toolkit versions.
Click Details to view system icons in the corresponding library.
Enrich the visual vocabulary of your applications by adding custom icons to the Toolkit. This section details the process for uploading and managing your custom icons within the Toolkit, ensuring they are optimised for performance and scalability.
To add a icon/icon library to an existing project in the Toolkit, follow these steps:
Go to Project Settings > Icons.
Click the Add Icon tile to navigate to the Add a Custom Icon Library screen:
Click the Add SVG files button to upload your icon files from your local machine in the screen showed below:
When adding a custom icon library, you can upload individual SVG files or a ZIP file containing SVG files. The upload function will recursively search the ZIP file structure for all SVG files and ignore any files with duplicate names.
In the screen that appears, specify the following details for your icon or icon library:
Icon library name: Enter a name for your icon library.
Style: When incorporating a library, the default Style is set to regular. However, you have the flexibility to customise this. To select a different style, simply use the dropdown menu provided. If your needs extend beyond the available options and you wish to define a unique style, you can easily do so by entering a new name in the designated field.
Drag and drop SVG files: Drag and drop the SVG files for your icon or icon library from your local machine.
After adding your icon files, you can preview and categorise your icons.
Check the box next to I have an active license that gives me permission to use these icons.
Finally click the Add icon library button.
This section delves into the comprehensive management of custom icon libraries within the Toolkit. Developers can effortlessly add, categorise, and tag their own icon sets, ensuring effortless retrieval and organisation. Moreover, it provides the ability to preview icons to verify their alignment with design goals and enables downloading for seamless integration into applications. By harnessing these functionalities, developers can craft a unified and personalized visual language across their projects, ensuring that each icon not only fulfills a functional purpose but also harmoniously contributes to the overall aesthetic and user experience.
Effectively organising and tagging your icon sets is essential for effortless retrieval and seamless integration into your projects. This section provides comprehensive instructions on categorising and tagging your icons within the library, empowering you to enhance icon manageability and streamline your design workflow.
Go to Project Settings > Icons.
To select a custom icon library, click the Details button located within the corresponding tile. This action will display all icons contained within that specific library on your screen.
Once you've located the desired icon, simply click on it to select it. The selected icon's properties will be displayed on the right-hand side of the screen for further customisation.
To tag an icon, click the (+) icon located next to the tag section.
Enter the desired tag name in the field that appears.
Confirm and save your tag by clicking the checkmark icon.
You can click the (x) mark to remove a tag
For categorisation, click the (+) icon adjacent to the category section.
Choose a suitable category from the provided dropdown menu.
Finalise your selection by clicking the checkmark icon to save the category.
You can click the (x) mark to remove a category.
By following these straightforward steps, you can efficiently categorise and tag your icons, significantly enhancing the organisation of your library. This process not only streamlines the retrieval of icons but also facilitates their implementation into various aspects of your project, promoting a more efficient and streamlined design workflow.
After selecting a Custom Icon Library and clicking the Details button, you will be presented with a comprehensive view of all icons contained within that specific library. This allows you to preview each icon in detail, ensuring it aligns with your design vision and project requirements. To preview an icon, simply click on it. The selected icon will be displayed in a larger format, providing a clear view of its details and ensuring it seamlessly integrates with your project's aesthetic and functionality.
Once you've identified the target icon for your project, you can effortlessly download it for immediate use. To download an icon, simply click the Download button located in the Preview. The selected icon will be downloaded in the appropriate format.
As your design needs evolve, you may find that your existing custom icon sets require additional icons to fully support your project's visual language. The Toolkit's intuitive interface makes it easy to seamlessly add new icons to your existing custom icon sets, ensuring that you have the right icons at your fingertips to bring your design vision to life.
To add icons to a custom icon set, follow these steps:
Navigate to Project Settings > Icons and locate the desired custom icon library.
Once you've identified the target library, click the Details button located within the corresponding tile. This action will display all icons contained within that specific library on your screen - icon gallery
Locate the list or main menu Item where you wish to implement the icon.
Upon selection, an Icon setting option will appear in your Property Settings, granting access to the icon configuration tools.
Click on the (+) icon to reveal the icon editor, a dedicated space for selecting and customising your icons.
Choose the desired icon library. The Toolkit selects Bootstrap icons by default, if Bootstrap does not align with your requirements, explore alternative libraries provided within the Toolkit.
Browse the selected library and locate the icon that best suits your needs.
Once you've selected your icon, click Use Icon to apply your changes.
Finally click Save to persist your changes, the chosen icon will now be integrated into your list, enhancing the user interface.
Manage app versions for iOS, Android, and Windows with structured updates, user notifications for major or minor changes, and clear version control throughout your app’s development lifecycle.
The ComUnity Developer Toolkit enables you to manage app versioning for iOS, Android and Windows applications using the following convection:
When you change the major or the minor, your users will receive an in-app notification prompting them to upgrade to the latest version.
To set up your app version information, follow these steps:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Navigate to Versions: In the Project Settings menu, click on the "Versions" option.
Specify the version in the Android Version(x.y.z), IOS Version(x.y.z) and the Windows Version(x.y.z) boxes where it is applicable.
Specify the relevant urls of your app in the Google Store URL, Apple Store URL and Microsoft URL boxes.
Describe the relevant change details in the Android Version, IOS Version and the Windows Version boxes.
Once completed, click Save to apply the updated app version information.
Discover the power of the ComUnity Developer Toolkit: streamline platform creation, maximise efficiency, and deliver exceptional user experiences across multiple platforms.
The ComUnity Developer Toolkit is a comprehensive platform that simplifies the creation of multi-sided digital platforms for developers. It sets itself apart by offering a single design interface and a powerful Low-Code Rapid Development Interface that not only streamlines the development process but also enables developers to build platforms faster and more cost-effectively compared to traditional manual coding methods. With its unmatched speed, the ComUnity Developer Toolkit empowers developers to bring their digital platforms to life rapidly, giving them a competitive edge over other development tools in the market.
The ComUnity Developer Toolkit offers a crucial advantage by enabling developers to build their projects efficiently across multiple platforms. This unique capability eliminates the need for separate development efforts for each target platform and significantly reduces redundant tasks.
With the Toolkit, the development phase begins by building the web version of your project. This initial focus provides a visual representation of your project and facilitates testing during development. While working on the web version, you also have the option to set up properties and configurations specific to other client applications within the Toolkit.
To adapt your project for different clients, such as iOS, Windows, and Android, you can utilise the Toolkit's features to define properties and settings unique to each platform. These properties can include platform-specific design elements, device capabilities, or integrations with native features.
By setting up these properties within the Toolkit, you ensure that the generated client applications align with the respective platform requirements. This allows for a seamless and optimised user experience across different devices and operating systems.
Additionally, the Toolkit provides a streamlined workflow for managing the variations between client applications. You can efficiently update and maintain your project by making changes within the Toolkit, which then propagate to all the generated client applications, ensuring consistency and reducing development overhead.
By offering this level of flexibility and customisation, the ComUnity Developer Toolkit empowers developers to efficiently build projects for multiple platforms while maintaining a unified codebase and reducing time and effort spent on redundant development tasks.
The Toolkit supports the end-to-end Digital Project Lifecycle Management, covering the following phases:
Plan: Within the Toolkit, you can create the high-level requirements for your digital project and design the overall project structure.
Code: Utilise the Toolkit's development tools, such as the built-in code editor or integration with external tools like Visual Studio, to write the necessary code for your digital project.
Build: Automated build tools provided by the Toolkit assist in building the required server components and native client applications directly from your code.
Test: Use the Toolkit's testing capabilities to run tests on the latest builds and ensure the functionality of your digital project.
Release: Prepare the code and other project assets within the Toolkit for release, making them ready for deployment.
Deploy: Take advantage of the Toolkit's automated deployment tools, which assist in deploying the builds from development to quality assurance (QA), staging, and production environments.
Operate: Integrate the Toolkit into server environments to effectively manage the deployment and operation of ComUnity digital projects, ensuring smooth execution and performance.
Monitor: The Toolkit provides ongoing system health monitoring and allows you to monitor all components of the digital ecosystem, ensuring optimal performance and identifying any potential issues.
By offering an intuitive and streamlined development experience, the ComUnity Developer Toolkit empowers developers to create compelling multi-sided digital platforms efficiently and effectively.
The ComUnity Developer Toolkit provides a comprehensive software development life cycle for building digital services. This development life cycle encompasses the following phases:
Create a new Project:
Begin by creating a new project within the Toolkit, setting the foundation for your digital service development.
Define Metadata and Authorization:
Define the necessary metadata and authorisation settings for your application within the Toolkit. This includes specifying data structures, user roles, permissions, and authentication mechanisms.
Integrate with External Services:
Seamlessly integrate your digital service with external services or APIs by leveraging the integration capabilities of the Toolkit. This enables your application to communicate and interact with third-party systems.
Build Communication Services:
Utilise the Toolkit's features to build communication services within your application. This includes implementing functionalities such as messaging, notifications, real-time updates, and data synchronisation.
Build Client Applications:
After completing your project within the ComUnity Developer Toolkit, you have the option to enlist the assistance of the ComUnity Team to build client applications for each supported platform.
Deploy to Dev/QA/Production Servers:
Once the development phase is complete, deploy your application to development, quality assurance (QA), and production servers using the deployment tools provided by the Toolkit. This ensures a controlled and organised release of your digital service.
In addition to the development life cycle, the ComUnity Developer Toolkit offers a range of configurable components. These components can be customised and tailored according to your specific application requirements. The diagram below illustrates the various components that you can configure when utilising the Toolkit:
By following this comprehensive software development life cycle and leveraging the configurable components of the Toolkit, developers can efficiently create and deploy robust digital services across multiple platforms.
1. Shared Multi-Tenancy Environment:
This environment is often used for testing or as part of a multi-tenancy organisational license.
2. Single-Tenancy Deployment:
For organisations with dedicated Toolkit instances, use the unique URL provided by your administrator. Single-tenancy deployments are hosted in isolated environments for enhanced security and customisation.
Use the Toolkit on your desktop for the best possible development experience.
Password-Based Authentication is the default login method for users in both shared and single-tenancy deployments. It enables users to securely access the Toolkit using a unique username and password combination provided during registration.
If you are a registered Toolkit user and your registration request has been approved, you can log into the Toolkit using your provided credentials. Upon successful login, you will be directed to the Home Screen, where you can access the Toolkit’s features and functionalities.
To create a new user account in the ComUnity Platform, please follow these steps:
From the Home Screen, click on Request Access.
You will be directed to the Request Access screen.
Complete the Request Access form by providing your relevant details.
Finally, click on the Register button to submit your account request.
Ensure accurate and complete information to expedite the account creation process.
All fields marked with an asterisk * are required.
To reset your password, follow these steps:
Go to the login screen of the ComUnity Developer Toolkit, as instructed above.
Click Forgotten your password?
Enter your username.
For security purposes, the ComUnity platform will need to verify your identity before you can proceed with resetting your password. You will receive a one-time password (OTP) via your preferred channels, if available. Otherwise, it will be sent to the main channel associated with your registered account (e.g., email or SMS).
Retrieve the OTP.
Enter your new password and OTP in the relevant fields provided.
Click Reset Password.
• Unified Authentication: Supports both user and partner sign-ins.
• Enterprise-Grade Security: Utilises OAuth 2.0 and OpenID Connect protocols.
Limitations
2. Open your organisation’s Toolkit instance URL (e.g., https://yourorg.domain).
3. On the login screen, click Login with Microsoft. You will be authenticated and automatically redirected to the Toolkit’s Home Screen upon successful login.
The Store URLs section under Project Settings allows developers to configure app store URLs (Google Play Store, Apple App Store, Microsoft Store) associated with the native mobile and desktop apps generated from their projects. The Toolkit enables building web, native mobile apps, and Windows desktop apps from the same code base. This section enhances user experience by ensuring that when users visit the web app on their mobile devices, they are redirected to the relevant app store for downloading the native app, achieved through deep linking. Similarly, if users visit on a desktop and a Windows app is available, they can be redirected to the Microsoft Store. This functionality is only active if the other variants of the app, aside from web, are supported. To request an app, please contact the ComUnity team.
View URLs: Displays the current app store URLs configured for your project's app variants.
Add/Edit URLs: Provides options to add new app store URLs or edit existing ones to ensure your apps are correctly linked to their respective stores.
To manage the app store URLs associated with your project's hybrid mobile apps, follow these steps:
Navigate to Store URLs: In the Project Settings menu, click on the "Store URLs" option.
View Current URLs: The section will display the current app store URLs associated with your project's hybrid mobile apps.
Add/Edit URLs: Use the provided options to add new app store URLs or edit existing ones as needed.
Save Changes: Ensure any changes made are saved to update the configuration.
By following these steps, you can easily manage the app store URLs for your project's hybrid mobile apps, ensuring that all components are correctly configured for automated deployments.
Configuration serves as a centralised configuration management system within the ComUnity Platform, designed to streamline the management of settings across different deployment environments—Development, QA/Testing, and Production. Its primary function is to provide an overview and control mechanism for the settings within each project's environment, enhancing consistency and simplifying the management process.
Centralised Overview: Configuration offers a unified view of your project's settings across all environments, enabling easy monitoring and adjustments without the need to access each environment separately.
Environment-Specific Configuration: It allows for the distinction and management of environment-specific settings, ensuring that configurations are appropriate and tailored for each stage of the deployment process.
Simplified Management: By centralising configuration settings this reduces the complexity of managing multiple environments, enabling you to change settings from one central location.
Cross-Environment Visibility: Gain insights into how settings are configured across Development, QA, and Production environments, facilitating a better understanding and quicker identification of configuration discrepancies.
Configuration is an integral tool for maintaining the integrity and consistency of your project's configuration, ensuring that each environment is optimally set up for its intended purpose. Whether you're diagnosing an issue or implementing new features, Configuration provides the necessary infrastructure to manage your configurations efficiently and effectively.
Configuration simplifies the management of your project's settings, offering a user-friendly interface where you can edit, secure, or remove configuration details efficiently. This centralised approach not only enhances the manageability of your configurations but also promotes consistency across different environments. To manage Configuration settings in your project, follow these steps:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Access Environment Settings: In the Project Settings panel, navigate to the top section where environment tabs are displayed. You will see options for Global, Development environment, QA environment, and Production environment. Click on the relevant environment tab to access its specific settings. Selecting an environment allows you to configure its deployment-related settings, ensuring the appropriate configuration for testing, staging, or live production use.
Manage Configuration Settings: After selecting an environment, navigate to the Configuration tab to manage environment-specific settings. You will see a list of existing default configuration settings displayed in a table format.
Toggle Visibility:
Use the shield icon to toggle the visibility of each setting, making it public or private according to your project's requirements.
Click the shield icon to toggle the visibility of a configuration setting:
Private values are securely stored in Azure Key Vault, ensuring they remain encrypted and protected.
Public values remain visible within the configuration settings panel.
Use the Same Value for All Environments: To apply the same value across all environments (Development, QA, and Production), toggle the “Apply globally” capsule-style switch:
Enabled: The value is used across all environments.
Disabled: You can specify different values for each environment.
Delete a settings: To remove a configuration setting:
Hover over the setting row – a trash can icon will appear on the right.
Click the trash can icon associated with that specific setting.
Confirm the deletion when prompted.
Once you've created configuration settings, you can refer to them throughout your application. These settings are stored within the Config service and can be accessed and utilised in various parts of your application's code.
Below is a list of common system-generated configuration variables that you'll typically encounter when working with new projects in the ComUnity Platform's Development deployment environment:
AppName: The AppName variable represents the name or title of your application. It serves as an identifier within the ComUnity Platform, helping to distinguish your application from others during the development phase.
BaseUrl: The BaseUrl variable specifies the base URL or web address of your application. It defines the starting point for all relative URLs within your application and is essential for proper routing and navigation during development.
ComsApi: The ComsApi variable refers to the API endpoint or URL of the communication service within the ComUnity Platform. It enables your application to interact with the communication service, facilitating the exchange of messages, notifications, and other communication-related tasks during development.
ComsService: The ComsService variable is a URL that represents the specific communication service employed within the application.
ComsServicePassword: The ComsServicePassword variable stores the password or secret key associated with the communication service in the Development environment. It is instrumental in authenticating and securely accessing the service.
ComsServiceUsername: The ComsServiceUsername variable stores the username or identifier used for authentication and identification within the communication service during development. It allows your application to connect and interact with the service using the designated user or account within the Development environment.
MediaServerUploadUrl: The MediaServerUploadUrl variable denotes the URL or endpoint of the media server responsible for uploading and storing media files within the ComUnity Platform's Development environment. It enables your application to seamlessly upload images, videos, or other media content for use within the platform during development.
PublishedAppName: The PublishedAppName variable represents the name of your application as it appears to end users or the public within the Development environment. It is commonly utilised for displaying the application name in user interfaces or when referencing the published version of your application during development.
WelcomeMessage: The WelcomeMessage variable contains a pre-defined message or greeting displayed to users when they initially interact with your application in the Development environment. It serves as a friendly introduction or provides essential instructions to guide users through their initial experience during development.
Our deployment process utilises three distinct environments, each colour-coded to prevent deployment errors by providing immediate visual differentiation. This system ensures that modifications and updates are made in the correct environment, safeguarding the development and deployment pipeline.
This serves as the default playground for developers with relevant access. They can write, test, and refine code freely within this environment before moving it further down the pipeline. This isolated space ensures code integrity and consistency across the team.
After the development phase, code is promoted to the QA/Testing environment. Here, rigorous testing takes place to ensure the application functions flawlessly under various conditions. This environment closely resembles the production setup, allowing for the identification and resolution of potential issues before reaching end users.
The final stage in the deployment process is the production environment. This is where the fully tested and stable application is made live and accessible to end-users. Deployments to this environment are critical and require meticulous planning and execution to ensure service continuity and reliability.
By employing these colour distinctions—green for Development, vibrant purple for QA/Testing, and deep purple for Production—we enhance operational safety by reducing the risk of cross-environment deployment errors, thereby supporting the overall quality and success of the application.
Introducing Projects in the ComUnity Developer Toolkit. Learn essential techniques for creating and configuring projects to build robust digital applications.
A project in the ComUnity Developer Toolkit contains everything that defines your namespace for an application.
Project configuration in the ComUnity Developer Toolkit is managed through the Project Settings section, which provides a centralised location for defining environment-specific behaviours and data-level controls. Introduced in v24.4, this unified section brings together previously separate Environmental Settings and Project Settings to streamline project setup and governance. While project-level configurations are now centralised, remain a distinct area for managing organisation-wide settings.
Access to the Project Settings section is permission-based. Only users with the appropriate roles can view or modify these settings. To learn more about managing roles and access within a project, refer to the section.
The Toolkit includes a suite of universally recognised icon libraries, , , , and , along with a specialised Weather Icons collection. It also maintains backward compatibility with Legacy icons, ensuring a smooth transition for existing projects.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
Tab View of Supported Icon Libraries: The Icons tab displays a tile view of supported icon libraries, including , , and others.
All system icon libraries will appear as tiles, including the Add Icon tile view the section above.
All system icon libraries will appear as tiles view the section above for more details.
Click the Manage tab located this action will display the Add a Custom Icon Library view, for instructions how to add icons view .
Icons serve as visual cues that empower users to effortlessly navigate and interact with various interface elements. Within the Toolkit, icons seamlessly integrate with a range of list components, elevating both aesthetic appeal and functional effectiveness. This guide delves into the process of implementing icons in diverse implementations.
Implementing icons into your is a straightforward process:
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
The ComUnity Developer Toolkit is a cloud-based solution deployed in , accessible from any browser. The URL you use to access the Toolkit depends on your organisation’s deployment type:
For organisations using the shared ComUnity environment, access the Toolkit via, the :
The Toolkit supports multiple authentication options to cater to organisational needs. With the release of v24.4, authentication was introduced for single-tenancy instances hosted in .
(Available in v24.4 and above)
As of version 24.4, the ComUnity Developer Toolkit supports as an authentication mechanism, enabling organisations to facilitate secure sign-ins for their users and partners. This integration offers a seamless, enterprise-grade authentication flow, aligning with modern identity management practices. Microsoft Entra authentication is available exclusively for single-tenancy Toolkit instances deployed in Azure environments. The introduction of Microsoft Entra authentication enhances the Toolkit’s ability to serve organisations managing complex authentication requirements for their users and partners. By leveraging Microsoft Entra, organisations can provide a unified authentication experience while maintaining high security standards and scalability. Advantages
• Simplified Management: Reduces administrative overhead in -hosted single-tenancy deployments.
• Deployment Only: Microsoft Entra authentication is exclusive to single-tenancy instances hosted in Azure and is not supported in shared environments or the multi-tenancy ComUnity Platform.
1. Ensure you are signed into your organisational-issued Microsoft account. If not, visit and authenticate.
Access Project Settings: For steps on how to access Project Settings, refer to the section.
Enhanced Security with Key Vault Integration: Configuration allows for the secure storage of sensitive settings, such as passwords and API keys, by integrating with . This feature provides additional security for stored settings, ensuring they are encrypted and safely managed. Users can easily toggle the storage location of specific settings to the Key Vault, adding an extra layer of protection.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
A tenant is an instance of the ComUnity Platform, that is provisioned to an organisation. The type of tenancy supported in your organisation depends on your licence for further details view section. Each tenant is identified using a unique system generated name which is not configurable. Each ComUnity Platform tenant is distinct, unique, and separate from all other ComUnity Platform tenants. A tenant can have many projects but each project belongs to a single tenant.
Take charge of your teams and resources with the Organisations feature in ComUnity Toolkit. This powerful suite streamlines organisational management, empowering you to build productive teams, control access, and ensure smooth collaboration.
Effortless Organisation Management: Manage organisations with ease and handle administrative tasks efficiently and maintain a clear structure.
Build Ideal Teams: Add, remove, and group team members intuitively. Assign roles and permissions to ensure the right people are on the right projects.
Granular Access Control: Define and update permission levels for each team member and resource. Safeguard sensitive information and prevent unauthorised access.
Secure Collaboration: Control who sees what, setting clear boundaries and promoting a culture of trust and productivity.
Deploy your apps into the dedicated environments throughout the development lifecycle and establish roles and permissions to ensure secure and efficient deployments.
Streamlined Deployment Workflow:
Dedicated Environments: Leverage three distinct environments – Development, QA/Testing, and Production – each designed for a specific stage of your project's lifecycle.
Seamless Transitions: Promote code smoothly between environments, ensuring an efficient development process.
Enhanced Testing: Conduct thorough testing in the QA/Testing stage, closely mimicking the production environment to identify and address potential issues before launch.
Unparalleled Security and Control:
Granular Permissions: Define and assign specific roles and permissions to team members, granting access only to the environments and resources they need.
Safeguarded Code: Restrict unauthorised access to development and testing environments, protecting your codebase from unintended modifications.
Clear Accountability: Track changes and identify responsible parties easily with role-based access controls.
Templates are preconfigured application components (entities, associations, navigation, screens, and application objects) that can be added to a project to quickly and easily add specific features. Templates can also be added to a brand new project to fast track creation.
Templates offer a number of benefits, including:
Speed: Templates can save you a significant amount of time and effort by providing you with pre-built components that you can simply add to your project.
Quality: Templates are developed by experienced developers and are tested to ensure that they meet high quality standards.
Flexibility: Templates can be customised to meet your specific needs.
The platform supports the following types of templates :
Item templates: These templates add a single feature to a project, such as Governance, Live Chat, or Base Temporal Entity.
Group templates: These complex templates are used to create fully fledged applications with multiple features, such as Blog, Smart City, or Business Directory. A group template is a set of item templates.
Templates may have dependencies, which are references to other templates. When you add a templates with dependencies to your project, the Toolkit will automatically add its dependencies to the project. Conversely, when you remove a template with dependencies, its dependencies are not removed from your project.
After successfully creating your project, you can navigate to Project Settings > Templates to manage templates.
Go to Project Settings > Templates .
All the templates that are already included in your project will have their checkboxes ticked.
Select a template by ticking its checkbox. Conversely, you may deselect a template by unticking its checkbox.
Click Save.
More details about the templates that are supported in the ComUnity Development Toolkit:
The ComUnity Development Toolkit includes a variety of supported templates that can be used to quickly and easily add features to your project. Templates are preconfigured application components (entities, associations, navigation, screens, and application objects) that are developed by experienced developers and tested to ensure high quality standards.
Using supported templates can save you a significant amount of time and effort, and can help you to create better quality applications. Templates are also flexible and can be customised to meet your specific needs.
In this subsection, we will list all of the supported templates that are available in the ComUnity Development Toolkit. We will also provide a brief description of each templates and explain how to use it.
We encourage you to browse the list of supported templates and to use them to create your own custom applications. If you have any questions or need assistance, please do not hesitate to contact our support team.
The BaseTemporalEntity in the ComUnity Platform is a no-code template for working with temporal tables. It is recommended that temporal entities inherit from the BaseTemporalEntity.
The Economic Development template provides a comprehensive solution for municipalities to manage economic development efforts in their communities. This template allows businesses to create and manage their listings, while also allowing municipal administrators to send business invitations and other notifications.
With the Economic Development template, municipalities can streamline their economic development efforts and provide a user-friendly platform for businesses to manage their listings and connect with the community. This can help to boost local economic growth and promote a thriving business environment. Contact Us
This template adds application components which allow admins to add contact us numbers and also allows both users and admins to view contact us numbers.
This template adds application components which allow users to post feedback and also allows admins to view feedback logs. Governance
The Governance template includes application components that enable local governments to publish their documents and procedures for public consumption. Although it was initially designed for municipalities, its generic document publishing capabilities can be adapted to fit other use cases. LiveChat
The Live Chat template provides a generic solution for offering real-time communication with users of digital services, whether it be a website or a mobile application. With the Live Chat feature, users can chat directly with customer service representatives or support agents to get quick answers to their questions, report issues, or provide feedback. NewsFeed The NewFeed template adds application components which allow admins to post and edit news articles and also allows users to view news articles. Notifications
The Terms template adds a page in your application that outlines the terms and conditions of using applications built on the ComUnity Platform, this page is accessible to all of your users. Twitter
The Twitter template allows you to add a Twitter feed to your application using a specified hashtag or Twitter handle. However, currently there is no UI available in the toolkit the configuration of the Twitter feed. You can contact our technical team for assistance in setting up the Twitter feed in your application. Vacancies
The Vacancies template adds application components which allow admins to manage vacancies also allows users to view vacancies and manage their cvs and job applications. Youth Development
The YouthDevelopment template adds application components which allow admins to post and edit youth opportunities and also allows both admins and users to view youth opportunities. Blog
A Blog template is a pre-built template or functionality that can be used to add a blog section to an application or website. It typically includes features such as the ability to create, edit and publish blog articles and manage comments. Business Directory
The Business Directory template provides functionality to add the business profile to your applications, profile properties which can be added include photo, address, geo-location and photo. Smart City
The Survey template provides a flexible way to create and conduct surveys within an application. Users can define custom survey questions using a variety of question types, such as multiple choice, rating scales, and open-ended text fields. These questions can be arranged into a survey form that can be filled out by respondents within the application. Once the survey is complete, the responses can be collected and analysed by the application administrators.
When you build your project the ComUnity Developer Toolkit the build service provisions resources for your app on Microsoft Azure and then builds your Data Service project based off your data model definition. If a database exists it then runs a data migration. After a successful build it then publishes your project to Internet Information Services(ISS).
Don't risk losing your work - always remember to rebuild your project for proper deployment.
To build your project in the Toolkit go to your project Settings, located under the navigation bar on the right-hand side, you will find the Build & Launch controls displayed below:
Build Status Indicator: The Build Status Indicator serves as a visual representation of your project's build status. By default, it appears as yellow and changes colour based on the outcome of the build process. After a successful build, it displays a green colour, while a red colour indicates a failed build.
Build Action Dropdown Menu Button: Clicking on the Build Action Dropdown Menu Button reveals a menu that displays the supported Build Actions. This button allows you to toggle the visibility of the dropdown menu for easy access to these actions.
Build: The Build action is a critical step in initiating the build process for your project. When you click on the Build action, a modal window will appear on your screen, providing important information about the build progress.
Within the modal, you will find the following components:
Progress Bar: This visual element allows you to track the progress of your build. It provides a visual representation of how far the build process has advanced.
Completed Steps Counter: This counter displays the number of build steps that have been successfully completed. It helps you keep track of the progress made by the build process.
Launch project when done Checkbox: By selecting or deselecting this checkbox, you can control whether the project will be automatically launched after the build process is complete. Choose according to your requirements.
Hide Window: If you wish to dismiss the modal window, simply click on the "Hide Window" button. This action will close the modal and allow you to continue monitoring the build progress and outcome.
To view the progress and outcome of your build, navigate to the top of your project Settings page, just below the navigation bar, where the Build controls are displayed. Here, you can observe the ongoing build progress and the outcome of the most recent build. This section provides you with a convenient overview without the need to keep the modal window open.
By utilising these features, you can effectively manage and monitor the build process of your project within the ComUnity Toolkit.
It's important to note that errors can occur during the build process. If an error occurs, the build outcome indicator will display a red colour to indicate a failed build. In such cases, you may need to review the error messages or logs to identify and resolve the issues that caused the build failure.
Build & Launch: The Build & Launch action combines the build process with the automatic opening of the web version in a new browser tab. By selecting this action, your project will be built, and the web version will be launched automatically. Please ensure that browser popups are enabled for your launch to work. This build action is selected by default, providing a streamlined approach to building and launching your project.
Launch: The Launch action allows you to directly open the web version of your project in a new browser tab. By choosing this action, you can quickly access and view your project without going through the build process. This option is ideal if you have previously built your project and want to launch it again without any modifications.
Organisational Management within the Toolkit is a comprehensive feature designed to empower the Organisation Administrator with the tools and capabilities necessary for effective management and oversight of their organisation. This functionality is pivotal in maintaining a structured, efficient, and collaborative environment within the platform.
The Organisation Administrator is the key individual responsible for managing their organisation within the Toolkit. They are the first point of contact and register the organisation on the platform.
Managing Users: Granting access, assigning roles, and maintaining user accounts within the organisation.
Creating and Managing Teams: Establishing teams, assigning members, and managing their composition.
Project Management: Overseeing projects, assigning project owners (leaders), and ensuring efficient project execution.
Organisational Control: Having full visibility into all projects, reassigning project ownership as needed, and modifying team structures to optimise collaboration.
In essence, the Organisation Administrator holds the highest level of authority within the Toolkit, granting them comprehensive control over their organisation's functionality.
To access and modify your organisation's details, follow these steps:
Log In: Sign into the Toolkit with your credentials.
Access Organisation Settings: From the main menu, navigate to "Organisation Settings".\
View and Edit Details: Here, you can view your organisation's information and edit details such as the organisation's name.
To manage users and their roles within the organisation, proceed as follows:
Access Organisational Settings: Go to the "Organisation users and roles" tab within the Organisational Settings.
View Users: This section displays all users associated with your organisation. Use the search functionality to find specific users and the view functionality to find users by role.
Modify User Access: To remove a user from the organisation, click the three-dot button next to the user's name and confirm the action in the "Delete Member" modal.
Assign/Remove Roles: Click the plus icon in the Roles assigned to the user, an "Assign or remove team member roles" modal will appear**.** In the "Assign or remove team member roles" modal, check or uncheck roles to assign or remove them, respectively.
Apply Changes: Click "Apply" to save your modifications.
This section outlines the default user roles supported in the Toolkit. The roles manage access to various components and functionalities within the system. Permissions are environment-specific, and access rights range from 1 to 3.
Default Roles
Lead Developer
Developer
Operations
Viewer
Each role has specific permissions across the development (DEV), quality assurance (QA), and production (PROD) environments.
1: View only
3: Full access (view and edit)
1: View only
3: Full access (view and edit)
By following these guidelines, the Organisation Administrator can effectively manage the organisation's structure and member roles within the Toolkit, ensuring a streamlined and efficient operational environment.
The deployment process within the ComUnity Platform is a critical pathway that ensures your application is thoroughly tested and stable before it reaches the end-user. Adhering to a structured and sequential progression through the Development, QA/Testing, and Production environments, each stage serves as a gatekeeper, ensuring only the highest quality code is promoted.
When deploying your project within the ComUnity Platform, it is essential to determine whether a partial or full deployment is necessary. Each type of deployment serves different purposes and is used under specific conditions.
A full deployment involves deploying all components of your application. This includes the Data Service, Authorisation Service, Client, Communication service, Configuration, Screens, and any other modules or services within the application. Full deployments ensure that all parts of the application are updated and synchronised.
Use cases for Full Deployment:
Initial release of the application.
Major updates or changes that impact multiple modules or components.
Structural changes to the application that require all components to be redeployed.
Components in a Full Deployment:
Data Service
Authorisation Service
Client
Communication Service
Configuration
Screens
All other application modules and services
A partial deployment involves deploying only specific parts of the application. This type of deployment is useful when minor updates or bug fixes need to be applied without redeploying the entire application. Partial deployments save time and resources by targeting only the affected components.
Use cases for Partial Deployment:
Minor bug fixes or updates that affect only a specific module.
Incremental updates that do not require a full application redeployment.
Changes to configuration files or settings that do not impact the overall application structure.
Examples of Partial Deployments:
Authorisation Service: Deploy updates or fixes to the authorisation without affecting other parts of the application.
Client: Coming soon..
Communication Service: Update communication configurations or client modules independently.
Configuration: Modify and deploy changes to specific configuration
Screens: Modify and deploy changes to specific screens or UI components.
During the deployment process, the ComUnity Platform allows you to select the deployment type based on your needs. For a full deployment, activate the Full Deployment toggle and ensure all components are selected. For a partial deployment, deactivate the Full Deployment toggle and select only the necessary components.
The decision between partial and full deployment should be based on the scope and impact of the changes being made. By selecting the appropriate deployment type, you can ensure a smooth and efficient deployment process, minimizing downtime and maximizing application stability.
Successful Build: Before initiating deployment, confirm that your project has successfully built without any errors or critical warnings.
To prepare your project archive for deployment, follow these carefully outlined steps to ensure your application is packaged correctly and ready for the deployment process.
Download the Project Archive:
Obtain the latest version of your project archive. This will include all the necessary files for deployment.\
Open the Web.config File:
Update Configuration Settings:
Within the Web.config
file, remove keys 13-19 under <appSettings>
that are pertinent only to local development.
Modify the ConfigDeployment
key to reflect the deployment environment, for example: value="<app_name>_qa"
for QA deployments and value="<app_name>_prod"
for Production deployments. The updated section should resemble the following:
4. Save and Build:
Save the changes made in the `Web.config` file. *
Build your project within Visual Studio to confirm that there are no compilation errors or issues with your code.
6. Compress the Package: Compress the deployment package into a .zip file format, readying it for the deployment process.
By the end of these steps, you should have a properly configured and compressed project archive that is ready to be deployed to the designated environment.
To successfully deploy a project, follow these steps:
Note: To progress through each step, ensure all required fields and assets are properly set, then click the "Next" button to proceed.
Set Deployment Name and Release Notes: Begin by naming your deployment and providing detailed release notes that outline the changes and features included in this deployment. \
Click the "Create assets" button to proceed with a full deployment
To perform a Partial Deployment:
Deactivate the Full Deployment Switch: Ensure the Full Deployment toggle is deactivated.
Select Relevant Components: Choose only the necessary components (e.g., Authorization, Communication, Configuration) to deploy.
Create Assets: Click the "Create assets" button to proceed.
Review Your Configuration Scripts: Thoroughly review the configuration scripts to ensure they are correct and will execute as expected without errors. Make any necessary adjustments. \
Deploy: With all configurations and reviews complete, proceed to deploy your project. This final step may take some time, so please be patient.\
In conclusion, following this structured and detailed guide ensures that your project is deployed smoothly and effectively. By methodically setting up, reviewing, and executing each step, you minimise the risk of deployment errors and ensure your application performs optimally in its intended environment. This careful attention to the deployment process not only smooths the transition between environments but also supports the ongoing development and scalability of your application.
Once you have successfully logged in, you will be directed to the Home screen. If you are already actively engaged in a project, click on the Home navigation item located within the menu bar.
To create a new project, follow these steps:
Go to the Start a new project section at the bottom of your home page. Here, you'll find a variety of templates to choose from to help you create your project.
Once you've found a suitable template, click on the Use This button on the template's card. This will open a new dialog box where you can enter your project details.
Enter a unique name for your project in the Project name box.
Click on the Create button to create your new project
Once your project is successfully created, click on Settings to access your project's settings.
and add the relevant template on initial set up.
Application components (entities, associations, navigation, screens, and application objects) typically have preconfigured permission rules that control user access view learn more.
The Application Sharing template adds application components which allow users to share your app though SMS invitation. The templates is a dependency of the ApplicationSharing templates .
The Communities template adds application components which allow admins to manage community data. The templates is a dependency of the Communities templates.
The Economic Development template includes dependencies on several other templates, including , , and . These dependencies provide additional functionality and customisation options, such as targeted notifications to specific user groups and real-time updates for users.
The Cases template is a logger implementation that allows community members to report cases or issues encountered while using municipal services. Municipal administrators can manage and address submitted logs, view and prioritise them, and track issue resolution progress. is a dependency of the Cases template. Feedback
The Notification template enables an application to send both personal and broadcast notifications. Personal notifications can be targeted to a specific user while broadcast notifications are sent to all users of the application. These types of notifications primarily fall under the IN APP channels in the and must be configured programmatically, to learn more view . Additionally, the Community template includes Community Notifications, which can be used to send notifications to a specific community within the application. PublicSafety
The PublicSafety template adds application components which allow admins to manage public safety and also allows users to view vacancies and manage their cvs and job applications. The and templates are dependencies of the PublicSafety template. Terms
The SmartCity template is a complex template which includes the , , , , EconomicDevelopment, , , , , , , , , , , and template. It is used as a template to build smart cities.
Failure to rebuild your project after modifying the , , or virtual entities can result in data loss and inconsistencies. Rebuilding is crucial to publish changes on Internet Information Services (IIS) and ensure the integrity of your application.
Manage User Roles: To adjust user roles, click the "View Roles" button next to the respective user. Use the (+) button to assign or remove roles. For more information about the supported roles and their permissions, please refer to the section.
To learn more about environments, please refer to the section.
To effectively manage teams in the Organisation refer to.
Use to access your project's Web.config
file, which contains critical configurations for deployment which need to be adjusted for the deployment.
Create a Web Deployment Package: Construct a Web Deployment Package using the Publish Web Wizard in Visual Studio. Refer to the guide for detailed steps.
To initiate the deployment of a project within the Toolkit, a structured and guided step-by-step process is employed. This methodical approach encompasses the uploading of necessary assets and the precise configuration of deployment scripts. The focal point of this process is the deployment of a web deploy package to an server, which ensures that the application is correctly installed and configured for use in the specified environment.
Upload and Configure the Prepared Web Deploy Package: Upload the web deploy package prepared according to the . To upload the package, click the three-dot button to open a modal and select "Upload replacement". After uploading, click the "Accept" button and the Toolkit will automatically generate deployment scripts for you. Use the chevron button to expand and collapse your scripts.\
To create a project using the ComUnity Developer Toolkit, the first step is to log in to the platform. If you're unsure about the login process, you can refer to the section for more information.
If you're not sure which template to use, you can check out the section to learn more. Alternatively, you can use a blank template, by selecting the Blank Project.
Congratulations on successfully creating your new project! The next step is to for the first time so as to publish it on Internet Information Services(ISS). Once you've done that, you can start building your project using the .
Build & Launch
DEV
Full (3)
Deploy
DEV
Full (3)
Deploy
QA
Full (3)
Develop
DEV
Full (3)
Download Backup
DEV
Full (3)
Environment Settings
DEV
Full (3)
Environment Settings
PROD
Full (3)
Environment Settings
QA
Full (3)
Operate
PROD
Full (3)
Operate
QA
Full (3)
Project Settings
DEV
Full (3)
Project Settings
PROD
Full (3)
Project Settings
QA
Full (3)
Communications
DEV
Full (3)
Custom Classes
DEV
Full (3)
Custom Website
DEV
Full (3)
Data
DEV
Full (3)
Integrations
DEV
Full (3)
Observability
DEV
Full (3)
Observability
PROD
Full (3)
Observability
QA
Full (3)
Screens
DEV
Full (3)
Deploy to QA
DEV
Full (3)
Deployment history
DEV
Full (3)
Deploy to Production
QA
Full (3)
Deployment history
QA
Full (3)
Build & Launch
DEV
Full (3)
Deploy
DEV
Full (3)
Deploy
QA
Full (3)
Develop
DEV
Full (3)
Download Backup
DEV
Full (3)
Environment Settings
DEV
Full (3)
Environment Settings
PROD
Full (3)
Environment Settings
QA
Full (3)
Operate
PROD
Full (3)
Operate
QA
Full (3)
Project Settings
DEV
Full (3)
Project Settings
PROD
Full (3)
Project Settings
QA
Full (3)
Communications
DEV
Full (3)
Custom Classes
DEV
Full (3)
Custom Website
DEV
Full (3)
Data
DEV
Full (3)
Integrations
DEV
Full (3)
Observability
DEV
Full (3)
Observability
PROD
Full (3)
Observability
QA
Full (3)
Screens
DEV
Full (3)
Deploy to QA
DEV
Full (3)
Deployment history
DEV
Full (3)
Deploy to Production
QA
Full (3)
Deployment history
QA
Full (3)
Environment Settings
DEV
Full (3)
Environment Settings
PROD
Full (3)
Environment Settings
QA
Full (3)
Develop
DEV
Full (3)
Operate
PROD
Full (3)
Operate
QA
Full (3)
Observability
DEV
Full (3)
Observability
PROD
Full (3)
Observability
QA
Full (3)
Build & Launch
DEV
View (1)
Deploy
DEV
View (1)
Deploy
QA
View (1)
Develop
DEV
View (1)
Download Backup
DEV
View (1)
Operate
PROD
View (1)
Operate
QA
View (1)
Communications
DEV
View (1)
Custom Classes
DEV
View (1)
Custom Website
DEV
View (1)
Data
DEV
View (1)
Integrations
DEV
View (1)
Observability
DEV
View (1)
Observability
PROD
View (1)
Observability
QA
View (1)
Screens
DEV
View (1)
In the dynamic environment of the Toolkit, roles and permissions are foundational elements that ensure secure, efficient, and effective management of projects and teams within an organization. Understanding the distinct roles within the Toolkit and the permissions associated with each is crucial for users to navigate and utilise the system to its full potential.
Roles within the Toolkit are designed to cater to various levels of responsibility, from system-wide oversight to specific project tasks. These roles facilitate a structured approach to project management, allowing for clear delineation of duties and access control. Permissions linked to these roles define what actions a user can perform, ensuring that sensitive operations and information are accessible only to authorised individuals.
This section of the documentation aims to provide a comprehensive overview of the roles available within the Toolkit, detailing the permissions each role holds and the significance of these roles in the overall management of projects and organisational settings. Whether you are a Toolkit Administrator managing the system at a global level, an Organisational Administrator overseeing projects and teams, or a Developer contributing to project tasks, understanding your role and permissions is the first step towards maximising your effectiveness and contribution within the Toolkit.
By the end of this section, you will have a clear understanding of how roles and permissions work in tandem to support a secure, organised, and collaborative environment for all users involved in project and team management.
In modern project management, clear roles and responsibilities are essential for operational efficiency and success. The Toolkit is designed to support organisations with a well-defined role hierarchy, ensuring smooth project development from strategic oversight to detailed task execution.
The Toolkit framework assigns specific permissions and responsibilities to each team member, from Organisational Administrators to Developers and Designers. This structure fosters effective collaboration and access control, ensuring everyone contributes to the organisation's goals. By outlining this role hierarchy, we highlight the importance of organised collaboration and access control within the platform.
Understanding your role within this structure is the first step toward leveraging the Toolkit's full potential and driving your organisation's success. Whether you're managing the organisation or contributing your expertise, the Toolkit's framework helps maintain order and efficiency in collaborative projects.
Toolkit Administrator
Positioned at the highest level, the Toolkit Administrator has system-wide access and control over all organisations, projects, and users within the Toolkit. This role is responsible for the overall management and configuration of the Toolkit, including user and organisation approvals.
Organisational Administrator
Positioned at the top of the organisational hierarchy is the Organisational Administrator, who has full control over all aspects of their organisation within the Toolkit. This includes managing users, creating teams and assigning team members, managing projects, assigning project owners, and overseeing the assignment of various teams and roles within the organisation. The Organisational Administrator can view all projects, reassign project ownership, and edit team compositions.
Project Owner
The Project Owner has control over a specific project, including visibility and editing rights. Initially, they are the sole individual with access to the project until they assign teams to it. The Project Owner can manage the project details, progress, and team assignments but operates under the governance of the Organisational Administrator.
Teams (Developers, Lead Developers, Testers, DevOps etc.)
Teams consist of individuals with roles such as Developer, Lead Developer, and other specialised roles defined within the organisation. These roles have specific permissions related to project development, such as editing project files, contributing to development tasks, and collaborating with other team members. The composition and assignment of these teams are managed by Project Administrators and overseen by Project Owners and the Organisational Administrator.
Individual Contributors (Developers, Designers, Testers, DevOps etc.)
At the project level, individual contributors work within their teams on specific tasks and projects. They have access and editing rights to projects they are assigned to and follow the directions of their team leaders (e.g., Lead Developers) and project governance established by Project Owners and Administrators.
This section outlines the user role journey from initial signup:
Initial Signup: A new user signs up to the Toolkit, representing a company or an individual with the intent to partner and build applications within the platform.
Initial Role Assignment: Upon signup, if the user is the first or only member of their organisation within the Toolkit, they are most likely to be made an Organisational Administrator. This role grants them the ability to manage the organisation's presence within the Toolkit, including project and user management.
Role Expansion: As the platform evolves, the plan is for Organisational Administrators to be able to invite new users into the organisation. These new users would immediately have access to the Toolkit, and their roles within the organisation can be set by the Organisational Administrator. This functionality aims to streamline the onboarding process for new users and facilitate role assignment within the organisation.
Manual Role Assignment (Current State): Currently, if another member of the organisation needs access to the Toolkit, they must register independently. The Toolkit Administrator then manually assigns this new user to the organisation, after which the Organisational Administrator can set their roles, such as Developer, Lead Developer, Tester , DevOps or any other defined role within the system.
Toolkit Administrator Role: The Toolkit Administrator plays a crucial role in this process, as they are responsible for approving registrations, creating organisations, and assigning users to organisations. This role is essential for the initial setup and ongoing management of user roles and organisation structures within the Toolkit.
Lead Developer
Build & Launch
DEV
Full (3)
Deploy
DEV
Full (3)
Deploy
QA
Full (3)
Develop
DEV
Full (3)
Download Backup
DEV
Full (3)
Environment Settings
DEV
Full (3)
Environment Settings
PROD
Full (3)
Environment Settings
QA
Full (3)
Operate
PROD
Full (3)
Operate
QA
Full (3)
Project Settings
DEV
Full (3)
Project Settings
PROD
Full (3)
Project Settings
QA
Full (3)
Communications
DEV
Full (3)
Custom Classes
DEV
Full (3)
Custom Website
DEV
Full (3)
Data
DEV
Full (3)
Integrations
DEV
Full (3)
Observability
DEV
Full (3)
Observability
PROD
Full (3)
Observability
QA
Full (3)
Screens
DEV
Full (3)
Deploy to QA
DEV
Full (3)
Deployment history
DEV
Full (3)
Deploy to Production
QA
Full (3)
Deployment history
QA
Full (3)
Developer
Build & Launch
DEV
Full (3)
Deploy
DEV
Full (3)
Deploy
QA
Full (3)
Develop
DEV
Full (3)
Download Backup
DEV
Full (3)
Environment Settings
DEV
Full (3)
Environment Settings
PROD
Full (3)
Environment Settings
QA
Full (3)
Operate
PROD
Full (3)
Operate
QA
Full (3)
Project Settings
DEV
Full (3)
Project Settings
PROD
Full (3)
Project Settings
QA
Full (3)
Communications
DEV
Full (3)
Custom Classes
DEV
Full (3)
Custom Website
DEV
Full (3)
Data
DEV
Full (3)
Integrations
DEV
Full (3)
Observability
DEV
Full (3)
Observability
PROD
Full (3)
Observability
QA
Full (3)
Screens
DEV
Full (3)
Deploy to QA
DEV
Full (3)
Deployment history
DEV
Full (3)
Deploy to Production
QA
Full (3)
Deployment history
QA
Full (3)
Operations
Environment Settings
DEV
Full (3)
Environment Settings
PROD
Full (3)
Environment Settings
QA
Full (3)
Develop
DEV
Full (3)
Operate
PROD
Full (3)
Operate
QA
Full (3)
Observability
DEV
Full (3)
Observability
PROD
Full (3)
Observability
QA
Full (3)
Viewer
Build & Launch
DEV
View (1)
Deploy
DEV
View (1)
Deploy
QA
View (1)
Develop
DEV
View (1)
Download Backup
DEV
View (1)
Operate
PROD
View (1)
Operate
QA
View (1)
Communications
DEV
View (1)
Custom Classes
DEV
View (1)
Custom Website
DEV
View (1)
Data
DEV
View (1)
Integrations
DEV
View (1)
Observability
DEV
View (1)
Observability
PROD
View (1)
Observability
QA
View (1)
Screens
DEV
View (1)
1: View only
3: Full access (view and edit)
This format organizes the roles and their permissions in a clear tabular manner, making it easier to understand which components each role has access to and in which environments.
Discover the versatile navigation and screen configuration options offered by the ComUnity Developer Toolkit.
Explore our comprehensive guide to building application data. Gain essential knowledge and practical insights on data modelling and effective data access strategies to build scalable applications.
Developers using the ComUnity Developer Toolkit have the flexibility to build their application data models either as a Diagram (Entity Relationship Diagram - ERD) or as a List, each offering unique benefits.
When visualising the data model as a Diagram (ERD), developers gain a clear and intuitive representation of the data entities and their relationships. This visual approach simplifies the process of specifying entity properties, defining relationships, and establishing data constraints. Diagrams (ERDs) aid in designing an effective database schema, allowing developers to easily identify and optimise the structure and connections between entities.
On the other hand, representing the data model as a List provides a concise and organised view of the entities and their properties. This approach offers a straightforward way to define the structure of the data without the need for a visual diagram. Developers can easily specify entity properties, data types, and relationships using the List format, making it a suitable option for simpler data models or cases where a visual representation may not be necessary.
Both approaches have their advantages. The Diagram (ERD) provides a visual representation that aids in understanding and optimising complex data relationships, while the List format offers a streamlined view for simpler data structures or when a visual diagram is not required.
Responsibility and Prerequisites:
The task of assigning managing teams to a project is entrusted to the Organisational Administrator.
To manage teams in the organisation, proceed as follows:
Login to the ComUnity Developer Toolkit
Access Organisation Settings: From the main menu, navigate to "Organisation Settings".
Access Teams: Go to the "Teams" tab within the Organisational Settings.
View Teams: This section displays all teams in your organisation.
Create a Team:
To establish a new team, click the "+ Create Team" button.
In the "Create Team" modal that appears, enter the team's name and confirm the creation.
View Team Members:
For details on a specific team, click the "View Team" button adjacent to the team's name.
A detailed view of the team members along with their roles will be displayed. Utilise the search function for an enhanced experience in finding specific members or roles.
Delete a Team: To delete a team, click the three-dot button next to the team's name and confirm the action in the "Delete Team" modal.
Responsibility and Prerequisites
The task of assigning teams to a project is entrusted to the Project Owner. Before proceeding, ensure that the necessary teams have already been established within your organisation. This step requires collaboration with the Organisational Administrator, who is responsible for creating teams and assigning members to those teams.
In the Toolkit, the flexibility of project management is enhanced by allowing Project Owners to assign teams not only after a project has been established but also directly during the project creation phase. This capability streamlines the setup process, ensuring that the right resources and teams are aligned from the outset.
Assigning Teams During Project Creation
Initiate Project Creation: When creating a new project within the Toolkit, fill out the project details as prompted.
Team Assignment Option: Look for the "Assign one or more teams to the project" section within the project creation interface. This step occurs before finalising the project setup.
Select Teams: Choose from the list of available teams within your organisation. If the required team is not listed, remember that the Organisational Administrator can create and configure new teams.
Finalise Project Creation: After selecting the desired teams, proceed to complete the remaining project details and finalise the creation process.
Assigning Teams to an Existing Project - Project Teams
For Project Owners looking to assign teams to an already existing project:
Login to the ComUnity Developer Toolkit
Select your Project: From the dashboard, select the project you wish to manage.
Navigate to Project teams: In the Project Settings window, select "Project teams."
Modify Team Assignments: Click on "Add or Remove a Team from this Project" to adjust your team assignments.
To include a team in your project, check the box next to the team's name.
To remove a team from your project, uncheck the box next to the team's name.
Multiple Team Assignments: Remember, it's possible to assign multiple teams to a single project, enhancing collaboration and resource allocation.
In the ComUnity Developer Toolkit, you have the power to establish and configure various types of entity associations and relationships within your data model. This section focuses on creating entity associations using Table Links, a powerful feature that enables you to define connections between entities and add foreign key properties.
Whether you need to establish one-to-many, one-to-one, or other types of relationships, the Toolkit offers flexible options to meet your requirements. With Table Links, you can create robust associations between entities, ensuring data integrity and efficient data retrieval.
By leveraging Table Links, you can seamlessly integrate related entities and enable cascading actions, such as automatic updates or deletions. This enhances the consistency and efficiency of your data model, providing a solid foundation for building sophisticated applications.
In the upcoming section, we will explore the step-by-step process of creating entity associations using Table Links. You will learn how to establish relationships, define foreign key properties, and configure the desired behaviour of the associations.
To create Table Links and establish entity associations follow these steps:
In your project settings in the Toolkit navigate to Data then select Diagram or List to view your Data Model.
In the From Entity box, select the entity from which you want to start the link. In the To Entity box, select the entity to which you want to link. The order of selection does not matter, as table links have no direction.
Finally, click on the Add table link button to create your table link.
Upon selecting a table link, a properties dialog will appear, providing you with a comprehensive set of options and settings to configure the behaviour and characteristics of the association. You can customise the table link properties according to your specific requirements.
From Entity
Identifies the source entity
Select an Entity from the list of Tables in the dropdown.
From Relationship
Identifies the type of relationship
Select one of: Many | 0..1 (Zero or One) | 1 (On
From Entity Navigation Name
Each originating Table Link must be identified with a name.
Label the Table Link
To Entity
Identifies the target entity
Select an Entity from the list of Tables in the dropdown.
To Relationship
Identifies the type of relationship
Select one of: Many | 0..1 (Zero or One) | 1 (One)
To Entity Navigation Name
Each target Table Link must be identified with a name.
Label the Table Link
Add Foreign Key Property
It is recommended that you include properties in the model that map to foreign keys in the database. With foreign key properties included, you can create or change a relationship by modifying the foreign key value on a dependent object. Using foreign keys is even more essential when working with disconnected entities. Note: that when working with 1-to-1 or 1-to-0..1 relationships, there is no separate foreign key column, the primary key property acts as the foreign key and is always included in the model. For more information: Go to Entity framework relationships @
Select the checkbox to set a foreign key
Entities are the building blocks of your data model, representing the objects or concepts that you want to structure and manipulate in your application. This guide provides a step-by-step approach to creating, configuring, and managing entities within your project, ensuring data integrity and efficient data handling.
In the ComUnity Developer Toolkit, you can create entities within your data model in two ways:
Entities – Define entities from scratch to model your application’s specific data structures. This also includes the option to create entities from an existing SQL table, allowing you to incorporate structured data directly into your model.
Virtual Entities – Define entities that enable your data model to interact with third-party APIs, allowing queries to these services within the Toolkit as part of the data model.
This guide covers:
Creating and managing custom Entities
Using Virtual Entities to integrate third-party services
Copying, modifying, and deleting entities efficiently
By following this guide, you will be able to define, configure, and manage both internal and external data models while maintaining a structured approach to data querying, integration, and API management.
The ComUnity Developer Toolkit follows the OData specification to enable structured data querying across the platform. Once an entity is created, it is automatically exposed via OData, allowing Pages to query and interact with entity data efficiently.
Entities define the core data structures in the ComUnity Developer Toolkit. They allow you to model data within your application by creating structured representations of objects or concepts.
This section covers the process of creating entities, including defining them from scratch and using the option to create entities from an existing SQL table.
To create a custom entity, follow these steps:
In your project settings in the Toolkit navigate to Data then select Diagram or List to view your Data Model.
In the Entity Name box, provide a descriptive name for your entity. Choose a name that represents the object or concept it represents in your application. Note that a valid entity name is unique and cannot contain special characters or spaces.
Finally, click on the Add an entity button to create your custom entity.
When you create a new entity in the ComUnity Developer Toolkit, it automatically inherits from a BaseEntity, which provides several default fields (attributes). These attributes include:
Created
: Represents the timestamp when the entity was initially created. This property is set to the exact date and time when the entity was added to the system and is immutable.
Modified
: Indicates the timestamp when the entity was last modified. This property is updated every time the entity undergoes any changes, reflecting the most recent date and time of modification. Like the Created
property, the Modified
property is also immutable.
Deleted
: Marks the entity as deleted, typically by setting a flag or status to indicate its removal from the system. Similar to the previous properties, the Deleted
property is immutable.
<EntityName>Id:
An integer (int) type property that serves as the unique identifier for all records created from the entity.
The method of viewing entities fields depends on whether they are represented in an entity diagram or as a list:
Diagram: For entities presented in an entity diagram, the entity fields are visually represented within the diagram itself. Each entity will have its attributes displayed directly in the diagram, providing a comprehensive overview of its structure and relationships.
List: If the entities are presented as a list, you can expand and view their attributes by clicking the (+) icon that precedes the entity name. This will expand the entity and display its attributes in a detailed view. Conversely, to hide the properties, you can click the (-) icon.
To add properties an entity, follow these steps:
Right-click on an existing property in the entity structure.
In the context menu, choose one of the following:
"Add a property above” – Inserts a new property above the selected one.
“Add a property below” – Inserts a new property below the selected one.
The Add Property modal appears.
In the Name field, provide a descriptive name for your field. Note that a valid field name is unique and cannot contain special characters or spaces.
Click “Add property” to insert the new property in the specified position.
Select the newly added property to activate it. Configure its settings in the Properties Editor, including:
Property Type
Select one from the list of 14 options.
Entity Key
Sets the primary key.
Select the checkbox if the field is the primary key.
Maximum Length
Defines the maximum number of characters this field can accommodate.
Enter the maximum number.
Column Name
Defines the name for this field.
Enter a name for this field as it will appear in the database.
Column Order
The order value is relative (rather than index-based) so any values can be used. For example, 100 and 200 would be acceptable in place of 1 and 2.
Database Generated
Select one of: Computed, Identity, None.
Minimum Length
Enter a minimum number of characters this field can accommodate
Enter the minimum number.
Indexed
You can create an index on one or more columns using the IndexAttribute. Adding the attribute to one or more properties will cause EF to create the corresponding index in the database when it creates the database..
Select the checkbox to activate the creation of an Index.
Field Type
Select the required field type from the dropdown list.
Title
You can enter a Title name to define a custom label for the field when it is added to a form in the UI.
Default Value
Enter a default value for this field when a new record is created.
Click Save to apply the changes.
Once added, the property will be available in the entity structure and can be referenced in queries or used in data models.
Integrate your existing data seamlessly into your data model using the ComUnity Developer Toolkit. By automatically generating entity fields from your existing tables, you save time and effort. Simply migrate your database to the ComUnity platform with the assistance of the ComUnity Team, and during entity creation, these existing tables will be readily available in your Data model. Simplify the process and ensure data consistency by leveraging this automation feature.
To create an entity from existing SQL Tables, follow these steps:
In the modal window, under Create from existing SQL Tables, you will find a greyed-out select field.
Click on Create from existing SQL Table to activate the select field.
Choose an option from the select field that corresponds to the existing SQL table you want to create an entity from.
In the Entity Name box, provide a descriptive name for your entity. Choose a name that represents the object or concept it represents in your application. Note that a valid entity name is unique and cannot contain special characters or spaces.
Finally, click Add an Entity to create the entity based on the selected SQL table.
By following these steps, you can effortlessly incorporate your existing SQL tables into your data model, leveraging the power of the ComUnity Developer Toolkit.
To view the entity properties in a Diagram view, simply click on the entity's header section with a grey background colour. An active entity can be identified by its blue border, and none of its entity fields will be active (active entity fields have a blue background colour). This action will open a properties dialog that displays the global properties specific to the entity.
Conversely, if you are in a List view, clicking on an entity will activate it, and an active entity will have a distinctive blue background colour. Clicking on the entity in this view will also open the properties dialog, allowing you to explore and modify the entity's global settings.
For a detailed description and explanation of each entity property, please refer to the table below.
Inherits from Entity
Entity Set Name
Edit Table Security
Custom Property Definitions
Unsupported in V4
Table Name
SQL table name
Temporal (History) Table
Choose whether to add or remove support for storing change history
Reset Custom Code
Check to replace custom code with default template
Custom Code
Logic that executes when intercepting change operations
List Title Template
Default template used for rendering titles of lists containing items of the entity set
List Detail Template
Default template used for rendering detail line of lists containing items of the entity set.
Sort Order
Default sort order when fetching entity set
Data Service Url
Max Age
The valid life time for data used in automatically refreshing lists.
In the ComUnity Developer Toolkit, we understand the importance of efficiency and productivity when it comes to creating entities in your data model. To help streamline the entity creation process, we provide a handy feature called Copy Entities. This function allows you to quickly duplicate existing entities, saving you time and effort by leveraging pre-existing configurations.
The Copy Entities function is designed to simplify the task of creating similar entities or replicating entities with similar properties, fields, or settings. Instead of starting from scratch and manually recreating each entity, you can utilise the Copy Entities function to duplicate an existing entity as a starting point. This not only accelerates the entity creation process but also ensures consistency and reduces the chance of errors or omissions.
To utilise the Copy Entities function in the ComUnity Developer Toolkit, follow these steps:
Right-click on the entity you want to copy. This action will open a context menu.
In the context menu, select "Copy this entity." This will trigger the opening of a modal titled Copy Entity.
In the Copy Entity modal, specify the name for the new entity by entering it in the New entity name box. Choose a unique and descriptive name for the copied entity.
Finally, click the OK button to initiate the copying process. The selected entity will be duplicated, and the newly created entity will be added to your data model.
By following these steps, you can efficiently create copies of entities within the ComUnity Developer Toolkit. This functionality allows you to speed up the entity creation process and streamline your data model management.
In the ComUnity Developer Toolkit, we understand the importance of efficiency and productivity when it comes to creating entities in your data model. To help streamline the entity creation process, we provide a handy feature called Copy Entities. This function allows you to quickly duplicate existing entities, saving you time and effort by leveraging pre-existing configurations.
The Copy Entities function is designed to simplify the task of creating similar entities or replicating entities with similar properties, fields, or settings. Instead of starting from scratch and manually recreating each entity, you can utilise the Copy Entities function to duplicate an existing entity as a starting point. This not only accelerates the entity creation process but also ensures consistency and reduces the chance of errors or omissions.
To utilise the Copy Entities function in the ComUnity Developer Toolkit, follow these steps:
Right-click on the entity you want to copy. This action will open a context menu.
In the context menu, select "Copy this entity." This will trigger the opening of a modal titled Copy Entity.
In the Copy Entity modal, specify the name for the new entity by entering it in the New entity name box. Choose a unique and descriptive name for the copied entity.
Finally, click the OK button to initiate the copying process. The selected entity will be duplicated, and the newly created entity will be added to your data model.
By following these steps, you can efficiently create copies of entities within the ComUnity Developer Toolkit. This functionality allows you to speed up the entity creation process and streamline your data model management.
To delete an entity, follow these steps:
Select the entity you want to delete by clicking on its header section with a grey background colour. An active entity can be identified by its blue border, and none of its entity fields will be active (active entity fields have a blue background colour). This action will open a properties dialog that displays the global properties specific to the entity.
Alternatively, if you are in a List view, simply click on the entity you wish to delete. An active entity will be distinguished by a distinctive blue background colour.
Once the entity is selected, you will notice a trash can icon located in the header section. Clicking on this icon will trigger a modal window titled Delete an Entity.
Finally, click the "Delete Entity" button to permanently remove the selected entity from your data model.
It's important to note that deleting an entity will also remove all associated fields and any data stored within them. Exercise caution when performing entity deletions and ensure that you have appropriate backups or data migration strategies in place.
To delete an entity field, follow these steps:
Select the entity field you wish to delete. If you are working in a Diagram view, click on the field directly. Alternatively, if you are viewing the entities in a List view, right-click on the entity field to reveal a context menu.
In the context menu, select the Delete this field option. This action will initiate a confirmation modal titled Delete Field Entity.
Review the details presented in the modal, ensuring that you have selected the correct field for deletion.
Finally, click the Delete Field button to permanently remove the selected entity field from your data model.
Please note that deleting an entity field will result in the loss of any data associated with that field. Therefore, exercise caution when deleting fields and ensure that you have appropriate data backup or migration strategies in place.
In the ComUnity Developer Toolkit, Virtual Entities provide a way to model external data sources within the data model, enabling seamless integration with third-party APIs.
Unlike regular Entities, which define data structures that map to SQL tables, Virtual Entities are not linked to a database. Instead, they act as an abstraction layer, allowing data from external APIs to be retrieved and processed dynamically while still supporting OData-based queries.
Virtual Entities allow applications to interact with API-driven data just like regular entities, making it easier to integrate third-party services while maintaining a consistent query experience within the Toolkit.
Virtual Entities allow applications to model and interact with external APIs as structured entities, ensuring:
Consistent Data Interaction – API data is accessed through OData-based queries, just like internal data models.
No Database Mapping Required – Since Virtual Entities retrieve data dynamically, they do not map to an SQL table.
Seamless Integration with External APIs – API responses are handled like structured entity data within the Toolkit.
Unified Querying Mechanism – Developers can interact with API-driven data using the same syntax and tools as regular entities.
To create a virtual entity follow these steps:
Open your project settings and navigate to the Data section.
In the modal window, provide a unique name for your virtual entity in the designated Name box.
Finally, click OK to create the virtual entity.
After creating a virtual entity, it will be visible in the Data section, either in the Diagram or List view. In the Diagram view, you can see the newly created virtual entity displayed with a single field, which is typically the entity ID.
When you need to add additional fields to a virtual entity, the process is similar to adding fields to a regular entity. However, it's important to declare these fields within the entity class definition located in the Custom Classes section of your project.
Furthermore, when you select a virtual entity in the Diagram/List view, it will be visually highlighted with a blue border to indicate its active status. On the right-hand side of the Toolkit, the Properties Editor will appear. This editor provides convenient access to various properties of the virtual entity, including its name, entity class, and controller class.
By utilising the text editor and modifying the controller class in the Data settings, you can conveniently make changes to your virtual entity, including adding fields and adjusting the behaviour of the controller, streamlining the customisation process.
After creating a Virtual Entity, it must be registered in WebApiConfig to be accessible via OData. This ensures that OData requests are correctly routed and that external services can be queried through the Web API.
To do this, navigate to Custom Classes > WebApiConfig, locate the CustomRegister method, and add an entry for the newly created Virtual Entity. Once modified, rebuild the project to apply the changes.
The WebApiConfig class ensures that:
Virtual Entities are registered as part of the OData model.
OData requests are properly routed to Virtual Entities.
External services can be accessed and queried through the Web API.
By default, WebApiConfig includes only system-generated entities:
To expose a newly created Virtual Entity (e.g., Custom.Order), update WebApiConfig as follows:
After making these changes, rebuild the project to apply the modifications.
Key Considerations When Modifying WebApiConfig
Explicit registration is required for each Virtual Entity.
Ensure correct namespaces when adding entities (Custom.Todo).
Rebuild the project after modifying WebApiConfig.
Verify OData routes to confirm Virtual Entities are correctly exposed.
Regardless of the chosen representation, the ComUnity Developer Toolkit seamlessly translates the configuration from either a Diagram or a List into a Visual Studio project using the approach. This ensures a smooth transition from either an ERD or a List to the creation of the corresponding database structure, providing developers with a convenient and efficient data modelling experience.
Open Project Settings: After opening your project in the Toolkit, click the cog icon labelled Project Settings (displayed with a tooltip reading “Project settings”). For additional details on accessing Project Settings, refer to the section.
Locate the icon, this icon allows you to add a new Table Link.
Click icon, and an Add a new table link modal window will appear on your screen.
Once you have created your table link, it will appear as a line connecting the entities in a Diagram view. In the expanded view of an entity, the table link will be displayed as a field with a icon. When you click on a table link, it will be selected and indicated by turning blue in the Diagram view or having a blue background in the List view, as shown in the images below. This visual indication helps you identify and interact with the table link easily.
For a detailed description and explanation of each table link property, please refer to the below.
For more information: Go to Entity framework relationships @
For more information: Go to Entity framework relationships @
Configuring WebApiConfig to expose Virtual Entities via
📖 Learn More: in the ComUnity Developer Toolkit
For further details on how is utilised within the Toolkit, refer to .
Locate the icon on the Diagram or List (shown below) view. This icon allows you to add a new entity to your data model.
Click icon, and an Add a new entity modal window will appear on your screen.
For more details, see .
Select the type of data to be stored in this field. See .
To use composite keys the Entity Framework (EF) requires you to define an order for the key properties. You can do this by using the Column annotation to specify an order. If you have entities with composite foreign keys, then you must specify the same column ordering that you used for the corresponding primary key properties. For more information: Go to Entity framework annotations URL
An important database features is the ability to have computed properties. If you're mapping your Code First classes to tables that contain computed columns, you don't want Entity Framework to try to update those columns. But you do want the EF to return those values from the database after you've inserted or updated data. For more information: Go to Entity framework DatabaseGenerated URL
Select the behaviour type for this field. See .
Follow the steps outlined in to access the Add a new entity modal window.
View
The name of the EntitySet in URLs. By default the Entity Set and SQL table name are the same.
View
Override the default URL for the EntitySet endpoint with a custom Web API URL handling reading, inserting, updating and deleting records.
Locate the icon, this icon allows you to add a new virtual entity to your data model.
Click the icon, an Add a virtual entity modal window will appear on your screen.
By default, the checkboxes for Add entity class, Add controller class, and Add controller sample code will be selected. These options generate boilerplate code for the entity and controller classes that are associated with your virtual entity. This code is placed in your project's . If you wish to include the generated code, you can leave these checkboxes selected. This will automatically generate the code for you. However, if you prefer to define your own custom entity and controller classes, you can unselect these checkboxes. This allows you to create and specify your own custom classes in the section of your project, tailored to your specific requirements.
To modify the entity and controller classes, you can expand the text editor by clicking on the icon. This action allows you to access and edit the underlying codebase of your virtual entity. Utilising this feature, you can declare additional fields within your virtual class. Additionally, you can modify the controller class directly in the Data settings, eliminating the need to navigate to the Custom Classes section.
Inheritance is a powerful feature supported by the ComUnity Developer Toolkit, allowing you to establish hierarchical relationships between entities. By default, every entity created in the Toolkit inherits from the BaseEntity, which serves as the base entity for all others. Each entity possesses a property called Inherits from Entity, which designates its parent entity. By customising the value of this property, developers can seamlessly implement inheritance and define the entity hierarchy according to their specific needs. In this comprehensive guide, we will explore how to configure entity inheritance, enabling you to leverage this essential feature for efficient data modelling and application development.
To implement inheritance in the ComUnity Developer Toolkit and establish hierarchical relationships between entities, follow these steps:
Select the entity for which you want to configure permissions. In a Diagram view, click on the entity's header section with a grey background colour. An active entity is identified by a blue border, and none of its entity fields are active (active entity fields have a blue background colour). This action will open a properties dialog that displays the entity's global properties.
Within the properties dialog, locate and click on the Inherits from Entity select dropdown by default this value is BaseEntity.
Select the desired parent entity from the dropdown.
Finally, click the Save button to persist your changes.
By following these steps, you can effectively implement inheritance in your data model and define the entity hierarchy within the ComUnity Developer Toolkit.
Introducing screens and providing instructions for effective screen management
Screens are a fundamental feature within the ComUnity Toolkit, enabling developers to design and manage navigation and content structure efficiently. This feature uses a hierarchical structure, offering an intuitive approach to organising, navigating, and presenting information to users.
In this hierarchy, the top-level screens act as the primary elements that define your application’s main menu. These screens form the foundation of your app’s navigation. In the Screen View, you can expand these top-level screens if they contain nested child screens. When the project is built during development, the underlying Toolkit processes will render a web app where these top-level screens appear in a sidebar as part of the main menu. Depending on the environment (such as production or QA), the same application can be built for mobile or desktop platforms, with the navigation structure adapted accordingly. The visibility and accessibility of these screens in the menu depend on the Role-Based Access (RBA) configurations set for different user roles. This ensures that users only see the screens they have permission to access, based on their role within the application.
The ComUnity Toolkit utilises a recursive hierarchical structure, where each screen is represented as a node within the hierarchy. The root node represents the top-level screen, and it can have child nodes, which are either Lists or Pages. These nodes form the building blocks of your app’s navigation and content structure:
• List: A List serves as a container node that can hold Pages, other Lists, and relevant Screen Controls. It is versatile and can be used to implement complex navigation structures. Lists can also present data in various formats, such as grids and tabs, and link to sub-screens, providing flexibility in how information is displayed.
• Page: Pages are also container nodes that can include child nodes like other Pages or Lists. They are essential for implementing CRUD operations, form handling, and dynamic lists. Pages form the interactive components of your application, allowing users to engage with the app’s functionality.
When you select a node within your screen hierarchy, the associated Screen Controls and relevant properties become visible and accessible. This feature enables you to manage and customise the selected item’s behaviour, appearance, and functionality according to your specific requirements.
In addition to the hierarchical structure, there are two types of screens that fall outside the hierarchy:
1. System Screens: These screens are predefined within the system and serve specific, often administrative or functional roles. Commonly used to manage authentication within the solution, these screens are critical and should not be deleted. They are not part of the hierarchical structure but are essential for managing the core functionality of the application.
2. Additional Screens: These screens are custom screens that do not conform to the hierarchical structure of the app. They can either be built by users or shipped as part of a starter sample. Additional Screens are typically Form Pages that handle tasks like data entry or processing user input. These screens can only be linked to Form Pages and act as leaf nodes in the hierarchy, terminating a branch since they do not support child nodes. However, developers can link one Form Page to another using Additional Screens, ensuring the flow between Form Pages without disrupting the main hierarchy.
When building your application's navigation in the ComUnity Toolkit, it’s essential to approach it as a hierarchical structure. This approach enables effective organisation and structuring of your navigation system.
Top-Level Screens as the Main Menu: The top-level screens form the main menu of your application, serving as the primary interface for users to access different sections or functionalities. Designing a clear and logically organised main menu is key to providing an intuitive user navigation experience.
Creating Parent and Child Screens: The ComUnity Toolkit allows you to create parent and child screens, establishing a hierarchical relationship between them. By leveraging these relationships and the drag-and-drop functionality, you can create a well-organised and intuitive navigation system for your users.
Building a well-organised and user-friendly navigation system is fundamental to delivering an exceptional user experience in your application. One crucial aspect of navigation design is creating top-level pages that serve as primary entry points to different sections or functionalities. In this section, we will guide you through the process of creating a top-level page in your application using the ComUnity Toolkit.
To create a top-level page, follow these steps:
Open your project in the ComUnity Toolkit and select the Screens tab on the sidebar.
In the Screen View under the Screens tab, click on the Screen you wish to set as a top-level page.
Next, click on the ellipsis icon next to the selected Screen.
In the modal window, click the Add screen above tab to insert a new navigation directly above the active page. Alternatively, click the Add screen below tab to insert a new navigation directly below the active screen.
An Add a new screen modal window (see screenshot below) will appear. In the Title box, enter a unique title for the screen.
Click Add a screen to create the new Screen with the specified title and type.
Congratulations on successfully creating your new top-level screen and establishing it as a fundamental component of your project's navigation!
In the ComUnity Toolkit, screens are linked by either adding sub-screens to existing pages or pointing to pages outside the hierarchy. This creates the navigation paths users follow to move between screens in the app.
Using screen controls, you can configure links to both hierarchical and non-hierarchical pages, enabling structured and efficient navigation.
Key Points to Consider:
The central focus when utilising Data Entry Screens within the ComUnity Toolkit is to significantly expedite the process of generating multiple screens, eliminating the need for individual construction. This feature introduces a time-saving mechanism by automating the creation of screens that showcase data linked to specific entities. These screens also incorporate dedicated screens for the inclusion and modification of records.
The Data Entry Screens encompass three distinct screens, each serving a pivotal role within the data management workflow:
Top-Level Screen (View Records in List View): The Top-Level Screen provides a comprehensive list view of records, enabling users to navigate through the records effortlessly. Each list item functions as a clickable link, directing users to detailed information about individual records. Additionally, this screen offers a link to conveniently access the Add Record Screen.
Edit Record Screen: Users can seamlessly transition to the Edit Record Screen by selecting a specific record from the list view. This specialised interface facilitates precise modification and updating of selected record data. The detailed form within this interface mirrors the attributes of the record, equipping users with interactive elements such as input fields, dropdown menus, and checkboxes. These elements enable thorough editing based on specific requirements.
Add Record Screen: Accessible exclusively from the Top-Level Screen, the Add Record Screen provides an intuitive form for creating new records. This user-friendly form guides users through the process of inputting necessary data for the creation of new records.
The ComUnity Toolkit seamlessly integrates Data Entry Screens with a straightforward click, while allowing room for further customisation. Developers possess the ability to align these screens precisely with the unique requirements of their applications. This level of customisation empowers developers to seamlessly integrate and refine Data Entry Screens, fostering a unified and responsive application interface.
The utilisation of Data Entry Screens is not only a means of accelerating development, but also a pathway to optimising the user experience and functionality of the application.
To create Data Entry Screens, follow these steps:
Open your project in the ComUnity Toolkit, select the Screens tab on the sidebar.
In the Screen View, you will find a list of all Screens available in your application navigation.
In the Screen View under the Screens tab, click to select the target Screen where you intend to position the top-level screen for your Data Entry Screens – this can be either above or below the selected Screen.
Next, click on the ellipsis icon next to the selected Screen.
Select one of the following relevant options: Add data entry screens above or Add data entry screens below. This will prompt the Add data entry screens modal to appear (screenshot below).
Inside the Add data entry screens modal, you'll find an Entity dropdown. Carefully select the desired entity for which you wish to establish Data Entry Screens.
Finally, click the Add Screens button. This action will seamlessly integrate your Data Entry Screens for the chosen entity.
The navigation of your application is organised as a hierarchical tree structure of pages. To navigate through the tree and explore the different levels of your navigation system, follow these steps:
Expand a Screen: If a Screen has children, you will see a (+) icon next to it. Click the (+) icon to expand the navigation, revealing its child screens and sub-levels.
Collapse a Screen: To simplify the view and collapse a Screen and its child screens, click the (-) icon next to the expanded navigation.
By utilising these expand and collapse icons, you can easily navigate through the hierarchical structure of your application's navigation, allowing for a clear understanding of the relationships and organisation of the different navigation nodes.
In the ComUnity Toolkit, the Delete a Page feature provides a straightforward method to efficiently remove unnecessary or outdated pages from your application. This powerful tool streamlines the page management process, allowing you to maintain a clean and organised project.
To delete a Screen and its children, follow these steps:
Open your project in the ComUnity Toolkit and select the Screens tab on the sidebar.
In the Screen View under the Screens tab, locate and click on the Screen you wish to delete.
Click on the ellipsis icon next to the selected Screen.
A modal will appear, providing an option to delete a screen and its children (screenshot shown below):
Within the modal window, click Delete screen and children. This action will trigger a "Delete screen" modal (screenshot shown below):
Finally, click the Delete button in the modal to confirm the deletion of the child screen and its descendants.
This straightforward process allows you to efficiently remove both the child screen and any associated sub-screens, ensuring your application's hierarchy remains well-organised.
The objective of this section is to introduce users to the integrated navigation and UI builder in the ComUnity Developer Toolkit.
The Screen View in the ComUnity Developer Toolkit is an integral part of the platform that allows developers to build screens for their applications. The Toolkit enforces a hierarchical structure for organising these screens, ensuring that the application's navigation is clear and logically structured. This hierarchical approach simplifies the management and organisation of screens, making it easier to maintain a coherent navigation flow as the application grows.
In the Screen View, you can expand each top-level screen to view its child screens, providing a comprehensive overview of your application's navigation structure. This representation helps you efficiently manage and organise the screens for your application.
To access the Screen View for your application's navigation and screens, open your project in the Toolkit and select the Screens tab in the sidebar.
Here is a breakdown of the components of the Screen View:
Screen Structure: The Screen Structure is a powerful component that allows you to easily create and manage the layout and organisation of your application screens. It provides a flexible hierarchical tree design that makes it easy to create multi-level screen arrangements. Whether you're creating a simple single-screen layout or a complex nested hierarchy, the Screen Structure can help you to ensure a smooth and intuitive user experience.
Show system screens: These Screens are an integral part of all projects by default. While these screens, such as Login, Registration, Reset Password, and OTP screens, should not be deleted, they can be customised to align with specific project requirements. You can easily manage the visibility of these system screens by toggling the Show system screens button.
With the Screen View’s powerful features and intuitive interface, you can efficiently create and manage your application’s screens, ensuring a smooth and engaging user experience.
Here are two methods for integrating form pages into your project:
1. Incorporating Forms as Top-level screens: One method involves placing a Form page directly within your project's navigation hierarchy. During screen configuration, you can achieve this by specifying the page type as Form
. Additionally, you can make use of the Copy Form functionality. This approach provides swift access to a form page tailored to your needs.
Both approaches offer you versatility and simplicity in integrating form pages into your project. When you create a Form page its relevant Screen Controls and Screen Properties are shown in the Screen Controls and Properties panels within the Screen View, respectively:
This property allows you to specify the title of your navigation page.
This property allows you to specify the user role that has access to the navigation page.
For menu item links the Icon field is required otherwise broken icon images will be rendered before your menu items.
The screenshot below shows two menu items displayed as part of the Main Menu on a web application built using the ComUnity Development Toolkit. During navigation configuration the Icon for the Admin link was not selected during development, so it is displayed as a broken image before the link name, whereas for the Notifications menu item, a bell icon was selected.
This property allows you to specify a selected icon for your IOS applications.
By default a form page is empty on creation, the Page property allows you to select and copy the content and functionality of an existing form page from a list of all form the pages which exist in your application.
This property allows you to select an entity by name from a list of entities which exist in the Data Model. This value can usually be determined by the system from the Target URL, however when the Target URL is not set then this value may be required in order to set the correct data entity that must be used for the form.
The Target URL allows you to specify the OData resource path for the form and must be a collection for an insert and a single record for an update or delete operation.
A Form page will open in “edit” mode for a new record and “read” mode for and existing record. The Edit Mode will open existing records in “edit” mode when this value is selected.
Supported components:
Examples:
You could use dynamic list rendering to show a list of products from the Data Service, filtered by category.
You could use dynamic list rendering to show a list of blog posts from the Data Service, sorted by date.
You could use dynamic list rendering to show a list of users from the Data Service, grouped by country.
To implement dynamic list rendering in Navigation screens, the following properties are essential:
When using dynamic list rendering, it is important to make sure that the response payload from the Data Path is a collection. If an individual entity is returned, the application will break.
This property is used to define a dynamic title of the list item. The Item Title is an optional property, if you do not define it by default the system will use the List Title Template.
This property is used to define a dynamic list item details. The Item Detail is an optional property, if you do not define it by default the system will use the List Detail Template.
This property is used to specify content that is placed in the top right corner of the list box. Suitable properties include Created and a derived property called CreatedTimeAgo which is available by default in all entities.
This Max Items property is used to specify limit of the records to display on the clients.
To improve performance the system supports caching for all read operations. The Stale After property allows you to specify the number of seconds the cached data is persisted in cache memory in the current session.
This property allows you to specify entity properties to be used for filtering the dynamic list. It accepts a comma delimited string of entity properties:
Property1,Property2,Navigation_Property
Do not add spaces in your Search Fields values, valid properties are only comma delimited.
Navigation properties or entity associations are valid values of the Search Fields list property. They allow application users to filter your dynamic list by navigation property or association type. Navigation properties or entity associations are valid values of the Search Fields list property. They allow application users to filter your dynamic list by navigation property or association type. The Diagram A below show a screenshot of a typical Search Field as it is displayed in the web client during development, when a user clicks the Navigation Property Dropdown Icon, Navigation Properties appear as shown in Diagram B, application users are able to filter dynamic list by selecting a specific navigation property type from a dropdown of navigation property types. Diagram A
Diagram B
Icon property will show an Icon to the left of the Title / Description.
This property is used to define a dynamic list image. Image URL will show an image to the left of the Title / Description.
When you Create a Navigation Link from a dynamic list to a destination page(navigation or form page), the destination page not reachable unless you specify a Target URL.
The Target URL property allows you to specify a dynamic LINK from each individual list item in the current navigation page to the destination page. The query parameter in the LINK definition is typically an ID of an individual entity.
The keyword LINK
is required.
FaultAddPage
is a system generated identifier of your destination page(typically this is a form page), that is listed in the Properties Editor when a page is active. The screenshot below an example of a form page identifier labelled A:
faultType
is query parameter.
The Single Item - List Item is a core component of the ComUnity Toolkit, designed to render individual list items within your application’s user interface. It provides flexibility in how data is displayed by allowing properties such as the title, icon, and page to be either dynamically retrieved from a data source or configured with static values.
The Single Item can be dynamically configured by defining its Data Path. This means that properties like the title, detail, and other attributes can be populated from the Data Service, ensuring real-time, context-specific information is displayed. Alternatively, these properties can be statically set for fixed content, depending on the requirements of your application.
A key feature of the Single Item is its ability to create direct, functional links between form screens by configuring the Page property, which specifies a relative path to the destination screen.
The title of the list item.
The name of the icon to be displayed.
The detail of the list item.
The aside content that must be displayed in the list item
This property is no longer supported.
This property is no longer supported.
The name of the icon to be displayed. If set, this will be used instead of the icon value.
The page to navigate to when selecting a list item, should be in the following format:
./<page_name>
Sets the Data Path for the Form. The value specified will be appended to the page name and page Data Path to form the Target URL for the list item. The value can contain templates.
To create a functional link between a Form Page and an Additional Screen within your project, follow these steps:
1. Add a List Component to Your Form page: Begin by incorporating a List component within the Form page where you wish to create the navigation link.
2. Integrate a Static Item screen control: Within the List, introduce a Static Item screen control. This element will serve as the link between the existing Screen and the Form page.
3. Access the Static Item Properties: Click on the Static Item screen control to select it. As you do so, the associated Properties will be revealed for configuration.
4. Define the Page path:
In the displayed Properties, locate the Page property. Here, you can specify a relative path that corresponds to the Additional Screen you intend to navigate to. For instance, entering ./UserProfile
in the Page property would facilitate user movement from the current screen to the UserProfile screen.
This approach is used to add sub-screens to the navigation hierarchy, enabling clear and manageable navigation flows within your application.
Key Distinctions:
• Static Lists: These are used to create fixed sets of links or items without requiring data from the Data service, making them useful for simpler navigation scenarios.
Select a List: Start by selecting a List within the Navigation page. This can be either dynamic (data-driven) or static (predefined).
Access List Screen Controls: What you see depends on the type of List selected:
Dynamic List: Screen controls appear under the title List Navigation, displaying the following options:
Navigation page: Adds a new Navigation page to the hierarchy.
Form: Adds a new Form page to the hierarchy.
Static List: Controls appear under the title List Items, displaying:
Nav Page Item: Adds a new Navigation page to the hierarchy.
Form Item: Adds a new Form page to the hierarchy.
Add the Screen Control: Drop the selected screen control (either Navigation page or Form) into the List to nest a new sub-screen. This action will create a new sub-screen linked to the navigation hierarchy.
Save Changes: After adding the control and customising any necessary properties (such as titles, layout type, page content or TargetURLs), save the changes to update the navigation structure.
Additional Tips:
If you plan to add multiple links as items to your static list, consider configuring the Layout Type property of your list for better organisation and usability.
Once a sub-screen has been added, the next step is to configure the screen properties of the destination page according to its type. For more information, refer to the documentation on Navigation and Form pages
In the ComUnity Developer Toolkit, managing user-based permissions and access control is made possible through a powerful feature called Table Security. This feature provides a comprehensive interface that allows you to define and configure role-based permissions for your entities.
With Table Security, you have full control over granting or restricting access to specific operations, such as reading, updating, or deleting data, based on different roles within your project. The interface presents a list of available roles, providing you with the flexibility to enable or disable permissions for each role as needed.
To configure role-based permissions for your entities using Table Security, follow these steps:
Select the entity for which you want to configure permissions. In a Diagram view, click on the entity's header section with a grey background colour. An active entity is identified by a blue border, and none of its entity fields are active (active entity fields have a blue background colour). This action will open a properties dialog that displays the entity's global properties.
Within the properties dialog, locate and click on the Edit Table Security option.
A modal window titled Table Security for <<EntityName>> will appear, presenting you with an interface to configure role-based permissions.
In the interface, you will find a list of roles defined in your project, along with the supported permissions.
Use the toggle functionality provided to enable or disable specific permissions for each role. For instance, you can allow the "Read" permission for one role while disabling it for another.
Repeat this process for other permissions, such as "Update," "Delete," and any other permissions you need to configure.
Finally, click the Save button to persist your changes.
By following these steps and utilising the intuitive Table Security interface, you can easily configure role-based permissions for your entities. This allows you to control and manage access to your data based on the specific roles defined in your project. Enhance the security and privacy of your application by granting or restricting permissions to authorised users or roles as required.
To use a List in a Navigation page, you first need to select it in the Screen Structure. This will display the List's supported screen controls and its properties. You can then configure the properties to enable dynamic list rendering or create sub-screens.
In this comprehensive guide, we will explore advanced techniques for customising your data model within the ComUnity Developer Toolkit. Discover how to fine-tune entity configurations, establish complex relationships, apply data annotations, and implement customisations to meet the unique requirements of your application. Gain in-depth knowledge and practical insights on leveraging the full potential of the Toolkit to tailor your data model with precision and flexibility.
To get started, select a topic from the list below:
Each topic will provide detailed guidance and practical examples to help you harness the full potential of the ComUnity Developer Toolkit and tailor your data model with precision and flexibility.
Screen Controls offer a diverse range of UI elements used to build your application's screens. These controls encompass buttons, input fields, drop-down menus, lists, images, multimedia, and more, providing an extensive array of options to create engaging and dynamic user interfaces.
The ComUnity Development Toolkit allows seamless customisation of the behaviour and appearance of these controls, enabling developers to match them precisely to the unique requirements of their applications. When you add a screen control to a screen and correctly configure and save its properties, the Toolkit's underlying engine parses your screen control definition and renders it as a specific user interface (UI) component on the client side.
Supported UI components include lists, images, forms, text, and other interactive elements, allowing for a versatile and tailor-made user experience.
By leveraging the capabilities of Screen Controls, developers can create interactive and user-friendly interfaces that elevate the usability and appeal of their applications. This level of flexibility and functionality empowers development teams to deliver exceptional user experiences and align their applications with specific design objectives.
To integrate Screen Controls, follow these simple steps:
Select the Screen or relevant Screen Control: Begin by choosing the Screen where you intend to add the Screen Control, or select an existing Screen Control that will host the new addition. This selection serves as the foundation for the placement.
Choose the Screen Control: Access the Screen Control panel and select the desired Screen Control for your project. Depending on your choice, this can be a direct addition or an embedded Screen Control within another.
Drag and Drop Placement: With your Screen Control selected, use the drag and drop functionality. Hover the control over the chosen area on the screen. As you do so, visual cues like dashed green lines will help identify suitable positions.
Visual Confirmation: When you hover over a valid placement, a green solid line will appear, indicating that the Screen Control can be dropped in that spot. If satisfied with the placement, release the control to add it to your screen.
Customise and Position: Once added, the Screen Control will find its place within your page or within the designated Screen Control. You can easily reposition it as needed for optimal layout. Additionally, take advantage of customisation options to tailor the appearance and behaviour to your requirements.
After successfully adding the Screen Controls, the screen will load, allowing you to visualise the integration within the layout. To further refine the behaviour and appearance of these added controls, you can delve into their properties configuration.
To configure the properties of a Screen Control, simply follow these steps:
Select the Control: After the screen loads, you can click on the specific Screen Control that you wish to configure. This selection triggers the display of its properties.
Access the Properties Panel: Once the control is selected, its relevant properties will appear within the Properties panel. This panel is designed to provide you with a comprehensive overview of the available settings.
Configuration Process: Proceed to configure the properties according to your project's requirements. You can fine-tune various aspects, such as appearance, behaviour, and interaction functionalities.
By customising these properties, you ensure that each Screen Control aligns precisely with your desired user experience. To apply these customisations, you should click Save button positioned at the bottom of the Properties Panel. The Properties panel offers a user-friendly interface to facilitate this customisation, allowing you to create a tailored and cohesive interface for your project.
When the need arises to remove a Screen Control from your layout, the process is straightforward and seamless.
Follow these steps to achieve the removal:
Select the Control Begin by selecting the Screen Control that you wish to remove from your layout. Click on it to prepare for the removal action.
Drag to Remove Once the control is selected, initiate the removal process by dragging it towards the Screen Controls panel. As you do so, keep an eye out for the appearance of a trash can icon within the Screen Controls panel itself.
Delete with a Drop As you approach the Screen Controls panel with the control, the trash can icon becomes prominent, signifying the deletion capability. Once the control is positioned above the trash can icon, you can confidently release the control to drop it. This action will prompt the immediate removal of the selected Screen Control.
By following these steps, you can efficiently remove unwanted Screen Controls from your layout, ensuring that your interface remains precisely tailored to your project's evolving needs.
Standard screen controls are those that are available in both navigation and form pages. They are the most basic and commonly used screen controls, and include the following:
In this section, we will discuss these standard screen controls in detail. We will cover their properties, how to use them, how they can be customised to match the specific needs of your application. and some best practices for using them effectively.
Incorporating images into your screen design is a key aspect of creating visually engaging interfaces. When adding an image to a screen, you initially place a system-generated placeholder image, as depicted below. However, through the configuration of your image digest, this placeholder can be effortlessly replaced with your desired image.
Name This property displays the system-generated name of the image.
Image Digest Allows you to seamlessly drop or upload an image from your local computer or preferred source.
Digest Preview Offers a convenient preview feature, allowing you to visualise the added image before finalising its placement.
By leveraging these properties, you can effortlessly introduce and customise images within your screen, enhancing the visual appeal and engagement of your user interface.
Markdown can be used to add text content to screens.
Name This property displays the system-generated name of the paragraph.
Content This feature presents a text editor designed specifically for adding content using Markdown formatting. A subset of Markdown it supported when adding text content to screens. The table below gives an overview of the supported elements:
Creating Additional Screens: Additional Screens in the ComUnity Toolkit provide a way to extend your application's functionality without adhering to the hierarchical structure of parent and child screens. These screens are exclusivelypages and can be linked directly to other screens via a relative path. By creating Additional Screens, you can handle specific tasks or input forms that are not part of the main navigation hierarchy but are crucial for specific user interactions. This method allows for greater flexibility in integrating essential forms into your app's workflow, ensuring that user interactions are seamless and efficient. For detailed instructions, refer to the dedicated section on .
A modal will appear, providing options for configuring the Screen as a top-level page (screenshot shown below).
Select a type from the options available. The supported Screen types in the ComUnity Toolkit are and pages.
To further enhance your Screens and tailor them to your project's specific needs, we encourage you to explore the detailed content available on and pages. These resources offer valuable insights, technical guidance, and best practices for building screens based on their respective types.
Page Links provide a mechanism that allows users to navigate from Navigation pages to Form pages within the your project. A Page Link should be configured to point to a new or existing Form page for it to work. Properties such as Layout Type, Icon, Role Name, and Target URL can be adjusted to define how the linked page is displayed and accessed.
Lists for Adding Sub-Screens: Lists can add sub-screens to both Navigation pages and Form pages, whether dynamic or static. This allows additional screens to be linked within the app, improving navigation. Refer to the sections on and .
A modal will appear, providing options for configuring the Screen as a top-level page (screenshot shown below).
In conclusion, upon the successful generating of your Data Entry Screens, a top-level screen named in accordance with the specified entity will seamlessly integrate into the designated position, accompanied by the remaining screens nested within. This strategic arrangement allows for effortless access and management. Moving forward, feel free to tailor these screens to align precisely with your preferences, following the familiar process of customising standard screens view and , for more details.
The Copy form page function serves as a convenient utility, enabling the swift generation of Form pages by duplicating existing ones. This feature proves particularly valuable when expediting the process of crafting form-based interfaces. By leveraging this functionality, developers can efficiently replicate the structure and design of pre-existing pages, expediting the creation of new form pages with consistent styling and elements.
Screens: The Screens component of the Screen View empowers users to build and visualise their application screens using a flexible hierarchical tree structure. Additionally, the integrated navigation functionality allows you to traverse the entire hierarchy of screens, ensuring a clear overview of the app's structure and layout. For an in-depth exploration of the Screens component, refer to the section on .
Screen Controls: Discover a range of screen control widgets that are dynamically displayed to provide relevant functionality. For more details, refer to the
Additional Screens: These refer to Screens that exist outside the primary navigational hierarchy. However, they can still be integrated into pages as inside as . To learn more about how to employ a Single Item to establish a functional link between a Form page and an existing screen, refer to the section on .
A Form page is primarily used to embed forms, but it can also display static screen components (such as images, text content, ) and . In some configuration settings, a form page may simply be referred to as a "Page". The forms embedded within form pages are essential for implementing Create, Read, Update, and Delete (CRUD) operations.
2. Adding Forms as Sub-Screens: Alternatively, as you set up , and , the system takes the initiative to generate the required form page. This automated process ensures the creation of a corresponding blank Form page. Furthermore, you can generate new Form page by embedding Form Item within Lists in your Navigation pages, refer to to explore this method.
This property allows you to select an icon which is used to prefix the.
The and the serve the same purpose, to avoid redundancy you define one or the other but not both in the same configuration.
Once you have set the properties of your Form Page, you can start building your page content using screen controls. You can find a comprehensive guide on how to do this in the . In the next section, we will discuss how to implement features specific to the Form Page, which can all be done using screen controls strategically.
Dynamic list rendering in a Navigation page enables you to show lists of data that are fetched from the Data Service dynamically with , view for implementation details. is a valuable tool for creating complex and dynamic queries and can also be used to pass data to child pages, such as the unique identifier of a list item, by templating the property. Dynamic Lists can be displayed in a variety of layouts, such as pies, tables, and grids.
This property is used to to define the resource path of an .
This property is used to to define the query options of an .
The ComUnity Development Toolkit appends the Data Path and Query values to the system defined service root path under the hood to form a complete .
Caching is only supported for without the query options parameter.
is used to reference the dynamic value of the query parameter as shown in the last segment of the Target URL: {{=FaultTypeId}}
.
In this section, we will explore the key properties of a Single Item, focusing on its dynamic configuration using the Data Path, and provide a step-by-step guide on implementing it within a page to establish functional links.
Lists in Navigation pages allow developers to organise and structure sub-screens. This functionality supports both dynamic Lists (configured to pull data from the ) and static Lists (used for displaying predefined sets of links or screens).
• Dynamic Lists: These are configured to fetch data from the Data Service, enabling dynamic content to populate sub-screens - to configure a List to make it dynamic define its Data Path property for further details view .
Lists are a versatile tool that can be used in Navigation pages to implement both and . Dynamic list rendering retrieves data from the Data service to generate a list of items, while sub-screens enable users to navigate between different screens in the application.
Whenever you you make a change to the Data Service you must so as to ensure that your changes persist, otherwise you risk losing all your work.
Supported Screen Controls vary depending on the type of screen ( or pages) as well as the active screen control. When you select a screen, its supported controls will appear in the Screen Structure. Additionally, as you build the active screen, adding a Screen Control to the screen view and making it active will reveal its relevant controls, allowing you to embed additional Screen Controls where applicable. This dynamic system enables you to create complex and interactive user interfaces by nesting controls within one another. For a comprehensive discussion of the supported controls for each screen type and their specific behaviours, please refer to the relevant sections dedicated to and pages.
The process of adding Screen Controls into your project involves adding them to selected Screens or even to other selected Screen Controls. Some Screen Controls even allow you to embed additional Screen Controls within them, as is the case with .
: This control allows you to display an image on a screen.
: This control allows you to display text on a screen.
: This control allows you to display a list of items on a screen and to creating more complex screen layouts and interactions.
Lists can play a variety of roles in an application's architecture, depending on their position in the hierarchy and how they are configured. They can be used to display data, navigate between pages, or even create complex layouts. To fully understand the function Lists, refer to the section. For practical implementations and detailed insights, explore the following sections:
The Properties and Screen controls of a List depend on the screen type of the page in which it is contained, for more details view or sections.
Heading Level 1
#
Heading Level 2
##
Heading Level 3
###
Heading Level 4
####
Heading Level 5
#####
Heading Level 6
######
Paragraph
Blank line to separate one or more lines of text.
Line Breaks
End a line with two or more spaces plus newline
Bold
Italic
Bullet List
Link
Image
The Action URL is an optional property that enables navigation to a different Form screen. However, it is not mandatory; developers may choose to omit the Action URL if the static list item is intended to display information or perform a non-interactive function.
Static List Items are ideal for displaying fixed options or actions that remain consistent and do not require dynamic data, making them well-suited for use cases such as linking to predefined screens or providing consistent navigation options.
The navigate path to be used when the list item is selected.The Action URL is an optional property of Static List Items in the ComUnity Toolkit. It defines the navigation path for these items, allowing users to be directed to specific screens within the application when a static list item is selected. Key Features
Navigation to System Screens: The Action URL can be used to navigate directly to system screens using absolute paths, such as /Register or /ChangePassword
Navigation to Form Screens: For custom and Additional Form screens LINKs are used (e.g., LINK:BusinessOwnerEventsRespondPage?eventId={{= eventId }}). This allows for dynamic navigation by passing context-specific data, such as entity IDs. The same rules that apply when defining Target URLs for lists in Navigation screens are also used when defining Action URLs. The syntax for the Action URL can have 0 to N parameters passed to the LINK,
Optional Property: The Action URL is not mandatory. If the static list item is intended to serve an informational purpose without any navigational function, the Action URL can be omitted.
This property allows you to specify the title of a list list item. This property is required.
This property allows you to select an icon for a list list item.
This property allows you to specify the detail of a list list item. This property is required.
This property is no longer supported.
The image URL property allows you to upload an image to your list item, view Images to learn more.
The name of the icon to be displayed. If set, this will be used instead of the icon value.
The Static List Item in the ComUnity Toolkit is a component used to add a single, predefined list item to a screen. Unlike or, static list items do not retrieve data from the but are configured with static values. Each item can be customised with optional properties such as a title, icon, details, and an Action URL, based on the developer’s specific requirements.
By default when you create a custom web and then publish your project the Toolkit creates an initial <tenantname>.webdev.comunity.me
binding for your application.
A binding is a domain for your custom website. The ComUnity Developer Toolkit can be configured to point to several bindings for a single custom website.
To add a custom binding, follow these steps:
Open your project in the Toolkit and navigate to Custom Website then select the Bindings tab.
Locate the Add New Binding button and click on it to add a new class.
In the modal window, provide a add a unique binding for your application in the designated Binding Name box.
Finally, click Add.
After successfully adding a binding contact the ComUnity Toolkit's technical team for further assistance in enabling your binding.
A guide to creating forms using screen controls in Form Pages
Form page screen controls are fundamental elements within the ComUnity Development Toolkit that empower developers to create interactive and user-friendly forms for data collection and input. These controls serve as building blocks for designing effective user interfaces and streamlining data submission processes. Form controls encompass a diverse range of components, each designed to cater to specific input needs.
From input fields and auto-inputs to reference inputs and an extensive array of buttons, these form controls serve as screen controls specifically designed to build forms. They provide a versatile set of tools that seamlessly facilitate data interaction. By incorporating these controls into your application, you can elevate user experience, ensure precise data input, and optimise the overall functionality of your application.
In the following sections, we will delve into the various types of form controls available, explore their unique properties, and discuss best practices for integrating them into your application's design. Whether you're creating simple data entry forms or complex multi-step processes, form controls provide you with the means to build efficient and intuitive user interfaces that cater to your application's requirements.
Buttons are interactive components which are allow users to submit forms, they are also to implement Consent. The Button screen control widget is used to build buttons.
This property allows you to specify the default text to display on your form button. A valid Button Text must be of type string with a maximum length of 12. The Button Text property is required.
The optional Button Text (Long) property allows you to specify an extended label for the button. This longer text will only display on devices that support longer button names, excluding those that impose text length restrictions, such as certain Java-based phones. If Button Text (Long) is provided, it will be used in place of Button Text on compatible devices.
This property allows you to select a consent by name from a list of consents which exist in the system. The selected consent is applied when the form is submitted. To learn more view Consent.
This specifies the type of button to use in a form and defaults to a Action button type if not specified:
Action – Standard form button
Link – A button that renders as clickable text in the form
The button’s operation (e.g., POST, PATCH) is executed on the form’s data path, derived from either the Target URL or Entity Name. These values are configured in the Properties editor, with the Target URL taking precedence over Entity Name when constructing the data path for the page. This setting also allows appending to the data path to enable operations on a different entity.
For example, a form with a Target URL as below:
/Fault({{faultId}})
And a “URL Template” value of
/FaultType
The OData path for the operation will be as below
/Fault({{faultId}})/FaultType
This field allows for customisation of the JSON body generated from form inputs when the form is submitted. By default, the JSON body is derived from the form inputs, but this field enables further customisation.
If the Document Template value starts with {, the body will be constructed directly from the specified template, with placeholders replaced by form input values.
For example if you created the following screen with a Target URL = “/UserProfile” and a Button that performs a PATCH operation as below:
Setting Document Template to {"Name":"{{=Name}}","Modified":"{{=now}}"} would result in a body containing only the specified fields:
If the value does not start with {, the default body structure derived from form inputs is used, and the specified Document Template value is appended to it. For instance, if Document Template is set to "Modified"="{{=now}}", the resulting body merges the template with the form-derived fields:
In summary:
• Starts with {: Uses the specified template as the complete body, with placeholders replaced by form values.
• Does not start with {: Adds the specified value to the default form-derived body.
This setup provides flexible JSON customisation to accommodate specific data requirements.
This property allows you to specify a message to display to a user after successful form submission. Setting this value results in a dialog being displayed to the user that must be dismissed by the user.
This property allows you to specify a message that will be displayed to the user before the action continues with submitting the request. Setting this value will result in a dialog being displayed when pressing the form submission button.
This property allows you to specify a message that will be displayed to the user before the action continues with submitting the request. Setting this value will result in a dialog being displayed when pressing the button.
This property allows you to specify the path to a page a user is redirected to after form submission. The accepted values are:
This property allows you to order your form fields by entity property. It accepts a comma delimited list of entity properties.
The property allows you to filter All Inputs by to specifying entity properties to exclude from All Inputs. It accepts a comma delimited list of entity properties.
This property allows you to specify read only form fields by entity property. It accepts a comma delimited list of entity properties.
Block Templates are screen controls A specialised list that sets up auto-refreshing (long polling) of the list values. Block Templates are particularly beneficial for dynamic content, such as notifications or chat messages, where it’s crucial to have the latest data reflected consistently.
This property allows you to set the Data Path for the items in the list. The value is appended to the Target URL for the page.
Sets the title for the list item
Sets the title for the list item
Sets the maximum number of items to be fetched for the list.
Sets the query that will be applied when fetching the records for the list.
Sets the fields that will be used when filtering with the text search bar.
Adds multiple Action buttons to a Page (i.e. Edit, Delete, etc.)
Sets the label of the form edit button, button will only be added if there is a value set.
Sets the label of the form update button, button will only be added if there is a value set.
Sets the label of the form delete button, button will only be added if there is a value set.
Adds a single input control (i.e. text box, drop-down, etc.)
Sets the property (field) to be used for the input control.
If the property is on a different entity then this value can be used to specify the navigation path to the property. The value is appended to the form’s data path.
The Nav Button is a versatile UI component in the ComUnity Toolkit designed to facilitate user navigation both within the application and to external resources. It allows developers to set a label, link to an external URL, or navigate to an internal page when pressed. Additionally, the Nav Button can be configured to share the application via various channels using a specific syntax.
Sets the button label.
An external URL that should be opened when the button is pressed.
Sets an icon to be displayed in the Nav Button.
If the value starts with “SHARE:” then it can be used to share the application via various channels else the value is not used. For sharing the following syntax must be used:
Specifies the internal path to navigate to after form submission. Accepted values are:
The Reference Input controls are used to generate dropdown lists. These lists can either be based on the entity associations of a designated page or any entity within the Data Model, even if it's unrelated to the entity specified by the Target URL of that page. For a basic configuration, simply set the Data Path to point to the desired options.
Sets the property (field) to be used for the input control.
If the property is on a different entity then this value can be used to specify the navigation path to the property. The value is appended to the form’s data path.
The entity that will be used to populate the drop down with values is derived using the following rules:
a) If the value not set then use form data path is used
b) If the value and starts with “../” then remove last entity from the form data path and append the value after the “..” to the modified form data path. There can be multiple occurrences of “../”.
c) If value starts with “./” then append the value after the “.” to form data path
d) If the value is not any of the above then use the value as the data path
Examples
/UserProfile(guid’…’)/Faults(1234)
/UserProfile(guid’…’)/Faults(1234)
UserProfile(guid’…’)/Faults(1234)
./ FaultType
/UserProfile(guid’…’)/Faults(1234)/FaultType
/UserProfile(guid’…’)/Faults(1234)
../Account
/UserProfile(guid’…’)/Faults(1234)
/UserProfile(guid’…’)/Faults(1234)
../../Suburb
/Suburb
/UserProfile(guid’…’)/Faults(1234)
/LookupValues
/LookupValues
The query that must be applied to the reference entity when fetching the values.
A comma-separated list of field names on the reference entity that can be used to search for matching records.
The template definition for displaying the value in the dropdown selector.
In the ComUnity Toolkit, you have the flexibility to construct forms utilising either the Input controls, the Auto Inputs controls, or a combination of both. With the Input controls, you're required to manually define each input field, giving you more control as you manage all your form fields directly. In contrast, the Auto Inputs feature automatically generates all input fields based on the entity defined in the TargetURL of the designated page. The primary advantage of Auto Inputs controls is their adaptability: when you modify your entity definition, your form fields adjust automatically. However, there's a drawback. If you don't want fields for all entity properties, you may have to adjust Auto Inputs settings. Thus, while Auto Inputs offers convenience, Input controls provide a granular level of management.
To create a form in a form page, follow these steps:
You have successfully created a dynamic form. The ComUnity Development Toolkit will parse your form definition and render forms in the client with an intelligent auto fill feature.
Upon selecting a List within a Form page, you will be presented with its supported screen controls in the Screen Controls panel, along with its Properties. Notably, a List in a Form page does not possess configurable properties; it is equipped solely with a single property—Name—which displays its system-generated identification.
When adding a List to a Form page, you will be presented with the List Type's options. By default, List is selected, but you can choose from several other layout types:
List: Displays items as a standard list.
Grid: Shows items in a grid format.
Map: Displays items as markers in a map view (each item must have a Latitude and Longitude value).
Tab: Presents the items as tabs at the top of the Form.
Pie: Visualises items as a pie chart (requires item value to be a JSON document).
Bar: Visualises items as a bar chart (requires item value to be a JSON document).
In addition to List Types, you can define List Items, which determine the content displayed within the List:
Entity Items: Adds multiple list items created from the records contained in a database entity.
Single Item: Adds a single list item that can be templated with data values from the parent page's context.
Static Item: Adds a single static list item.
Enhancing Form Interaction: Utilising Lists for Rendering Entity Associations
When designing a Form page to manage a specific entity, it’s often beneficial to enhance the user experience by incorporating additional information derived from related entities. This is where Entity Items - List Item comes into play. Entity Items are special types of list items almost always used to resolve associations (also known as navigations) between entities or navigate to related screens.
To effectively use Entity Items, you must first define associations to the entity being managed by the Form in your Data Model. These associations, also referred to as navigations, link the main entity to related entities, allowing for dynamic retrieval of associated data. For more information on setting up these associations, refer to the Table Links section in your Data Model documentation.
Once the associations are defined, you can integrate a List control within the Form page. This List control dynamically fetches and displays data from the associated entities, enriching the context and functionality of the Form page.
Associations to the entity managed by the Form must be defined in the Data Model before they can be used in a List control on a Form page.
For example, on a User Profile Form page, the List control might be configured to display the user's most recent orders, providing valuable insights into their purchasing history. In another scenario, it could be used to showcase communities or groups that the user is associated with, offering a glimpse into their social interactions and affiliations.
The versatility of the List control makes it an invaluable tool for enhancing the user experience on a Form page. By displaying relevant associated entities, the List control helps users better understand and interact with the main entity. Additionally, the List control can be customised to align with the design principles of your application, offering different layouts, styles, and interaction behaviours to ensure a seamless user experience.
In pages containing a List with Entity Items, the Target URL of the page serves as a base. The Entity Set or Navigation Property (e.g., /Comments
) is appended to this Target URL to resolve the association. This means that when a user interacts with the list item, they are navigated to the appropriate related screen or entity, ensuring a cohesive and intuitive navigation experience.
To implement dynamic list rendering using Entity Items, the following properties are essential:
Specifies the query that must be applied when fetching the records for the list items. Templates can be used to dynamically generate the query based on the current state of the application.
Specifies the fields that must be used for search operations to filter the list.
This property is no longer supported.
Specifies the entity set or navigation property from which the list items will be fetched. For example, if the Entity Set or Navigation Property is /Comments
, it will be appended to the Target URL of the page that contains the List. This effectively resolves the association by directing the user to the relevant associated data.
Specifies the URL path that should be prepended to the page Data Path when generating the Target URLs for the list items. Templates can be used to dynamically generate the URL path based on the current state of the application.
By carefully configuring these properties, you can create dynamic, context-sensitive lists that enhance the functionality and user experience of your Form pages.
The Page Elements feature in the ComUnity Toolkit empowers developers with a customisable utility to create tailored page components that meet specific requirements. These versatile tools facilitate the implementation of CRUD (Create, Read, Update, Delete) functionality within custom website pages. By seamlessly interacting with the Data service, developers can manipulate and dynamically display data within their web pages.
To access the page settings and leverage the Page Elements, follow these steps:
Open your project in the ComUnity Toolkit and navigate to the Custom Website section.
Select the Pages tab to view a comprehensive list of all existing pages within your Custom Website.
Choose the specific page you want to customise, and an array of icons will be displayed.
A modal window titled Add a Page Element will appear on your screen.
In the modal window, provide a name for the page element and select the desired type. You can choose between two available types: Element and Form Element
After successfully creating the page element, it will be added to the page hierarchy.
Select the created page element to build and configure its settings. This action will reveal a pop-up screen dedicated to customising the page element's specific settings.
Page Element Settings in the ComUnity Developer Toolkit offer developers the ability to fine-tune and customise various aspects of their page elements. These settings play a crucial role in configuring the behaviour and display of dynamic content within web pages.
In order to explore these settings in detail, developers can refer to the comprehensive guide on Dynamic List Rendering in a Navigation Page, which provides in-depth information and examples. This guide covers essential topics related to Page Element Settings, including the properties and their functionalities.
Let's explore the details of the individual Page Element Settings:
This property displays the name of your page element.
The Sort Order determines the ordering of the data as specified on the Data Path. It functions similarly to platform data queries. You can specify a comma-separated list of fields that you want to sort on. For example, "Name, Surname desc, DateOfBirth".
The Max Items property is used to specify a limit on the number of records to display on the client.
Pagination is not yet supported.
Data Path
Query
By understanding and configuring these various Page Element settings, you can customise and optimise the behaviour and display of your page elements within the ComUnity Developer Toolkit.
View to learn more about DNS registration and configuration.
A modal window titled Add Binding will appear on your screen.
All inputs screen control widget creates form fields for all the properties of the entity specified in the or of the parent form page.
Specify the or the of the active form page and save your changes.
Add a screen control widget to the active form page and configure its properties or else,
Add a screen control widget to the active form page and configure its properties or else
Add a control widget to an active form page and configure its properties.
These supported screen controls and their corresponding properties are instrumental in implementing and , providing flexibility in how data is presented within your Form page.
Page elements are modular code blocks of dynamic page content written in . A page element by definition belongs to a single page.
Locate and click the icon associated with that page.
This property allows you to define a unique name that serves as a reference when templating your page element into a page. Refer to for further details.
This property is used to define the resource path of an .
This property is used to define the query options of an .
The payload that is returned by the oData URL you defined in your and is referenced to as Model
in your content definition.
The code samples shown below show a and used to fetch data from the BaseNotification entity in the Data Service and the definition written using shows logic for iterating over the payload referenced to as Model
and then displaying the outcome on the web using markup:
Content definition in
Custom Classes in the ComUnity Platform serve as a powerful tool for developers to enhance and customise the functionality of their projects, while simultaneously promoting modularity and separation of business logic. They provide a flexible foundation that enables developers to implement specialised behaviours, define unique properties, and introduce custom functionalities that precisely align with their project's requirements.
One notable advantage of Custom Classes is their ability to facilitate the separation of business logic from other components within the project. By encapsulating specific functionalities within these classes, developers can establish a modular code structure, resulting in improved maintainability, readability, and ease of updates. This separation of concerns promotes code reusability and allows for more efficient development and debugging processes.
A custom class within the <<Project name>>.Custom
namespace is a system-generated class that serves as a framework for developers to incorporate their own custom logic, functionality, or data structures within the ComUnity Platform. This custom class provides developers with the necessary structure and context to seamlessly integrate their project-specific elements into the platform.
By leveraging Custom Classes, developers can take full advantage of the ComUnity Platform's flexibility and customisation capabilities. The modular and separated nature of these classes promotes code organisation, reusability, and maintainability, resulting in more robust and adaptable projects. This empowers developers to tailor the functionality of the ComUnity Platform to their specific project needs, leading to more efficient development processes and ultimately delivering high-quality solutions.
To create a Custom Class, follow these steps:
Open your project in the Toolkit and navigate to the Custom Classes section. Here, you will find a list of all existing custom classes in your project.\
Locate the (+) Add a class button and click on it to add a new class.
A modal window titled Add custom class will appear on your screen.\
In the modal window, provide a unique name for your custom class in the designated Class Name box. Choose a unique name that accurately reflects the purpose or functionality of your class.
Finally, click Add to create the custom class.
After creating the custom class, it will be displayed on your screen. When you click on the newly created class, the in-app code editor will appear, presenting you with the boilerplate code for the class definition. This code provides a starting point for you to add your custom class definition and tailor it to your project's requirements.
For a more extensive modification workflow, it is recommended to download the project to your local development environment. By doing so, you can leverage your preferred code editor and its features to make changes to the class definition. After making the desired modifications, you can copy and paste the updated class definition back into the in-app code editor, to learn more view Debugging and editing your application code.
To learn more about setting up your local ComUnity Project development environment, you can refer to the relevant documentation or resources available. These resources will provide detailed instructions and guidance on configuring your local environment to effectively work with the ComUnity Project.
Once you have made the necessary modifications to your custom class, ensure to build your project. Building the project incorporates the changes made to the custom class, along with any other modifications, into the project's codebase.
In addition to creating custom classes, you also have the option to delete a class if needed. Simply select the class you wish to delete and click on the trash can icon adjacent to the class name. This action will remove the class from your project, allowing for easy management and organisation of your custom classes.
By following these steps, you can effectively create, modify, and delete custom classes in the ComUnity Toolkit, providing you with the flexibility and control to tailor your project's functionality to your specific needs.
Custom Classes are commonly utilised for defining custom helper classes, which offer additional utilities and functionalities that cater to specific tasks within the project. These helper classes extend the capabilities of the ComUnity Platform, enhancing its adaptability to diverse project requirements. Additionally, Custom Classes are also instrumental in implementing , allowing developers to create virtual representations of entities within the ComUnity Platform, thereby facilitating efficient data management and manipulation.
Create personalised websites with ease using the Custom Website feature in the ComUnity Toolkit.
The ComUnity Developer Toolkit is designed to be flexible, allowing developers to tailor their applications to specific requirements. When the default screens provided by the Toolkit do not align perfectly with your project's needs, the Custom Website feature allows you to create a dynamic Custom Website.
To create a Custom Website, follow these steps:
Open your project in the Toolkit and navigate to the Custom Website section.
If you don't have an existing Custom Web section in your project, you will see a button Configure a custom website for this project else your Custom Website will be shown:
Click Configure a custom website for this project
Please note that the configuration process might take some time. After the configuration is complete, your custom website will be displayed.
The essential building blocks of a custom website, presented in an intuitive tab view are: Bindings, Templates, Pages, and Resources. Each component plays a vital role in creating a personalised and functional web experience for your project.
By utilising the Custom Website feature, developers can create a custom website that seamlessly interacts with the necessary server or data source. This allows for a tailored and cohesive user experience, and this technical document will provide detailed instructions on how to leverage the Custom Website feature to build a front-end application that meets your project's specific design and functionality requirements.
Navigation pages are a powerful feature that enables the creation of complex navigation structures within applications. They can display both static content (such as images, text, and static lists) and dynamic content, and can be directly integrated into the navigation hierarchy.
Moreover, Navigation pages support the use of dynamic Lists, which are an effective way to present data from various sources, including entities, lists, and custom objects. These Lists can be customised to meet the specific requirements of your application, providing a dynamic and responsive user experience.
Examples of How to Use Navigation pages:
Creating a hierarchical navigation structure with multiple levels of pages.
Designing a navigation system tailored to the specific needs of an application.
Displaying dynamic content using Lists to enhance user engagement.
Name This is the name you designated to your page during creation.
Title This property allows you to customise the title of your navigation page.
: Bindings enable you to configure domain mappings, establishing connections between A binding represents a specific domain associated with your custom website. With the ComUnity Developer Toolkit, you can configure multiple bindings to direct to a single custom website.
: Templates provide a structure for your custom website, allowing you to define reusable components and layouts. By utilising templates, you can maintain consistency across your front-end application, simplify the development process, and ensure a cohesive design and user experience.
: With the Pages component, you can create and organise your web pages, defining the layout and flow of your application. Each page can be customised to display the desired content and interact with the necessary server or data source to retrieve or submit data, providing flexibility and control over the presentation and functionality of your custom website.
: Page Elements are used to render dynamic page content, incorporating interactive and data-driven components within your custom website pages. These elements enable you to display and manipulate data, respond to user actions, and create a more engaging and interactive user experience.
: Resources consist of files used within the custom website, such as stylesheets, scripts, and other assets. By managing and leveraging these resources effectively, you can enhance the visual appeal and functionality of your front-end application, ensuring it meets the specific design and functionality requirements of your project.
The underlying node type for a Navigation page is a List, allowing it to contain other , Lists, and various Screen Controls. This versatility makes Navigation pages a flexible tool for building a wide range of navigation structures tailored to your application's needs.
Icon This property allows you to select an icon which is used to prefix the.
For items the Icon field is required otherwise broken icon images will be rendered before your menu items.
Once you have set the properties of your Navigation page, you can start building your page content using screen controls. You can find a comprehensive guide on how to do this in the . In the next section, we will discuss how to implement features specific to the Navigation page, which can all be done using screen controls strategically.
The BaseUrl is the endpoint of your web client.
@Model.App.BaseUrl
@Model.App.DataServiceUrl
In your project you might have to create more than one template, in that situation you might find yourself referring to the same data repeatedly. For example, for a given organisation the feedback email address you use will likely not change for the different templates used in your communications with your clients, in that scenario you would have to repeat your feedback email whenever it is required in a template.
@Model.App.{Variable Name}
This namespace contains the event payload. The event payload is data in json format which is passed to an event when it is triggered. In most cases the payload is simply a json representation of the affected record. You can also build up your own custom json body, to be used as a payload.
A sample event payload, when an event is triggered in one of the Faults table’s change interceptors, the payload will consist of raw data in json format that makes up a single record in the Faults table as shown in the code snippet below.
@Model.Profile. {Property name}
While the @Model.App and @Model.EventData namespaces provide some pre-populated data upon triggering the Communication Service, it's important to configure additional data sources through the Event Action. This ensures the availability of more extensive data for building robust and dynamic templates. The Event Action allows you to specify additional data sources accessible through the @Model.Profile and @Model.Data namespaces. This flexibility enables you to incorporate specific data for general communication settings and further enhance template customisation.
By understanding and utilising these data sources, you can leverage the power of dynamic template building and create effective communication experiences within your ComUnity project.
Conditionals: The code snippet below demonstrates how you can use conditional statements when templating messages:
URL shortening is often used for two reasons: to track when a URL is accessed and to save space in messages where the length is limited, such as in SMS where HTML cannot be used to display friendly names.
By default all the urls contained in messages are shortened, config can be altered to exclude certain URL's from being shortened by extending the @Model.App namespace with the following variable ShortUrlExclusions
whose value is a comma delimited list of all URLs to be excluded an example is shown in the screenshot below:
In the Event Details section, you'll find a breakdown of the supported fields that allow you to customise your event template. These fields provide essential information and parameters for defining the behaviour and delivery of your communication. By familiarising yourself with these fields and their configuration options, you can optimise your event template to effectively meet your communication requirements. Let's explore each field in detail to understand how you can enhance your event template for seamless and impactful communication.
This property is used to specify the name of the template associated with the event action. An empty template is a valid value of this field.
@Model.App.DataServiceUrl/{oData Query}
Templates are called for each item returned by the Member List Path. For example, if the response payload contains 5 members, the templates will be called 5 times, with the respective member's information being populated from the @Model.Profile namespace each time. However, if the response payload from the Member List Path query is empty, the @Model.Profile namespace will not contain any information for templating. In this scenario, the templates will be called only once, and the information available from the @Model.EventData and @Model.Data namespaces will be used.
A unique identifier (GUID) used to bind together all messages (email, SMS, push, in-app, etc.) related to a particular process, event, or conversation.
Inserted manually into the payload when triggering communication.
Saved in the database against each communication record.
Later enables grouped querying and full traceability of related messages.
manually into the payload when triggering communication.
Practical Usage of the Context Field
Fault Management
Fault ID (GUID)
Hierarchical: Initial fault report → Status update → Closure message
Links all updates and communications about one fault lifecycle
Support Ticketing
Ticket ID (GUID)
Hierarchical: Ticket created → Agent assigned → Customer updated âž” Ticket closed
Full customer journey is traceable under one context ID.
Vacancy Posting
Vacancy ID (GUID)
Flat/Bulk: Single event triggers many outbound communications
Context groups all job notifications related to that one vacancy posting.
Bulk Campaign (Event Announcement)
Event ID (GUID)
Flat/Bulk: One campaign broadcast across channels (email, SMS)
Easy to audit who was notified and when, even across different channels.
Chat System
Conversation ID (GUID)
Hierarchical (Conversational Flow): User message → Agent reply → System auto-response → Follow-up messages
Rebuild full conversation history across multiple messages and directions.
This property allows you to specify a physical path (URL) to an internet discoverable file you want to attach to your email.
This property allows you to specify is a custom user facing name for your attachment.
The priority field allows you to specify the level of importance of a message as a digit in the range from 1 up to 4.
1
Critical
2
High
3
Normal
4
Low
The ComUnity Platform utilises an event-driven architecture to facilitate communication. Events are exposed through a REST API and can be easily triggered with a simple POST request. As part of our low-code platform, we provide a convenient helper function, CommsService.TriggerEvent()
, to simplify this process.
Communication Events are typically associated with individual entities and are commonly triggered within change interceptors. As a developer, you can create these events and define dynamic action templates for each event. These templates govern the behaviour and delivery of communications across diverse channels, including email, in-app messaging, push notifications, HTTP, WhatsApp, and SMS.
To create an event follow these steps:
Open your project in the Toolkit and navigate to the Communications section to view a list of all the events currently associated with your project, if there are any.
Locate the (+) Add an event button and click on it to add a new event to your Communications.
A modal window titled Add New Event will appear on your screen.
From the dropdown menu, select the entity you want to link the event to.
Select the appropriate change interceptor for the event.
Optionally, provide a name for your event.
Finally, click the Add button to add the entity to the Communications module.
After setting up the event, you can proceed to configure templates to define the behaviour and delivery of communication for that event. Templates provide you with the flexibility to customise the content and format of communication across different channels.
To customise an event template, follow these steps:
Communication Channels : In the modal window, you will find multiple tabs representing different communication channels supported by the event template. Each tab corresponds to a specific communication channel, such as email, in-app messaging, push notifications, HTTP, WhatsApp, and SMS. Click on each tab to explore the available options and settings for configuring communication channels.
By navigating through these tabs, you can fine-tune the event template according to your requirements, ensuring effective communication across multiple channels.
To learn more about event details and configuring specific communication channels, click the links below:
To create a page in your Custom Website, follow these steps:
Open your project in the Toolkit and navigate to Custom Website then select the Pages tab.
Locate the Add a Page button and click on it to add a new page.
A modal window titled Add a Page will appear on your screen.
In the modal window, provide a add a unique page name in the designated Page Name box.
Finally, click Add.
Once you have created a page within your custom website using the ComUnity Developer Toolkit, you can proceed to build and customise its content. The Toolkit provides various options to manage your pages efficiently. You can insert page elements, add child elements to your pages, or delete pages as needed. The page structure is organised hierarchically, allowing you to expand and collapse pages to view their child elements.
To ensure a seamless and user-friendly experience on your Custom Website, the ComUnity Developer Toolkit provides several essential functions that allow you to efficiently manage and structure your pages. Let's explore these functions in detail:
To create a truly tailored web experience, the ComUnity Developer Toolkit provides a comprehensive range of page settings that enable users to customise the visual presentation and functionality of their individualised website pages. To access these settings, users should designate a specific page and select the corresponding icon from a set of options. These icons facilitate various functions, including editing the page, adding page settings, deleting the page, and adding a child page in the hierarchy. By selecting the appropriate icon, users will initiate the unveiling of a modal dialog that exclusively showcases the page settings pertaining to the chosen page.
The following functions are key components for building engaging web content:
Child Pages: Establish a hierarchical structure for your website by adding child pages. By creating child pages, you can organise and categorise your content effectively, providing visitors with a clear navigation path and logical information flow.
By leveraging these diverse functions, developers can create highly personalised and dynamic web pages that cater to their specific needs. The ComUnity Developer Toolkit empowers developers with the tools necessary to design, customise, and structure their web content efficiently and effectively. This includes the creation of custom page elements for implementing CRUD functionality, the utilisation of templates for modular page elements, and the incorporation of external resources for enhanced content.
To create a template, follow these steps:
Open your project in the Toolkit and navigate to Custom Website then select the Templates tab to view a comprehensive list of all existing templates within your Custom Website.
Locate the Add a Template button and click on it to add a new template.
A modal window titled Add Template will appear on your screen.
In the modal window, provide a add a unique page name in the designated Template Name box.
Finally, click Add.
After successfully creating the template, it will be added to the Templates view.
Template Settings serve as a vital component within the ComUnity Developer Toolkit, enabling developers to enhance the structure and design of their web pages. These settings are instrumental in customising and optimising the visual layout and functionality of web page templates.
Let's explore the details of the individual Template Settings:
Each template is passed a Page
.To reference a page in a template use the following syntax:
Resources are non HTML files e.g. images, stylesheets and scripts which are used in your Custom Web.
To add a resource, follow these steps:
Open your project in the Toolkit and navigate to Custom Website then select the Resources tab to view a comprehensive list of all existing resources within your Custom Website.
Locate the Add a Resource button and click on it to add a new template.
In the modal window, provide a add a unique page name in the designated Resource Name box and select a MimeType.
Finally, click Add.
After successfully creating the resource, it will be added to the Resources view.
Resource Settings in the ComUnity Developer Toolkit offer valuable features to manage and optimise various types of content within your web pages. This includes the Mime Type and Content Type settings, which ensure proper handling and compatibility of files and resources.
Let's explore the details of the individual Resources Settings:
Within the Resources section of the ComUnity Developer Toolkit, you can leverage the Mime Type feature to handle different types of files and their associated formats. This feature offers a drop-down menu that presents a variety of supported file extensions.
When uploading a file, you can select the relevant mime type from the drop-down menu. This ensures that the file is appropriately categorised and handled within the Toolkit, allowing for proper rendering and processing based on its specific format.
By utilising the Mime Type feature, you can ensure seamless compatibility and accurate handling of various file types, enabling a more efficient and effective management of resources within your web pages.
The Content Type setting in the ComUnity Developer Toolkit allows you to specify the type of resource for your content. It provides two supported options: text or file.
When selecting the File option, you gain access to additional settings that enable you to upload files directly from your local machine. This feature simplifies the process of incorporating various file types into your content.
Alternatively, if you choose the Text option, you are provided with a user-friendly text editor. This text editor allows you to conveniently input and format text content within the toolkit.
By utilising the Content Type setting, you can effectively manage and incorporate different types of resources, whether it be text-based content or files, into your web pages with ease.
To create a Page Link, follow these steps:
Create or Select a Navigation page: Begin by creating a new navigation page or selecting an existing one that you wish to use.
Integrate a Page Link: Drag and position a Page Link screen control within the Screen Structure at an appropriate location.
Access Page Link Properties: Click on the Page Link element to select it. This action will create a system generated Page and reveal the corresponding properties within the Properties panel.
Name This property displays a system-generated name for the destination page. You can change this name to something more meaningful.
Title This property shows the title of the automatically generated Form page linked to the Page Link. You can change this title to something more descriptive.
Layout Type Choose a suitable layout type for your Page Link. The available layout types are:
Bar: This layout type displays the destination page contents as a horizontal list item.
Card: This layout type displays the destination page contents as a card.
Image: This layout type displays the destination page contents as an image.
Pie: This layout type displays the destination page contents as a pie chart.
PieList: This layout type displays the destination page contents as a list of pie charts.
Tab: This layout type displays the destination page contents as a tab.
Table: This layout type displays the destination page contents as a table.
Customise the icon associated with the destination page contents, selecting an appropriate visual representation.
Define a role name, if necessary, to control access or permissions related to the destination page contents.
Before examining the specific fields of event details, it is important to understand the available data sources and their role in building dynamic templates. Templates rely on data stored across multiple databases and are exposed to the templates through different namespaces. The templates are written in. In the ComUnity Platform, there are up to four namespaces from which communication data can be accessed:
It is important to familiarise yourself with two essential technologies: and syntax. These technologies are crucial for querying data from the namespaces and creating dynamic content in your templates.
In views, data sources are represented with a prefix of @ symbol. For example, you'll find data sources named as @ModelApp
, @Model.Data
, and so on in the subsequent sections. The @ symbol indicates that these sources are accessed using syntax to incorporate dynamic data into the templates.
All the data referenced here can be accessed under ; please refer to the Communication Settings section for access.
The @Model.App namespace contains application-level data which by default includes constants and the . This is typically where a developer will define global variables. If it is desired thenamespace can be extended to include other communication variables, to learn more view .
To render the BaseUrl in your templates, use the:
The value of DataServiceUrl is an endpoint that is used to access the Data Service. This is the RESTful API exposing your custom entities. This is how you access your data.
To refer to the DataServiceUrl in your template configurations, use the :
Common data can be configured as custom variables which can then be accessed in the namespace in your templates.
When you use the Fault Starter Template to create your project, the variables FeedbackEmail, FromAddress, LogLevel, ReplyToEntity and SourceEmailAddress are already pre-defined ins as part of the application-level data.
To extend the namespace view Configuration.
To render the custom values contained namespace in your templates, use the :
When configuring content for your templates you have the liberty to create custom oData queries to access data in your Data Service, to learn more view the . The response payloads from your queries are used to populate the @Model.Data namespace.
To render @Model.Profile data in your templates, use the :
The following C# methods are commonly used in during templating:
:
Transforms a string to its escaped form, an example is shown below:
: Transforms html into an html body, as shown in the example below:
: This method returns a new DateTime object with the number of hours specified added to its value as shown in the example below:
This property is used to define an query that will populate the @Model.Data namespace.
The ComUnity Development Toolkit only supports the 3.0 specification.
To parse @Model.Data and display a single item in your templates, use the :
If the response payload from the 'Expand Path' query, contains more that one value, these values will be added to the Items
collection as part of the @Model.Data namespace. Within the template one can parse over these @Model.Data.Items
to create, for instance a list or table using the :
This property is used to define an query which typically fetches a member list. A member list is an array of records which contain the user IDs of the intended recipients of your communications. The response payload from the Member List Path can then accessed for templating through the @Model.Profile namespace.
After configuring the Member List Path it is required that you specify the .
This property is used to specify the property whose value is a user id or user identifier in each member list item as defined by the .
Context field should be of data type .
When setting up email attachments use the or field configurations, but not both fields at the same time.
The Attachment oData List Path property allows you to specify and query that is used to fetch an attachment list. An attachment list is an array of records which contain the files you intend to attach to your emails.
After configuring the Attachment oData List Path it is required that you specify the .
This field is used to specify the property whose value is an attachment file in each attachment list item as defined by the.
When customising an event template, you can access the template settings by clicking the edit icon for the desired event. This action opens a modal window with various tabs representing different aspects of the template configuration.
Click the edit icon for the desired event. This action opens a modal window with various tabs representing different aspects of the template configuration.
Event Details: This tab allows you to specify important details related to the event template. View to learn more about configuring event details.
Custom web pages can only be populated with static content, dynamic content is templated into the pages as independent .
: During the page development process in the ComUnity Developer Toolkit, you have the ability to configure various page settings and elements. This includes setting parent pages, creating dynamic page elements, and utilizing templates and resources to enhance your web pages. By leveraging these features, you can create compelling and informative textual and multimedia content for your web pages.
(Dynamic): Developers have the ability to create custom page elements to meet their specific requirements. These page elements are utilities provisioned by the ComUnity Developer Toolkit and can be used to implement CRUD (Create, Read, Update, Delete) functionality in custom website pages. Developers can design and implement page elements that interact with the Data service, enabling the manipulation and display of dynamic data within their web pages.
: Create templates that enable the development of modular page elements like headers, footers, and reusable components. These templates provide a consistent structure and layout for your website, ensuring a cohesive user experience while allowing for efficient and scalable development.
: Incorporate external resources into your web pages seamlessly. Embed images, videos, audio files, or other documents from various sources to enrich your content and provide a more interactive user experience.
Templates are used to implement modular layouts used for creating for .
Select the created template and click the icon to build and configure its settings. This action will reveal a pop-up screen dedicated to customising the template's specific settings.
Refer to for more details.
A modal window titled Add Resource will appear on your screen.
Select the created resource and click the icon to build and configure its . This action will reveal a modal window dedicated to customising the resource's specific settings.
Page Links extend the navigation hierarchy by enabling navigation between Navigation and newly created pages. Once a Page Link is created, you have the flexibility to customise it and establish a link to an existing Form page, if desired.
Configure and Save Properties: Use the Properties panel to tailor the as per your preferences. Once the configuration is refined, remember to save your adjustments."
The Page Link properties are used to configure the destination page that is linked to the Page Link.
The Target URL allows you to specify the resource path for the form and must be a collection for an insert and a single record for an update or delete operation.
Communications is an event driven API that allows ComUnity Developers to integrate centralised communication into their projects.
Communications enable you to integrate messaging capabilities into your projects effortlessly. Whether it's sending notifications, alerts, or updates via email, SMS, or in-app messages, Communications ensures effective information dissemination and enhances user engagement.
Key aspects of Communication in the ComUnity Developer Toolkit:
In this section, you will find detailed information about the supported fields that allow you to customise your email templates. These fields provide you with the flexibility to deliver personalised and engaging messages to your recipients. By understanding and utilising the configuration settings available, you can align your email communication with your brand and effectively capture the attention of your audience. Let's explore the dynamic fields available for customisation within Email:
To Address: The To address field allows you to specify the primary recipient/s of your message. To address box accepts a single email address or a semi-colon delimited list of email addresses. When you provide a list of email addresses the system will automatically iterate over the email addresses list when sending emails.
From Address: This field allows you to specify the sender of your email.
CC(Carbon Copy): The CC field in an email allows you to include additional recipients who will receive a copy of the email.
BCC(Blind Carbon Copy): The BCC field functions similarly to the CC field, but with one key difference: the email addresses added to the BCC field remain hidden from all other recipients.
Subject: The subject field allows you to provide a concise and descriptive summary of the email's content. It serves as a headline or title for the email, giving recipients a quick understanding of the purpose or topic.
An example showing list rendering in the HTML Body:
Text Body: This setting allows you to add the body of your template in text format. It is suited, although it can also be used for Emails, HTML Body is preferred for emails, as it produces a richer output.
Central to Communications is the concept of and . With the Toolkit, you can define specific events within your application that act as triggers for communication processes. These events can encompass user actions, or any other event that warrants communication. By capturing these events, you lay the foundation for delivering targeted messages to your users.
The ComUnity Developer Toolkit offers the function for efficient communication execution. When an event occurs, invoking this function triggers the Communication Service to manage the delivery of messages across various channels. It abstracts the complexities of background processes, enabling you to focus on creating meaningful interactions with your users. To configure your messaging flows, the offered by the Toolkit are essential. You can define to assign different levels of importance to messages, ensuring efficient delivery through preferred channels. The Toolkit also provides , offering standardised templates for common communication elements such as sender names, subject lines, or notification content. Additionally, allow you to incorporate application-level data and variables, enabling dynamic and personalised messaging experiences.
HTLM Body: This setting allows you to use HTML or to write the body of your email template.
HTTP Communication Channel: The HTTP communication channel allows you to send messages using HTTP requests, typically to other services or APIs. This flexible channel enables integration with various external systems and platforms. By configuring the following fields, you can customise and control the HTTP request:
Header: The header field allows you to specify additional information about the request, such as authentication tokens, content type, or custom headers. You can include key-value pairs to provide necessary metadata for the HTTP request.
Body: The body field contains the payload or data that you want to include in the HTTP request. It can be structured data in various formats such as JSON, XML, or plain text. You can dynamically populate this field with values from your event or use predefined variables.
Target URL: The Target URL specifies the endpoint or destination where the HTTP request should be sent. It represents the URL of the external service or API that will receive your message. You can use placeholders or variables to dynamically construct the URL based on your event data.
Verb: The verb field indicates the HTTP method or action to be performed on the target URL. It defines the nature of the request, such as GET, POST, PUT, DELETE, etc. You can choose the appropriate verb based on the desired interaction with the external service.
By configuring these fields, you can tailor the HTTP request according to the requirements of the receiving service or API, enabling seamless integration and data exchange between systems.
When defining communication events within the Toolkit, it is essential to consider the associated metadata to ensure effective and efficient message delivery. This section delves into two main categories of communication settings: Environment-Specific and Project-Specific Communication Settings. Each of these categories encompasses key aspects such as Channel Priorities, Pre-Defined Values, and Custom Values, which are crucial for configuring communication events to meet specific needs and contexts.
The Pre-Defined Values section provides access to the InAppRequest Template. This template serves as a predefined structure for specific types of messages or notifications. Utilising predefined values can save time and effort in setting up communication events, offering standardised options for elements such as sender names, email subjects, SMS templates, or push notification content. By leveraging these predefined values, you can maintain consistency across your messages and streamline the configuration process.
The Custom Values section is where you define your @Model.App namespace, which contains constants for your application-level data. Examples of such constants include BaseURL, FromAddress, ToAddress, and PushRootName. Custom Values allow you to personalise and customise your communication events based on specific requirements or preferences. By utilising the @Model.App namespace, you can effectively incorporate application-level data into your templates and messages.
The Channel Priorities field allows you to specify the importance level of a message, ranging from Critical, High, Medium, to Low. By assigning channel priorities, you can ensure that messages are delivered through the preferred channels based on their importance. The default channel priority is set to Medium, but you can adjust it according to your specific communication requirements.
Environment-Specific Communication Settings pertain to configurations that vary based on the deployment environment, such as development, testing, staging, or production. These settings ensure that communication events are appropriately configured for the context in which they are executed. To access and manage the metadata associated with these communication events in the Toolkit, navigate to the section, where you will find detailed instructions on how to set up and adjust these settings. Within this environment-specific context, you can define:
Project-Specific Communication Settings, on the other hand, are unique to each project within the Toolkit. These settings allow you to define communication parameters that are specific to your project's needs, ensuring that all communication events align with your project's objectives and requirements. To manage these settings, refer to the section for comprehensive guidelines on accessing and configuring the necessary metadata. Within this project-specific context, you can define:
Page Development in the ComUnity Developer Toolkit allows users to customise and optimise their web pages for a tailored and engaging user experience. By accessing the page settings, users can make adjustments to various elements and configurations. Follow the instructions below to access and modify the page settings for effective page development: To access the page settings and customise your web page in the ComUnity Toolkit, follow these steps:
Select the Pages tab to view a comprehensive list of all existing pages within your Custom Website.
Choose the specific page you want to customise, and an array of icons will be displayed.
Once you have made the necessary changes to the page settings, it is essential to click the Save button to apply and save the updated settings. This ensures that your modifications are effectively implemented and preserved, optimising your page development process.
Page Settings play a pivotal role in configuring and customizing the various aspects of your web pages within the ComUnity Developer Toolkit. By accessing these settings, you can define the essential attributes that shape the behaviour, structure, and content of each page.
Let's explore the details of the individual Page Settings:
This setting displays the name of your page, serving as a unique identifier. Once set, the page name cannot be changed.
Use this setting to select a parent page for the current page. The index or home page stands apart from other pages as it does not have a parent page, providing a clear distinction within your Custom Website pages.
Choose a template that defines the structure and layout of the current page. Templates ensure consistency across your website and streamline the development process.
Specify the user role that has access to the current page. This allows you to control the visibility and permissions for different users or groups.
Relative Uniform Resource Locators(URLs) are used as the value of the href
attribute when creating hyperlinks. By default URL of the index or home page is /<<Index page name>>
when linking the home page to its child page the value of href
is the relative URL: /<<Index page name>>/<<Child page name>>
and so on.
Locate and click the icon associated with that page. This action will open a dedicated pop-up screen that exclusively displays the page settings for that particular page.
Within this intuitive pop-up screen, you will find a range of adjustable at your disposal. These settings include Name, Parent Page Name, Template Name, Role, and Content. Modify these settings according to your specific requirements and preferences, ensuring they align with the desired structure and functionality of your web page.
The content field allows you to define your page content. Static page content is written using HyperText Markup Language(HTML) and can be linked with external Javascript and Cascading Style Sheet(CSS) whereas is used to template dynamic page content.
Any files(.png, .svg, .jpeg, .js, .css, etc.) that are used in your content should be stored in your Custom Web . To reference a resource in your page content use the Relative Uniform Resource Locators(URLs).
You can also reference resources which are persisted in the in your page content.
A page may be passed . To reference a page element in a page use the following syntax:
Push Notifications play a pivotal role in engaging users and delivering timely information directly to their mobile devices. These notifications are sent from a mobile app to a user's phone screen, ensuring that important messages and updates capture their attention. It's important to note that users must have downloaded the corresponding mobile app and opted into receiving push notifications from the app in order to receive these alerts. Let's explore the dynamic fields available for customisation within push notifications:
User ID: The User ID field enables you to specify the recipient of the in-app notification. It corresponds to the user ID property in the @Model.EventData namespace. By dynamically populating this field with the appropriate user ID value, you can ensure that the notification is delivered to the intended recipient.
Title: The Title field enables you to provide a concise a title for your in-app notification. This field supports dynamic content, allowing you to personalise the title based on user-specific information or contextual data.
Message: The Message field allows you to compose the main body of the in-app notification. It provides an opportunity to deliver detailed information, instructions, or any other relevant content to the user. By utilising dynamic content, you can personalise the message based on user-specific data or contextual information.
In the ComUnity Toolkit, an event represents any significant occurrence or change within the system that warrants attention. Events are integral to maintaining system integrity, monitoring performance, and ensuring a responsive user experience. The scope of events in the ComUnity Toolkit includes, but is not limited to:
Platform Events: These are critical to the overall health and performance of the platform. Examples include system outages, resource limits being reached (e.g., disk space, memory usage), and critical errors.
Organisation Events: Events related to specific organisational activities, such as user management actions, role assignments, and organisational policy updates.
Project Events: These events pertain to project-specific activities, such as creation, updates, and deletions of projects, task assignments, and status changes.
Toolkit Events: These involve actions within the Toolkit itself, such as updates to Toolkit configurations, new feature deployments, and user feedback logs.
Unknown Events: Events that do not fall into the predefined categories, which may need further classification.
Accessing Events
Notification Panel:
Click on the bell icon located in the top-right corner of the dashboard to access the notification panel.
The notification panel displays the latest notifications, categorised by their severity (low, medium, high, critical).
Events Page:
To view all events, click on the Show all events
link at the bottom of the notification panel. This will take you to the comprehensive events management page.\
Filtering Events:
Use the left sidebar to filter events by Importance
, Date Range
, Status
, and Categories
.
Importance levels include: High, Medium, Low, and Critical.
Date ranges can be set to view events from the last day, week, month, or a custom range.
Status filters allow you to view events that are New
, In Process
, or Processed
.
Categories help in narrowing down events specific to Organisation, Platform, Project, Toolkit, or Unknown.
Managing Events:
Events can be marked as read or unread by clicking on the three dots menu in the top-right corner of each event.
Change the status of events to reflect their current processing state (New, In Process, Processed).
Use the search bar to find specific events quickly.
Expand or collapse event details to view more information about each event.
\
There are two ways to access notification settings:
Via Events Page:
On the events management page, click on the Notification Settings link at the bottom left.
Via Profile Menu:
Navigate to Account > Profile > Notification Settings from the main dashboard.
Notification Settings Interface:
The notification settings interface allows users to control what types of notifications they receive and how they receive them. Users can toggle notifications on or off for different categories of events.
Notification Categories:
Organisation Events: Includes notifications for user management, security, and access.
Platform Events: Includes notifications for services and infrastructure.
Project Events: Includes notifications for version control, storage, security events and alerts, performance and response times, monitoring and logs, integration failures, infrastructure, and error events (compilation and runtime exceptions).
Severity Levels
Notifications are colour-coded based on their severity to help prioritize actions:
Low: Informational notifications that do not require immediate attention.
Medium: Notifications indicating actions that should be monitored.
High: Notifications requiring prompt attention to prevent potential issues.
Critical: Urgent notifications that need immediate action to prevent system failures or significant problems.
Events are logged in the system and notifications are generated based on user roles and subscriptions.
The system automatically categorises events and dispatches notifications to relevant users, ensuring that all critical activities are monitored and addressed promptly.
The ComUnity Toolkit's events and notifications management system provides a robust framework for monitoring and responding to significant occurrences within the platform. By utilising the filtering and management capabilities, developers can maintain a high level of system awareness and ensure timely responses to critical events. For further assistance or to report issues, please contact the support team.
appName
String
Config.AppName()
eventName
String
A unique name of your event defined under Configuration -> Communication Services
payload
JSON
Use the ComsServices.JsonSerialize()
function to serialise the current instance of your class into JSON
url
String
Config.ComsService()
userName
String
Config.UserName()
password
String
Config.Password()
To trigger the Communication Service, follow these steps:
Open your project and navigate to Data.
Select Diagram or List to view your Data Model.
Locate and select the entity for which you want to configure communications. In a Diagram view, click on the entity's header section with a grey background colour. An active entity is identified by a blue border, and none of its entity fields are active (active entity fields have a blue background colour).
This action will open a properties dialog that displays the entity's global properties.
Now, you need to identify and select a change interceptor to initiate the ComsService.Trigger()
function. If the custom code has already been auto-generated, you can proceed with selecting an appropriate change interceptor. However, if the custom code hasn't been auto-generated, you have the option to define your own partial class. Within this class, you can invoke the ComsService.Trigger()
function using the interceptor of your choice as shown(check line 66 in the code block below):
After triggering the Communication Service by adding the code to invoke the ComsService.Trigger()
function, the next step is to configure the event action and templates.
The function has six required arguments which are outlined in the table below:
Within the properties dialog, locate Custom Code you can expand the text editor by clicking on the icon.
To an an Integration in a selected project, follow these steps:
Open your project in the Toolkit and navigate to the Integrations section. Here, you will find a list of all existing integrations in your project if any exist.
To add an integration click, Add an integration.
An Add Integration modal will appear, add a unique name of your Integration in the Integration Name box.
Select an integration type from the Integration Type dropdown menu, currently there is only one supported integration type which is OpenAPI/Swagger.
Copy and paste the Open API specification of your external integration/web service in MetaData.
Click Create
The ComUnity Toolkit will automatically generate the definition of the proxy class for your integration based on the Open API specification you provided. However, if there are any errors during the parsing process of the Open API specification, these errors will be displayed.
It's essential to ensure that the Open API specification is correctly formatted to avoid errors during the parsing process. By checking the specification before submitting it to the ComUnity Toolkit, you can avoid potential issues and ensure that your integration is generated accurately.
An integration generates a proxy class from an specification for an external service, providing pre-built methods that encapsulate the details of interacting with the service. This saves time and effort in writing integration code manually, allowing you to focus on high-level integration logic. You can implement the proxy class directly in your data model, simplifying the integration process, improving code maintainability, and leveraging your existing data infrastructure.
Observability feature offers a comprehensive suite of tools designed to enhance visibility and insight across your application's performance and usage. With a focus on user-friendliness, the standout aspect of our observability suite is its ease of setup—every feature can be enabled with just a click of a button, streamlining the integration of advanced monitoring capabilities into your workflow.
The Toolkit's observability feature is designed to be environment-specific, necessitating its activation within each distinct deployment environment of your project. Follow these general steps to enable observability for your project's environment:
Log In: Access the Toolkit by entering your credentials.
Open Your Project: Locate and select your project within the Toolkit.
Navigate to Observability: From the main menu, find and click on "Observability". You will be presented with instructions for enabling observability within your project.
Access Environment Settings: Go to the Environmental Setting and select the Observability page to proceed with the setup.
Activate Observability: Click the "Create Page Analytics Configuration" button. This initiates a background process to enable observability; wait until this process completes.
Explore Observability Data: After activation, you can access detailed information regarding observability in your deployment environment. This includes tabs like "Client Analytics" "Metrics" and "Traces" each offering specific insights.
Access Dashboards: To view your observability dashboards, use the main navigation to select "Observability." The default view will be "Client Analytics," but you can switch to "Metrics" or "Traces" to view their respective dashboards.
These steps ensure that you can effectively enable and utilise the observability features within your project, allowing you to monitor and analyse various aspects of your application's performance and user interactions across different deployment environments.
: Gain valuable insights into how your end-users interact with your application. Track user engagement, feature usage, and more to make informed decisions about future developments and enhancements.
: Access a wide array of metrics that provide real-time data on the performance and health of your application. This feature allows you to monitor system behaviour, resource utilisation, and operational efficiency, enabling proactive issue resolution and optimisation.
: Dive deep into your application's processes with detailed traces that help you understand request flows, identify bottlenecks, and pinpoint areas for improvement. Tracing provides a granular view of your application's operation, from high-level overviews to detailed, step-by-step execution paths.
The Azure Function Apps integration allows teams to extend their Toolkit applications by incorporating event-driven, serverless functions. This integration offers an easy way to introduce custom logic, automate workflows, and connect external services without the need for complex infrastructure management. Designed for flexibility and scalability, this feature empowers teams to enhance their applications with minimal effort.
Key Features:
Event-Driven Logic: Implement functions that automatically execute in response to specific triggers, such as data changes, scheduled jobs, or external events. This capability allows you to integrate dynamic functionality without worrying about manual execution or monitoring.
Automated Management: Once integrated, the Toolkit handles the deployment, scaling, and monitoring of your Azure Function Apps. You don’t need to manually manage the Azure infrastructure—focus on your app’s functionality while the platform ensures smooth operations.
Custom Workflows: Create and manage workflows directly within your Toolkit applications. Whether automating routine tasks or processing complex data flows, the platform seamlessly integrates with Azure Function Apps, providing the flexibility to handle diverse requirements.
Scalable Architecture: The platform automatically leverages Azure’s auto-scaling features to maintain optimal performance under varying workloads. Your applications can handle spikes in demand without requiring manual intervention or additional configurations.
Function Apps in the Toolkit are controlled through role-based access (RBA), allowing only authorised roles to create, manage, or deploy functions. Users without the required permissions will be restricted from accessing these features. As with all primary features in the Toolkit, Function Apps require activation in each environment to match the specific deployment contexts of your project.
Log In: Access the Toolkit by entering your credentials.
Open Your Project: Locate and select your project within the Toolkit.
Navigate to Azure function apps: From the main menu, find and click on " Azure function apps". You will be presented with instructions for setting up and managing Function Apps in your project environment. If any function apps already exist, you will see them listed on this screen. For each function app, essential details are displayed, including the function app's name, its URL, and its current status.
Viewing Details and Status
Each function app listed on this screen displays its name, associated URL, and current status, such as "Active Function App." You can click View Details to expand and see more information about the selected function app.\
Click "Create a Function App" to open the Create an Azure Function App modal. In the modal, enter the name of your function app in the Name field, select the appropriate runtime from the Runtime Stack field, and then choose the version from the Version field.\
Click "Create Function App" to trigger the background process. Once complete, your newly created function app will appear on the Azure Function Apps screen.
Click "Publish Changes" to deploy your function app.
Include Only Essential Application Files: Ensure that your package contains the core function code and necessary configuration files.
Exclude Unnecessary Files and Dependencies: Avoid packaging large directories like dependency folders or other artifacts, as the deployment process will handle dependencies automatically.
Keep the Package Lightweight: Focus on including only essential files to reduce upload times and minimise potential deployment issues.
After following these steps, compress the folder into a .zip
file for upload into the Toolkit.
To manage your function app, click the three-dot button (⋮) next to the function app's name. This will open a menu with the following options:
Edit Function App Details: Modify the function app's settings, including uploading a new .zip
file containing your Azure Function App application package. This option is essential for updating the function app or applying changes to its core functionality.
Delete Function App: Permanently removes the function app from the platform. Be cautious when using this option, as it cannot be undone.
By utilising these features, you can effectively manage your Azure Function Apps, ensuring they are correctly configured and functioning as intended within your project. The Edit Function App Settings option, in particular, allows for precise control over the environmental variables, enabling you to customise how your function app operates across various environments.
Azure Logic Apps enable you to automate workflows and integrate applications, data, and services across systems. The ComUnity Developer Toolkit simplifies the management of Logic Apps within your projects, providing tools to create, configure, and link Logic Apps seamlessly.
Azure Logic Apps are ideal for:
Event-Driven Automation: Automatically perform actions (e.g., send an email, trigger a webhook) based on events like database updates or HTTP requests.
Scheduled Tasks: Set up workflows that run on specific schedules (e.g., daily reports, periodic data syncing).
Seamless Integration: Connect to over 400 Azure and third-party services (e.g., Office 365, Salesforce, APIs).
Low-Code Workflows: Build workflows visually using a drag-and-drop designer, minimising the need for extensive programming.
Azure Logic Apps allow you to automate workflows and integrate services with minimal effort. This guide walks you through the steps to set up Azure Logic Apps in the ComUnity Developer Toolkit, enabling streamlined automation and integration directly within your project.
To setup Azure logic apps in your project follow the instructions below:
Log In: Access the Toolkit by entering your credentials.
Open Your Project: Locate and select your project within the Toolkit.
Access Azure Logic Apps: In the sidebar, expand the Third Party Services section and click on the Azure Logic Apps tab to begin the setup process. A list of existing Logic Apps in your project, if any, will be displayed on this screen.
Click Create an Azure Logic app button, a pop-up window will appear with the heading Create an Azure Logic App. You will see a single input field labeled Azure Logic App Name, enter a unique name for your Logic App in the field (e.g., MyLogicApp).
Once created, the Logic App will appear in the screen with the following details:
Azure Name: The name of the Logic App.
Endpoint: URL: Use this URL to test and confirm that your Logic App is correctly configured. Copy and paste it into your browser to access the newly created workflow.
Azure Resource ID: The unique identifier for the resource in Azure.
Azure Resource Group: The resource group where the Logic App resides.
Created: The date the Logic App was created.
The ComUnity Developer Toolkit provides several options for managing your Logic Apps efficiently. From accessing detailed configurations in the Azure Portal to refreshing endpoints or removing unused Logic Apps, these tools give you full control over your workflows. Use the features below to ensure your Logic Apps remain up-to-date and optimised for your project’s needs.
Select the ellipsis (...) next to the Logic App and click View in Azure Portal.
This redirects you to the Azure Portal where you can edit the workflow, add triggers, and configure actions.
Ensure you have sufficient permissions (e.g., Logic App Contributor) to access and manage resources in Azure. If you encounter a “No Access” error, contact your Azure administrator.
If your Logic App has a trigger with a URL (e.g., HTTP trigger), click Refresh Endpoint to fetch and display the latest endpoint URL in the toolkit.
• Use the ellipsis menu to delete an existing Logic App if it’s no longer required.
In this section, you will learn how to enhance user engagement by leveraging in-app notifications. These notifications provide a convenient way to deliver important updates, alerts, or personalised messages directly within your application. By customising the content and behavior of these notifications, you can create seamless and interactive user experiences. Let's explore the dynamic fields available for customisation within in-app notifications:
User ID: The User ID field enables you to specify the recipient of the in-app notification. It corresponds to the user ID property in the @Model.EventData namespace. By dynamically populating this field with the appropriate user ID value, you can ensure that the notification is delivered to the intended recipient.
Title: The Title field enables you to provide a concise a title for your in-app notification. This field supports dynamic content, allowing you to personalise the title based on user-specific information or contextual data.
Action: This field specifies the URL of the page which the recipient of the in-app notification is redirected to when clicking a notification.
Message: The Message field allows you to compose the main body of the in-app notification. It provides an opportunity to deliver detailed information, instructions, or any other relevant content to the user. By utilising dynamic content, you can personalise the message based on user-specific data or contextual information.
For further details on setting up and configuring Azure Function Apps within the Toolkit, refer to the official .
Before integrating your function app, ensure that it is properly built and prepared for upload. This includes following the appropriate steps to package the function app according to the Azure specification. For more details, refer to the section.
Next, click the three-dot button (⋮) next to the function app you created in the previous step, then select View Details from the dropdown menu. This will expand the function app to show further details. From here, choose Edit Function App Details to upload a .zip
file containing your Azure Function App application package. Refer to the section for additional guidance.\
To ensure your function app is ready for deployment, follow the suitable for your runtime, paying special attention to the following:
Edit Function App Settings: Configure environmental variables that will be injected into the function app’s runtime on Azure. This is crucial for setting up the app’s environment-specific configurations, ensuring that it runs correctly within different deployment contexts.For more details on managing your project's settings across all environments, refer to the section. To align your setup with Azure’s best practices, and for additional guidance on configuring environmental variables, refer to the official .\
For in-depth details about Azure Logic Apps’ capabilities, visit the .
For a complete overview of connectors and use cases, refer to the .
Request Template: This setting allows you to define a custom request template in-app notification. A default request template for in-app notifications is specified in .
SMS and WhatsApp are powerful communication channels that enable you to reach your audience instantly and directly. However, before using SMS and WhatsApp in your communication strategy, there are important considerations to keep in mind. These channels require pre-configuration according to the specifications and requirements of the respective service providers.
It's crucial to familiarise yourself with the specific guidelines and restrictions set by the SMS and WhatsApp service providers you plan to use. Each provider may have different requirements regarding message formatting, character limits, opt-in/opt-out mechanisms, and other compliance-related aspects. By adhering to these specifications, you can ensure the successful delivery of your messages and maintain a positive user experience.
Once you have understood and implemented the necessary configurations for SMS and WhatsApp, you can leverage these channels to create dynamic templates and deliver personalised and engaging messages. Let's explore the dynamic fields available for customisation within SMS & Whatsapp:
Cellphone Number: The Cellphone Number field allows you to dynamically populate the recipient's phone number. By leveraging this field, you can ensure that each message is delivered to the intended recipient, providing a seamless and personalised experience.
Message: The Message field is where you can define the content of your SMS or WhatsApp message. This field supports dynamic content, enabling you to personalise the message based on recipient-specific information or incorporate variables to create dynamic and engaging content.
By utilising these dynamic fields, you can create tailored SMS and WhatsApp messages that resonate with your audience, deliver important information, and foster meaningful communication.
Detailed Insight: Obtain a granular view of your application's transactions and workflows. Tracing allows you to follow individual requests as they travel through your application, providing visibility into the lifecycle of each request and how different components interact.
Performance Optimisation: Identify performance bottlenecks and inefficiencies within your application. By visualising the flow and duration of requests, you can pinpoint areas where latency occurs, enabling targeted optimisations to improve overall performance.
Error Identification and Troubleshooting: Quickly detect and diagnose issues within your application. The traces dashboard highlights errors and exceptions, allowing you to trace them back to their source, understand the context, and resolve issues more efficiently.
Root Cause Analysis: Delve into the specifics of any issue or anomaly in your application. Tracing provides the detailed context necessary for comprehensive root cause analysis, helping you understand not just what went wrong, but why.
Collaboration and Communication: Share insights and findings with your team. The dashboard's visual representations and detailed trace data facilitate clearer communication, enabling teams to collaborate effectively on diagnosing and resolving issues.
To fully utilise the Traces dashboard for your project, please adhere to the following instructions:
Access the Dashboard: Once observability is enabled, navigate to the "Observability" tab. Here, select the "Traces" tab. You will then be presented with the Traces dashboard, which provides a comprehensive view of your project's trace data.
Once APIs are registered in the Toolkit, they are automatically synchronised with Azure API Management, where developers can configure API operations such as request handling and transformations. The Toolkit serves as the central interface for managing API definitions, while API operations are set up in Azure API Gateway.
This API management feature is available for single-tenant environments, where organisations manage their own Azure subscription. Shared environment users do not have access to this functionality due to Azure subscription constraints.
API Creation & Management: Developers can define APIs within the Toolkit, which are then registered in Azure API Management. Supported API types:
Custom HTTP API – Manually configured endpoints.
OData API – Supports structured OData queries.
OpenAPI – Allows importing OpenAPI specifications.
GraphQL API – Supports GraphQL-based queries.
APIs can be created using either: A Service URL (endpoint-based configuration). A Definition Link (importing OpenAPI/OData specifications).
Seamless Integration with Azure API Management: APIs registered via the Toolkit are automatically created in Azure API Gateway. The Toolkit UI provides a synchronisation feature to retrieve API operations from Azure. Built-in security policies, such as OAuth2 and JWT authentication, are applied through Azure APIM. API analytics and monitoring are available in Azure API Insights.
Deployment & Environment Considerations Only available for single-tenant environments, where the organisation manages its own Azure subscription. API deployment and mirroring into QA and Production environments are still under development. Shared environment users cannot access API Management features due to Azure subscription constraints.
APIs management is particularly useful when:
Integrating External Services: If your application needs to communicate with external APIs securely and efficiently.
Centralising API Security & Access Control: By leveraging Azure’s security policies, developers can manage authentication, authorisation, and traffic control without implementing custom security layers.
Enhancing Performance & Scalability: API Management enables caching, request throttling, and rate limiting, ensuring optimal performance under high load.
Monitoring & Logging API Traffic: Developers can track API usage, detect anomalies, and gain insights through Azure APIM’s built-in monitoring tools.
Managing API Versions & Lifecycle: The Toolkit enables versioning and gradual rollouts of API changes, minimising disruptions for consumers. For further insights, explore Azure API Management Use Cases.
Creating an API: Navigate to API Management in the Toolkit. Click "Add New API" and select the API type. Provide either a Service URL (for manual configuration) or a Definition Link (for OpenAPI/OData imports). Define the API name, description, and version. Click Save & Register API – the API is now created in Azure API Management.
Configuring API Operations: API operations must be configured via the Azure API Management Portal: Open Azure API Management Portal. Locate the API created by the Toolkit. Define operations, authentication, and response configurations. Save and publish changes. Return to the Toolkit and click "Synchronise API Operations" to fetch updates from Azure.
Testing & Deployment: Developers can use mock services in the Toolkit to validate API behaviour. API calls are logged in Azure API Insights for debugging and performance monitoring. Future updates will introduce automated deployment pipelines for QA and Production environments.
Creating a Virtual Entity – Developers can define Virtual Entities to represent external API resources. During setup, the Toolkit automatically generates the Entity Class, Controller Class, and Controller Sample Code, which are stored under Custom Classes.
Extending APIs with Custom Classes – The Controller Class can be modified to implement custom business logic, allowing APIs to be structured and managed efficiently. Custom Classes provide a flexible way to encapsulate API-related operations.
Deploying Extended API Features – Once custom logic is implemented, the API can be deployed and made available to consumers. API updates can be versioned and synchronised with Azure API Management for ongoing maintenance and improvements.
The ComUnity Developer Toolkit offers tracing capabilities through the integration of and , providing a robust and user-friendly interface for monitoring and troubleshooting your projects. This integration provides a rich set of features to enhance your observability strategy, particularly in identifying and resolving issues efficiently.
Enable Observability: Activate the observability feature in your project. For detailed instructions on enabling observability within the Toolkit, refer to the guide.
The Toolkit’s API management feature enables organisations to connect to third-party services by integrating with . The Toolkit provides a structured way to register and configure APIs, eliminating the need for direct configuration in Azure while ensuring seamless integration with APIM.
After integration, the Toolkit allows organisations to expose APIs using Virtual Entities and . These features provide a structured approach to defining how APIs are accessed and interacted with, ensuring clear separation of concerns and enabling controlled API consumption.
For more details on Azure API Management, refer to the .
API Management in the Toolkit extends beyond simple configurations—it allows developers to expose APIs using and . These features provide a structured way to interact with API endpoints while maintaining separation of concerns. For detailed instructions, refer to the Virtual Entities & Custom Classes documentation.
For more information, refer to the & documentation.
Try it out 💡 Learn how to use Virtual Entities by following this step-by-step tutorial:
The ComUnity Platform's metrics functionality is a crucial component for monitoring your project's performance, providing an in-depth view of various operational aspects through the Metrics dashboard. This dashboard presents critical data points and trends that are vital for maintaining and optimising your project's health and performance.
Comprehensive Performance Monitoring: Gain insights into key performance indicators such as server response times, enabling you to detect and address performance issues proactively.
Informed Decision-Making: Leverage detailed metrics to make informed decisions, ensuring your project's resources are optimised for peak performance.
Enhanced System Reliability: Monitor system health and performance trends over time, aiding in the prevention of potential issues and ensuring system stability.
Server Response Time: This graph provides a real-time view of your server's response times, helping you identify trends and potential performance bottlenecks.
Concurrent Responses: Monitor the number of concurrent responses your server is handling to understand the load and performance under various conditions.
Accumulative Users: Track the growth of user engagement by viewing the cumulative number of users interacting with your project over time.
Requests per Day (7 Days): Analyse the daily request volume over a week to identify usage patterns, peak times, and potential stress points on your infrastructure.
Enable Observability: First, ensure that the observability feature is active for your project. Consult the Observability Integration guide for instructions on enabling this feature.
Navigate to the Dashboard: With observability enabled, access the "Metrics" tab in the Observability section. The Metrics dashboard will automatically display, offering a detailed overview of your project's key performance metrics.
This functionality is available for single-tenant environments, where organisations manage their own Azure subscription. Users in shared environments do not have access to this feature due to Azure subscription constraints.
The integration is currently in development, with the ability to create a Fabric Mirror in the development environment. Future updates will extend this functionality to Quality Assurance (QA) and Production environment.
Fabric Mirror Creation The Toolkit enables the creation of a Fabric Mirror, which is a replica of the source database. This mirror allows:
Replication of all tables or selective tables.
Automatic synchronisation when new tables are added in the source database (if full replication is chosen).
Manual synchronisation if only selective tables are mirrored.
Deployment Environment Management The Toolkit supports three deployment environments, but currently, Microsoft Fabric is only available in the Development environment:
Development environment (currently functional, with Fabric support)
Quality Assurance (QA) environment (in progress, Fabric support planned)
Production environment (planned, Fabric support pending future updates)
Each mirrored database follows a naming convention, typically Env_ProjectName, to maintain consistency.
Data Transformation and Reporting Once the Fabric Mirror is created, further transformations can be performed outside the Toolkit within Microsoft Fabric:
Combining tables for easier reporting
Fetching external data to build enriched datasets
Creating new schemas for specific reporting needs. These transformations make the mirrored data more efficient for analysis and visualisation in reporting tools like Power BI.
Replication Monitoring The Toolkit provides options to:
View replication status
Refresh replication status
Monitor synchronisation progress
If replication is incomplete or delayed, users can check the Fabric environment for more details
Creating a Fabric Mirror in the Toolkit allows users to replicate database tables for use in reporting and data transformation without affecting operational databases.
The process starts by navigating to Third Party Services > Microsoft Fabric within the Toolkit, where existing mirrors are listed. Users can initiate a new mirror by selecting "Create a Fabric mirror" option, providing an optional description, and choosing the tables to replicate.
By default, all existing and future tables are included, but specific selections can be made by unchecking undesired tables. Once the "Create Fabric mirror" button is clicked, the mirroring process begins, with completion time varying based on data size.
After a successful mirror creation, the entry appears in the UI, where users can access additional options via the ellipsis menu. Users can delete a mirror, view replication status, and configure replication settings from this menu. Selecting View in Fabric Portal redirects users to the Microsoft Fabric portal, where the mirror is identified by its assigned name in the Toolkit. To create a Fabric Mirror follow these steps:
Navigate to Third Party Services > Microsoft Fabric in the Toolkit.
Click "Create a Fabric mirror" to open the Fabric Mirror creation dialog.
Provide an optional description for your mirror in the field provided.
By default, all tables in your project, including future tables, are selected since the "Mirror future tables" field is checked.
To select specific tables, uncheck the "Mirror future tables" field then uncheck undesired tables from the list shown.
Click the "Create Fabric Mirror" button to initiate the process.
Processing time depends on the size of the data being mirrored. After successful mirroring, your Fabric Mirror will appear in the UI with its details.
Click the ellipsis (⋮) menu next to your mirror entry, then select “Refresh replication status” to check if the Fabric Mirror has been fully deployed on the Fabric Portal.
Once replication is complete (indicated by a "Last updated" date published in the mirror details), click the ellipsis (⋮) menu and select “View in Fabric Portal” to open the Microsoft Fabric portal and view the mirror.
Since Microsoft Fabric handles data transformation and reporting outside the Toolkit, users are encouraged to refer to Microsoft’s official documentation for detailed guidance on:
The "media" within the ComUnity Platform's Media Services alludes to the diverse range of content types that the platform can handle, enriching the architecture of digital solutions. The Media Services component of the ComUnity Platform offers a robust layer that efficiently processes requests for every content type it supports. This encompasses two main categories: structured and unstructured data.
Structured data transactions leverage the OData protocol, presenting a dual interface comprising an API for data manipulation and a URL-based query domain-specific language (DSL) for information retrieval. This approach ensures:
Data Parsing: Interprets OData requests to determine the appropriate data entities, supporting authorisation and adherence to data governance policies.
Value-Added Processing: Prior to data relay to the business logic layer, the system performs essential processing for optimisation.
Error Handling: Enhances the developer experience by appending diagnostic information to errors for quicker resolution.
Unstructured data, particularly a wide array of file types, is handled with robust capabilities:
Azure Blob Storage Integration: Seamlessly uploads and downloads large files (up to 270 GB), featuring functionalities such as de-duplication, download resumption, and cache management.
HTTP Feature Utilisation: Employs partial GET requests, enabling browsers to manage video playback efficiently when accessing large video files hosted on the platform.
The platform excels in media adaptation and optimisation through:
Image Transformation Pipeline: Utilises a declarative approach for dynamic image processing, which adapts content according to device capabilities to optimise bandwidth and processing requirements.
Caching Mechanism: Improves performance by caching image transformations, minimising CPU usage on subsequent requests.
Delivering a comprehensive icon set handling, the server:
SVG API Utilisation: Offers access to standard icon repositories, including Font Awesome, Noun Project, and Material Design, complete with on-the-fly rasterisation connected to the image transformation pipeline for efficient icon generation.
All files uploaded to the media follow a SHA’s standard file naming convention:
The format of the URL used to retrieve storage resources from a public Media server:
Notes:
Base URL
: this specifies the base url of your project, during development its https://toolkitv3.comunity.me
u
: this segment of the URL denotes the Media Server, it is required.
args
represent various arguments or parameters which are used to define your search.
d
Direct
/u/d/<<SHA File Name>>
f
Friendly
/u/f/<<Friendly File Name>>
icon
Icon
/u/icon/<<RRGGBB>>/<<size>>/<<opacity>>/<<icon_image>>
g
/u/g/<<SHA File Name>>/<<modifier>>
The table below describes the image modifiers supported in the Media Server:
The descriptions in the table below were generated using Chat GPT.
$autoOrient
Auto orient
This modifier is used to automatically adjust the orientation of an image based on its embedded EXIF data. When a photo is taken, the camera records its orientation in the image's metadata. However, some image editors or viewers may not properly handle this information, causing the image to appear rotated incorrectly. The $autoOrient
modifier automatically reads the orientation data and rotates the image accordingly. This can be especially useful when dealing with images uploaded from mobile devices or cameras with rotating sensors
$blur/
<<radius>>/<<sigma>>
Blur
This modifier applies a Gaussian blur to the image, which can be used to reduce noise or soften details. The <<radius>>
parameter specifies the radius of the blur kernel, and the <<sigma>>
parameter controls the standard deviation of the Gaussian distribution. A larger <<radius>>
value will result in a more blurry image, while a larger <<sigma>>
value will result in a smoother transition between pixels. The $blur
modifier can be used in combination with other modifiers to achieve various effects, such as creating a shallow depth of field or simulating motion blur.
$border/<<width>>/<<height>>/<<colour>>
Border
This modifier adds a border of a specified width and height around the image, with a specified color. The <<width>>
and <<height>>
parameters specify the size of the border, and the <<colour>>
parameter specifies the colour of the border. The <<colour>>
parameter can be specified using a variety of formats, including hexadecimal values (e.g. #FF0000), RGB values (e.g. rgb(255,0,0)), or color names (e.g. red). The $border
modifier can be used to add visual separation between an image and its surroundings or to create a frame around an image.
$charcoal/<<
factor>>
Charcoal
The $charcoal/<<factor>>
modifier applies a charcoal-like effect to the image, simulating the appearance of a charcoal sketch. The <<factor>>
parameter controls the intensity of the effect, with higher values producing more pronounced results. This effect works by simulating the appearance of charcoal on paper, emphasising the edges and contours of the image while reducing the amount of detail and texture. This can be useful for creating artistic or stylized versions of photographs or illustrations. The $charcoal
modifier can be combined with other modifiers, such as resizing or cropping, to achieve various effects.
$colorize/<<red>>/
<<green>>/<<blue>>
Colorize
This modifier applies a colour tint to the image, changing the colour balance of the image by blending the original colours with the specified tint. The <<red>>
, <<green>>
, and <<blue>>
parameters specify the intensity of the red, green, and blue colour channels respectively, ranging from 0 to 255. Setting all three values to 0 will result in a grayscale image, while setting them all to 255 will result in a fully saturated tint. The $colorize
modifier can be used to add a coloured effect to an image, such as a sepia tone or a blueish tint. This modifier can also be used in combination with other modifiers, such as resizing or cropping, to achieve various effects.
$contrast/<<+-multiplier>>
Contrast
This modifier modifier adjusts the contrast of the image by multiplying the pixel values by a specified factor. The <<+-multiplier>>
parameter can be a positive or negative floating point value, with values greater than 1 increasing the contrast and values between 0 and 1 decreasing the contrast. Negative values will invert the image, effectively swapping the light and dark areas. This modifier can be used to adjust the overall brightness and contrast of an image, bringing out details or emphasizing certain areas. It can also be used in combination with other modifiers, such as resizing or cropping, to achieve various effects.
$crop/<<x>>/<<y>>
Crop
The $crop/<<x>>/<<y>>
modifier crops the image to a specified size by removing portions of the image outside the specified region. The <<x>>
and <<y>>
parameters specify the dimensions of the cropped image in pixels, with <<x>>
representing the width and <<y>>
representing the height. The $crop
modifier can be used to remove unwanted portions of an image or to create a thumbnail of a larger image. When used in combination with other modifiers, such as resizing or rotation, the $crop
modifier can be used to achieve various effects. It is also possible to specify the position of the crop area using additional parameters, such as $crop/<<x>>/<<y>>/<<width>>/<<height>>
, where <<width>>
and <<height>>
represent the dimensions of the crop area and <<x>>
and <<y>>
represent the position of the top-left corner of the crop area.
$drawText/<<x>>/<<y>>/<<text>>/<<colour>>/<<fontSize>>
Draw Text
This modifier adds text to the image at a specified position. The <<x>>
and <<y>>
parameters specify the coordinates of the top-left corner of the text box in pixels. The <<text>>
parameter specifies the text to be added to the image. The <<colour>>
parameter specifies the color of the text, which can be specified using a variety of formats, including hexadecimal values, RGB values, or color names. The <<fontSize>>
parameter specifies the size of the text in points.
The $drawText
modifier can be used to add titles, captions, watermarks, or other textual elements to images. The position of the text can be adjusted using different values for <<x>>
and <<y>>
, and the appearance of the text can be customized by changing the values of the <<colour>>
and <<fontSize>>
parameters. The $drawText
modifier also supports additional parameters for adjusting the font, style, and alignment of the text.
$enhance
Enhance
The $enhance
modifier applies an image enhancement algorithm to the image, improving the overall clarity and detail of the image. This modifier works by analyzing the image and adjusting the brightness, contrast, and sharpness of the image to bring out more detail and reduce noise. The $enhance
modifier can be used to improve the quality of photographs or other images that may be slightly blurry or lacking in detail. It can also be used in combination with other modifiers, such as resizing or cropping, to achieve various effects.
$equalize
Equalize
The $equalize
modifier applies histogram equalization to the image, adjusting the distribution of pixel values to improve the contrast and visibility of details in the image. This modifier works by mapping the pixel values of the image to a new set of values that are more evenly distributed across the available range. The result is an image with improved contrast and brightness, with details that may have been difficult to discern in the original image now more visible.
The $equalize
modifier can be used to improve the visibility and clarity of images that may have been poorly exposed or have uneven lighting. It can also be used in combination with other modifiers, such as resizing or cropping, to achieve various effects. However, it should be noted that the application of this modifier can sometimes lead to an exaggerated or unnatural appearance in some images, and may not always be suitable for every use case.
$flatten
Flatten
The $flatten
modifier merges all layers of the image into a single layer, resulting in a flattened image. This modifier is useful when working with images that have multiple layers, such as those that have been created in image editing software, or when combining multiple images into a single image.
When multiple layers are present in an image, each layer can contain different visual elements, such as text, graphics, or effects. The $flatten
modifier removes these layers and combines all the visual elements into a single layer, resulting in a simplified image that can be used for various purposes.
It should be noted that applying the $flatten
modifier is a destructive operation, as it permanently removes the separate layers from the image. It is therefore important to create a backup copy of the original image before using this modifier.
$flip
Flip Vertically
The $flip
modifier flips the image horizontally along the vertical axis, effectively creating a mirror image of the original image. This modifier is useful when working with images that need to be reversed or mirrored, such as when creating reflections or simulating a flipped object.
When applied, the $flip
modifier changes the orientation of the image, effectively flipping it from left to right. This can be used to create a symmetrical effect or to correct the orientation of an image that may have been scanned or captured in an inverted or mirrored state.
It is important to note that the $flip
modifier is a non-destructive operation, meaning that the original image is not modified in any way. Instead, a new image is created with the flipped orientation.
$flop
Flip Horizontally
The $flop
modifier flips the image vertically along the horizontal axis, effectively creating an upside-down version of the original image. This modifier is useful when working with images that need to be reversed or mirrored, such as when creating reflections or simulating a flipped object.
When applied, the $flop
modifier changes the orientation of the image, effectively flipping it from top to bottom. This can be used to create a symmetrical effect or to correct the orientation of an image that may have been scanned or captured in an inverted or mirrored state.
It is important to note that the $flop
modifier is a non-destructive operation, meaning that the original image is not modified in any way. Instead, a new image is created with the flipped orientation.
$normalize
Normalise
The $normalize
modifier applies a normalization algorithm to the image, adjusting the contrast and brightness of the image so that the full range of pixel values is utilized. This modifier is useful for images that have uneven lighting or contrast, or images that have been poorly exposed.
When applied, the $normalize
modifier analyzes the distribution of pixel values in the image and adjusts them so that the darkest pixels are set to black, and the brightest pixels are set to white, with all other pixel values adjusted proportionally in between. This results in an image with improved contrast and brightness, with details that may have been difficult to discern in the original image now more visible.
The $normalize
modifier can be used to improve the visibility and clarity of images that may have been poorly exposed or have uneven lighting. It can also be used in combination with other modifiers, such as resizing or cropping, to achieve various effects.
$oil/<<radius>>
Oil painting
The $oil
modifier applies an oil painting effect to the image, simulating the appearance of an oil painting by applying a brushstroke-like texture to the image. This modifier is useful for adding a creative effect to photographs or other images.
When applied, the $oil
modifier analyzes the image and applies a filter that simulates the appearance of brushstrokes. The level of detail in the brushstrokes is controlled by the radius
parameter, with larger values resulting in a more pronounced effect.
It is important to note that the $oil
modifier is a non-destructive operation, meaning that the original image is not modified in any way. Instead, a new image is created with the oil painting effect applied. Additionally, it should be noted that the $oil
modifier may not be suitable for all types of images, and may produce better results on certain types of images, such as landscapes or portraits.
$resize/<<width>>/<<height>>/
<<options>>
Resize
m – maintain aspect ratio but width and height are minimum
! – exact size p – size in percentage a – maximum area in pixels of an image g – change dimensions only if width or height exceeds s – resizes only if both dimension are less
$rotate/<<colour>>/<<degrees>>
Rotate
The $rotate
modifier rotates the image by a specified number of degrees, with an optional background color for the empty space created by the rotation. This modifier is useful for adjusting the orientation of images that may have been taken at an angle, or for creating special effects with rotated images.
When applied, the $rotate
modifier rotates the image by the specified number of degrees, either clockwise or counterclockwise. The background color parameter specifies the color to use for the empty space created by the rotation, if any. If no background color is specified, the empty space is filled with transparency.
The $rotate
modifier can be used to adjust the orientation of images that may have been taken at an angle, or to create special effects with rotated images. For example, rotating an image by 45 degrees and applying other modifiers, such as resizing or cropping, can create a unique and interesting visual effect.
It is important to note that rotating an image can result in loss of quality or detail, particularly if the rotation angle is large. It is therefore recommended to use the $rotate
modifier judiciously and to carefully consider the desired output before applying it.
$sepia
Sepia
The $sepia
modifier applies a sepia tone effect to the image, giving it an aged, vintage look. This modifier is useful for adding a nostalgic or artistic effect to photographs or other images.
When applied, the $sepia
modifier converts the image to a sepia tone by reducing the saturation of the image and applying a brownish-yellow color cast. The amount of sepia tone applied can be adjusted by changing the intensity of the effect.
$thumb/<<size>>
Thumbnail
The $thumb
modifier creates a thumbnail image of the original image with a specified maximum size. This modifier is useful for creating smaller versions of images for use on websites or in documents.
$type/<<type>>
Type
<<type>> - Bilevel Grayscale (default) Palette PaletteMatte TrueColor TrueColorMatte ColorSeparation ColorSeparationMatte Optimize
colour
Named colour, e.g. red 0xRGB, hex numbers 0xRRGGBB, 8 bits each 0xRRGGBBAA, 8 bits each
gravity
NorthWest, North, NorthEast, West, Center, East, SouthWest, South, or SouthEast
options
m – maintain aspect ratio but width and height are minimum ! – exact size p – size in percentage a – maximum area in pixels of an image g – change dimensions only if width or height exceeds s – resizes only if both dimension are less
type
Bilevel Grayscale (default) Palette PaletteMatte TrueColor TrueColorMatte ColorSeparation ColorSeparationMatte Optimize
The Toolkit provides native support for OData services, allowing developers to expose data via Virtual Entities, configure access control, and surface external data in the application using standard screen controls.
This tutorial guides you through registering the Bookings API, defining a data model, and building a screen to display booking records using a dynamic list.
By the end of this tutorial, you will be able to:
Register an internal OData 4.0 API in the ComUnity Developer Toolkit
Define a Virtual Entity that models booking data from the API
Configure role-based access to surface data to authorised users
Display booking records using a dynamic list in the UI
Enable click-to-navigate from list items to a booking detail screen
The Bookings OData API exposes a single entity type: Booking. It is defined under the namespace ComUnity.Samples.Data.Models, and available via the Bookings entity set.
Each Booking entity includes the following properties:
BookingId (Int32): The unique identifier for the booking
Description (String): A short description of the booking
BookingDate (DateTime): The scheduled date and time
Created (DateTime): When the booking was created
Modified (DateTime): When the booking was last modified
IsDeleted (Boolean): Indicates if the booking has been soft-deleted
Access Requirements
Access Requirements
A ComUnity user account with the necessary permissions (contact ComUnity Support if required).
A single-tenant environment is required for API integration (organisations must host their own instance of the Toolkit in Azure).
If a single-tenant instance is unavailable, users can request access to the shared ComUnity Platform environment (API management is not supported in this environment).
Technical Knowledge
C# programming skills
Development Tools
Visual Studio 2022
Access to the ComUnity Developer Toolkit
Project Setup Before proceeding with the API integration, ensure that you have:
Created a project using the Smart City sample or similar.
Successfully built and launched the project.
Registered a user account and signed in to the web app.
Read the official Azure API Management(APIM) documentation Import an OData API to understand the fundamentals OData API integration on the Azure platform.
In the Toolkit, navigate to Third Party Services > APIs.
Click Add an Azure API button.
Provide a name (e.g., “Bookings API”) and optional description.
Select the API definition type as OData.
In the Provide Service URL field, enter:
In the Definition Link field, enter the base OData endpoint for the Bookings service:
Click Add Azure API to your project button to register the API on Azure.
Once registered, click the ellipsis (⋮) next to the API and select Fetch operations from Azure to load the available OData entity sets.
After the API is registered, click the ellipsis (⋮) button next to the API in the Toolkit and select View in Azure Portal.
You will be redirected to Azure API Management (APIM).
Locate your newly created API under APIs (use the search function if needed).
Once you select your API, the Entity Sets and Functions tab will open. Click the ellipsis (⋮) next to the Bookings entity set and select Test. You will be redirected to the testing screen. Scroll down and click the Send button to execute the request. This action will fetch all bookings from the Bookings API and display the response data.
Add the following properties to the Booking entity using the correct data types:
BookingId → int
Description → string
BookingDate → datetime
Created → datetime
Modified → datetime
IsDeleted → bool
Go to Custom Classes in the Toolkit. Select the WebApiConfig class and register your Booking Virtual Entity as shown below (line 23):
Update the Booking entity class as shown below:
Update your controller class as shown below, ensure that you also update all your packages on your file:
Build your project after updating your Data model and Custom Classes so as to publish your changes and as well as to confirm that there are no errors in your build, if any exist debug and resolve them before proceeding to the next step.
In this section we will outline how to build the Bookings screen that shows all bookings as a list.
Navigate to Screens in the Toolkit and create a Bookings navigation page.
Set an icon of your choice.
Add a List control to your screen.
Click the List item to activate it.
In the Properties Editor, set the following fields:
Data Path:
Item Title:
Click the Save button to persist your changes.
Launch your project to see your list of the titles of bookings fetched from the JsonPlaceholder API server in the Bookings page.
In this tutorial, we demonstrated how to integrate an internal OData API with the ComUnity Developer Toolkit using a sample service called Bookings. We covered the full workflow: registering the API, defining a Virtual Entity, exposing the data via Custom Classes, and building a user interface that displays booking records and supports navigation to detailed views.
By leveraging the Toolkit’s native support for OData, developers can expose structured external data with minimal overhead, enabling consistent access through the data model and user interface. This approach simplifies integration for well-defined services and provides a strong foundation for building interactive, data-driven applications.
You can further extend this implementation by applying filters, adding sorting and paging, or exploring additional operations if the API supports data modification. Refer to the Toolkit documentation for guidance on building forms, configuring permissions, and implementing more advanced interaction patterns.
The recommended workflow for effective editing and debugging of complex code in your ComUnity Projects is outlined below:
High level proficiency in C# and .NET application development.
The ComUnity Development Toolkit has a default text editor which has limitations when it comes to editing complex codebases. The tools outlined below will offer a better development experience in scenarios where you have to manipulate complex code, download and install them for your operating system.
To download your project from the ComUnity Developer Toolkit to your local development environment, follow these steps:
Go to Configuration > Application
Navigate to the Download Data Service Project section in the Content Area.
Click Create Archive, to create a .zip file of your data service project.
Click the generated archive to download it.
After you finish editing or resolving your bugs in your local environment ensure that the application builds successfully and then copy all the updated files and paste them where it is relevant and then rebuild your project.
In this tutorial, we demonstrate how to configure in-app notifications for user profile updates using the Communications service in the ComUnity Developer Toolkit. This ensures that users receive a personal notification within the application whenever their own profile is updated—either by themselves or by another user, such as an administrator.
To enable this functionality, it is mandatory to include the Notifications template in your project, if it is not already integrated by default. The Notifications templates provides the required structure to support in-app notifications. If it is not included, you will need to build a custom implementation to facilitate notification delivery within your application.
In this tutorial, you will:
Set up a project using predefined templates to enable communications and notifications.
Create a communication event triggered when a user profile is updated.
Configure an in-app notification template to target the affected user.
Add code to the generated OnChange interceptor to trigger the communication event.
Enable communication channels to support in-app delivery.
Test and verify that the notification appears in the user’s application.
By the end of this tutorial, you’ll have a working setup that delivers personalised in-app notifications to individual users whenever their profile is updated.
A ComUnity user account with permissions to create and configure projects in the Toolkit.
Familiarity with the Toolkit’s Data and Communication modules.
Knowledge of change interceptors in the .NET ecosystem: Change interceptors are a concept from WCF Data Services and Entity Framework in the .NET ecosystem, specifically C#. In the context of the ComUnity Developer Toolkit, they’re surfaced as part of the auto-generated custom code, which builds on ASP.NET Web API and OData principles.
Before proceeding with the API integration, ensure that you have:
Created a project using the Vacancies and the Notifications templates or similar. The only requirement is that your project has a Notifications templates included.
Successfully build and launch the project—this step is essential, as it generates the Custom Code for entities defined in your Data model. The Custom Code is accessible via the Properties Editor under each entity’s settings and is where change interceptors can be defined or modified.
Registered a user account and signed in to the web app.
To trigger an in-app notification when a user’s profile is updated, you must create a communication event for the UserProfile entity using Communications.
Follow the steps below to configure this:
With your project open in the Toolkit, navigate to the Communications section using the sidebar.
Click the + Add an event button.
In the Add Event modal, complete the fields as follows:
Entity: UserProfile
Event: OnChange
Name: leave the default value (Default)
Click Create.
This step registers a communication event that will be triggered whenever changes are detected in the UserProfile entity.
Once the event is created, configure the in-app message that will be sent to the user:
Locate the event you just created in the list.
Click the pen icon to open the Action Templates modal.
Select the In App tab.
Fill in the fields using the following values:
User ID
Defines the dynamic value of the recipient’s user id for the in-app notification. This value is passed to the Communications service as part of the payload when the service is invoked in the OnChange interceptor of the UserProfile entity.
Title
The in-app's notification title
Message
The in-app's notification body
Click Save to finalise the in-app notification template.
At this point, the event and notification template are configured, but the event still needs to be triggered from the OnChange interceptor in the generated custom code for the UserProfile entity.
To trigger the in-app notification when a user profile is updated, you must call the communication event from the OnChange interceptor in the UserProfile entity’s custom code. This interceptor is generated when the project is built and allows you to insert custom logic during entity lifecycle events.
Follow the steps below to integrate the event:
In the Toolkit, go to Data > List.
Select the UserProfile entity.
Click More Settings > Custom Code.
A code editor will open displaying the generated custom class for UserProfile.
Locate the OnChange method in the file.
Below the comment that marks where custom logic can be added, insert the following line:
Close the editor and click Save to apply your changes.
Build your project to generate the latest code and publish to IIS.
This call instructs the Toolkit’s Communications service to trigger the event you configured earlier, using the current user’s ID as the target recipient.
To ensure in-app notifications are delivered, you must enable the INAPP communication channel in your project. This tells the Communications service to use in-app delivery for the notification event.
Follow the steps below:
With the Toolkit open, navigate to the top left of the header bar and click the cog icon next to your project name to open Project Settings. Click the cog icon to open the Project Settings modal.
In the Project Settings modal, open the Communications tab.
Click + Add a channel priority.
In the modal that appears:
Select INAPP.
Click Add to confirm.
Close the modal.
With the INAPP channel enabled, the system is now configured to deliver notifications directly within the app interface when the event is triggered.
Once your configuration is complete, you can test the notification flow directly in your running project.
Follow the steps below:
Launch your project - this step updates the project metadata and reflects your latest configuration changes and also opens your application in a browser tab.
While signed in, navigate to your My Profile page.
Make a visible change to your profile—for example, update your name or contact information.
Save the changes.
Navigate to the Notifications tab in the web app.
You should see a new notification with the title:
“User Profile is updated”
This confirms that the in-app notification has been triggered and successfully delivered to the signed-in user.
In this tutorial, we configured in-app notifications for user profile updates using the Communications service in the ComUnity Developer Toolkit. By defining a communication event, customising the notification template, updating the OnChange interceptor, and enabling the INAPP channel, we created a personalised feedback mechanism that alerts users when their profile has been updated.
This approach provides a reliable, event-driven way to keep users informed of changes relevant to them and can be extended to support other communication scenarios within your application.
To explore further:
Configure broadcast in-app notifications for events that affect multiple users (e.g. new announcements or published content).
Add fallback channels such as email to ensure important messages reach users even when they’re not signed in.
By leveraging the Communications service and built-in tooling, you can create responsive, user-focused communication flows with minimal overhead.
In this tutorial, we focus on building a blog application from scratch on the ComUnity Platform. You'll start by developing your own data model, giving you full control over its customisation and a clear understanding of its structure. As the tutorial progresses, we'll guide you through extending this data model, enhancing your application with additional features and functionalities. This approach provides a thorough learning experience for developers eager to understand and utilise the full capabilities of the ComUnity platform. By the end of this guide, you’ll not only have a bespoke blog application but also the skills to extend and improve applications within this dynamic platform.
Through this hands-on guide, you'll learn to:
Define your data model with entities like articles and comments.
Configure metadata for user access, pages, and navigation.
Extend the data service for notifications and external data integration.
Publish your data service for use in the ComUnity platform.
Internet connection
ComUnity user account with appropriate access (contact ComUnity support)
This section contains various assets which are used in the tutorial.
This tutorial builds a simple blog app with the following features:
Users can create, edit, and publish articles.
All users can view articles and add comments.
Authors can tag blog articles and readers can view, and comment on tagged articles.
The following diagram shows the data model that will be created for the example application.
The ComUnity platform leverages the Entity Framework Code First approach for the Data Service project, which forms the backbone of your application's data model. The Platform Toolkit Application streamlines the process of creating your data services project. It allows for the data model to be outlined through configuration data, simplifying the development process. Once your data model is defined, the Platform Toolkit Application will take charge, automatically generating, building, and publishing the data service project to IIS. This section will guide you through these steps, ensuring a smooth transition from concept to a functioning component of your application.
To configure your Data Model, follow these steps:
Login into the ComUnity Developer Toolkit.
Create a project using the Blank Project template with a unique title, an illustration is shown in the following diagram:
After successfully creating your project the Toolkit will successfully redirect you to your project structure. The diagrams below show a the structure of the created Data Model of your project:
In this step we will create the custom entities shown in the Entity Relationship Diagram (ERD) of the application above and populate them with field properties, to get started:
Navigate to the "Data" section within the Toolkit. Once there, locate and click on the "List view" tab. This area allows you to view and manage the entities within your data model.
Locate and click the "Add new entity" icon to initiate the creation of a new entity.
In the "Entity Name" field, enter Post
as the name of your new entity.
Confirm the creation by clicking the "Add Entity" button. This action will successfully create the "Post" entity within your Data Model.
To add custom properties to the "Post" entity, right-click on any existing property, follow these steps:
Expand the "Post" entity to reveal its properties by clicking the "+" sign next to the entity's name.
To add a new property, click on any existing property within the "Post" entity. A modal will appear, offering you the options to "Add a property above" or "Add a property below" the selected property. Select a single option from these choices. Refer to the screenshot provided for guidance:
In the "Add new property" modal that pops up, enter the desired property name. Finalise this action by clicking the "Save" button, as illustrated in the diagram below. Note that the Table in step 5 contains an exhaustive list of all the entities required for the application and their relevant properties.
After saving, select the newly added property to customise it further in the Properties Editor. For example, we have adjusted the "Summary" property by setting its data type to 'String' (which is the default) and restricting the "Max Length" to 256 characters, as shown in the subsequent screenshot.
Click "Save" to apply these specifications and repeat the steps specified above using the data specified in the table below:
In this step, we'll establish Table Security rules for the entities we've previously created. These rules are crucial as they determine who has the permissions to view, edit, and delete data within the table linked to each entity. Follow the steps below to configure Table Security rules for the "Post" entity:
Navigate to the List view of the entities in your Data Model
Locate and select the "Post" entity from the list. This action will activate the Properties Editor specifically for the "Post" entity, allowing you to modify its settings.
With the "Post" entity selected, look for and click on the "Edit Security" option. This action will open the "Table Security for Post" modal.
Within the modal, you will see various permissions that can be enabled or disabled for different roles. Refer to the image below for the desired output settings for the "Post" Entity. Adjust the permissions by checking (to grant) or unchecking (to revoke) the relevant boxes for each role:
After configuring the security settings for the "Post" entity, repeat the same steps for each entity you have added to the Data Model. Select the entity, click on "Edit Security," and adjust the permissions as necessary, ensuring comprehensive security coverage across all entities.
In this step we will create associations of the entities we created in the step above, lets link the User Profile to the Post entity, to get started:
Navigate to the List view of the entities in your Data Model
Select the UserProfile entity
Click the icon to add an association, in the Add new entity link you must specify the from and to entities of your association for which in the case the from entity is the UserProfile and the to entity is Post and then click the Save button
To view the association between UserProfile and Post entities created in the previous step, simply expand the collapsible UserProfile in the list. You'll see the Post association listed beneath it, indicating their connection.
Select the association to configure its properties in the Properties Editor, in this case you set the From Relationship to 1(One) and the To Relationship to *(Many) and click the Save button to persist your settings.
Click Save and repeat the steps specified above using the relationships specified in the table below and ensure that the field "Add Foreign Key Property" is checked for all associations you create.
When viewing your application in the browser you will be redirected to the Accept Terms, after clicking the "ACCEPT TERMS" button users are redirected to the authentication screens:
In this section of the tutorial, we'll focus on how metadata is utilised to design the application's navigation and its pages. You'll learn how to create various screens for key functionalities, including:
Viewing all published articles.
Browsing articles categorised by tags.
Creating, editing, and tagging posts.
Editing user profiles.
Adding comments to articles.
Admin functions like adding or removing tags, editing all articles, and managing comments (including deletion).
We'll also delve into setting up navigation items. These links are essential for connecting the pages and defining the application's flow. They play a crucial role in forming simple pages containing lists and in structuring the application menus.
Let's create the main screens that exist in the app, the app requires the following screens:
My Articles - a screen allows users to view all articles they created
Add Article - a screen that allows users to add blog articles
Edit Article - a screen that allows users to edit the blog articles they created
All Articles - a screen that allows users to view all published blog articles
View Article - a screen that allows users to view a single blog article and navigate to an Add Comment
Add Comment - a screen that allows users to add comments to a blog article
The diagram below shows the hierarchical structure of the aforementioned screens:
Data Entry Screens are a powerful feature of the Toolkit that automate the creation of user interfaces for interacting with database entities. By simply selecting an entity, the Toolkit generates a suite of screens allowing users to view all items associated with that entity, inspect details of individual items, and update information as needed. This functionality is particularly useful for applications requiring dynamic content management, such as managing articles or blog posts. The "My Articles" screen will comprise a group of screens enabling users to create blog posts, view their posts, and edit them created from Data Entry Screens. Additionally, these screens will be further customised to incorporate the functionality of adding Tags, enhancing the organisation and searchability of content. To create the My Articles screen and its child screens, follow these steps:
In the Toolkit, find and click on the "Screens" menu item located in the sidebar. All screens which exist in your application will be displayed in the Screen View.
Select the any of the top-level screens , such as "Administration" and click the three-dot-button adjacent to the selected screen, then click "Add data screens above" as shown below:
In the "Add data entry screens" modal, use the Entity dropdown to choose the "Post" entity. This selection informs the Toolkit of the specific entity it should use to generate your screens.
With the data screens generated, we will proceed on to customising and configuring each screen to align with the "My Articles" concept. This involves setting titles, adjusting properties, and ensuring that the layout and functionality meet your requirements for content management:
Select the Post screen in the Screen View, then update the Title of the screen in the Properties Editor from "Post" to "My Articles" as shown in the screenshot below:
In the Properties Editor set the value of the field Icon to cog
.
Click the Save button to persist your changes.
Click and select the List screen control in the Screen Structure to activate its Properties Editor, and set the properties outline in the table below:
Click the Save button to persist your changes.
Add Post Record screen
Click on the "Add Post Record" screen in the Screen View to activate its supported Properties Editor, then set the properties outlines in the table below:
Click and select the Auto Inputs screen control in the screen screen structure to activate its Properties Editor, and set the properties outline in the table below:
Click the Save button to persist your changes.
Select the "PostEditPage" screen in the Screen View, then update the Title of the screen in the Properties Editor from Edit Record to Edit Article as we did in the previous step.
Edit the Target URL field from /Post to:
This request is intended to perform a partial update on a specific post within the collection of posts associated with a particular user profile, identified by a GUID.
Click Save to persist your changes.
Click and select the Auto Inputs screen control in the screen screen structure to activate its Properties Editor, and set the properties outline in the table below:
Click Save to persist your changes.
Click the "Edit Article" screen to activate its supported Properties Editor and carefully observe the "Name" property within the Properties Editor. In the example provided below, the name of the screen is identified as "1PostEditPage".
Proceed to your "My Articles" section and select the "List" option to continue. Within the Properties Editor for the "List" screen, locate the section for setting the Target URL. Update the Target URL field with the following link:
The Target URL you've set, 1PostEditPage?postId={{= PostId }}
, plays a crucial role in linking users from one part of your application to a specific editing page for articles, utilising a dynamic parameter to provide a customised experience.
To view your changes, either launch your app or, if it's already open, reload the page twice.
This screen will allow users to view all published blog articles.
To create the All Articles screen, follow these steps:
Select the any of the top-level screens , such as "My Articles" and click the three-dot-button adjacent to the selected screen, then click "Add screen above" as shown below:
When the Add a new screen window appears, set Navigation page as the Screen type and set the Title to "All Articles" as shown in the screenshot below:
Drag and drop the "List" form control from the Screen Controls onto the All Articles' screen.
Position the List control in the Screen Structure, refer to the provided image for the desired layout.
Configure the List control
Select the List Control: Click on the List control to activate its Properties Editor.
Set the properties: The table below shows the properties and values you need to set for the active List. Click More Settings to view settings which are hidden by default
To view your changes, either launch your app or, if it's already open, reload the page twice.
In the next step, we'll guide you through creating the "AllArticlesViewPage" mentioned in the Target URL.
To create the View Article screen, follow these steps:
Select the All Articles screen created in the previous step.
Select the Screen Structure and then click on the List we implemented in the "All Articles" to activate its supported Screen Controls.
Drag and drop the "Form" screen control from the Screen Controls onto the activated List, the desired output is such that the Form control is then nested as Item 1 in the All Articles screen is shown below:
Select the Item 1: Click on the Item 1 in the Screen View to activate its Screen Structure, Screen Controls and Properties Editor.
Set the properties outlined in the table below, the desired configuration is also shown below:
Click the Save button to persist your changes.
Click on the "View Article" screen to re-select it. This action will activate the "Screen Structure" section for further modifications.
Build its Screen Structure Step-by-Step:
Drag and drop three Paragraph screen controls into the View Article Screen
Using Templated Markdown populate each Paragraph screen control Title, Summary and Body.
Note: Add each item individually. This ensures correct placement and order.
Click "Save" after adding each item. This saves your progress and avoids losing changes.
To view your changes, either launch your app or, if it's already open, reload the page twice.
In the next step, we'll guide you through adding functionality to add and view comments.
To create the Add Comment screen, follow these steps:
Under Additional Screens, select 'User Profiles' and click the three-dot-button adjacent to the selected screen, then click Add screen as shown below:
When the Add new window appears, choose Form Page as the page type and set the Title to Add Comment:
Select the Add Comments screen created in the previous step, to activate its Screen Structure.
Drag and drop the "Input" and "Button" screen control from the Screen Controls onto the Screen Structure:
Click on the "Input" control to activate its Properties Editor, then set the properties outlined in the table below:
Click on the "Button" control to activate its Properties Editor, then set the properties outlined in the table below:
To implement functionality to add a comment to a page, click the View Article Page in the Screen View to activate its Screen Structure and Properties Editor.
Drag and drop the "List" screen control from the Screen Controls and place it below the divider.
Click on the List control to activate its supported Screen Controls.
Drag and drop the "Single Item" and the "Entity Items" screen control from the Screen Controls onto the activated List, the desired output is shown below:
Click on the "Single Item" control to activate its supported Properties Editor, then set the properties outlines in the table below:
Click on the "Entity Items" control to activate its supported Properties Editor, then set the properties outlines in the table below:
To view your changes, either launch your app or, if it's already open, reload the page twice.
To create the Articles By Tag screen, follow these steps:
Select the any of the top-level screens , such as 'My Articles'. and click the three-dot-button adjacent to the selected screen, then click Add screen as shown below:
When the Add a new screen window appears, choose Navigation page as the page type and set the Title to Articles By Tag as shown in the screenshot below:
Click and select the Articles By Tag screen in the screen view to activate its Screen Structure:
In the Properties Editor set the value of Icon to ticket
.
Drag and drop the "List" form control from the Screen Controls onto the Articles By Tag screen structure and set its layout type to "Grid".
Click on the List control to activate its supported Properties Editor, then set the properties outlines in the table below:
Click the Save button to persist your changes
Click on the List control to re-select it and activate its supported Screen Controls:
Drag and drop the "Navigation Page" screen control from the Screen Controls onto the activated List, the desired output is shown below:
In the next step we will configure Item 1 to be the Tagged Articles screen.
To configure the Tagged Articles screen created in the previous step, follow these steps:
Click and select the Item 1 screen in the Screen View, to activate its supported Properties Editor and set the Title to "Tagged Articles":
Click the Save button to persist your changes
Click and select the Tagged Articles screen in the Screen View, to activate its Screen Structure:
Drag and drop the "List" form control from the Screen Controls onto the Tagged Articles screen structure.
Click on the List control to activate its supported Properties Editor, then set the properties outlines in the table below:
Drag and drop the "Form" screen control from the Screen Controls onto the activated List, this action will nest a Form Page, Item 1 as shown in the screenshot below:
In the next step we will configure Item 1 to be the Tagged Articles View screen.
To configure the Tagged Articles View screen created in the previous step, follow these steps:
Click and select the Item 1 screen in the Screen View, to activate its supported Properties Editor and set the properties outlined in the table below:
Configure the screen structure for the "Tagged Articles" view to mirror the content, layout, and properties of the "All Articles View." Ensure that the final setup for the "Tagged Articles" view is identical in terms of its presentation and functionality, providing a consistent user experience across both views.
For the next step, enhance the "Edit Article" screen by integrating the capability for authors to add Tags to their posts. This addition is crucial as, while we have developed the functionality to display articles based on Tags, we currently lack a mechanism for actually assigning those Tags to articles. This enhancement will bridge that gap, allowing for a more dynamic and organised content management process.
To configure functionality and content to add Tags in the Edit Article screen, follow these steps:
Click and select the Edit Article screen in the Screen View, to activate its Screen Structure:
Drag and drop the "List" form control from the Screen Controls onto the Edit Article screen under the existing content, the desired layout is shown below:
Click on the List control to activate its supported Screen Controls, then drag and drop "Single Item" into the List control.
Click the Single Item from within the List to activate it so that its supported Properties Editor, then set the properties outlined in the the table below:
After adjusting the settings for the Single Item, click outside the screen structure area to deactivate your previous selection.
Drag the "Paragraph" screen control into the Screen Structure. Then, using Markdown, add the text as illustrated in the screenshot provided below.
Drag and drop the "List" form control from the Screen Controls under the content added in the previous step, the desired layout is shown below:
Click on the List control to activate its supported Screen Controls, then drag and drop "Entity Items" into the List control.
Click the Entity Items from within the List to activate it so that its supported Properties Editor, then set the properties outlined in the the table below:
Next, proceed to develop the "Add Tags" screen, as previously mentioned in the TARGET URL section. This step involves creating the actual interface that will facilitate the tagging functionality.
To create the Add By Tag screen, follow these steps:
Under Additional Screens, select 'User Profiles' and click the three-dot-button adjacent to the selected screen, then click Add form as shown below:
When the Add new window appears, choose Form Page as the page type and set the Title to Add Tag:
Click the Add Tag screen created in the previous step, to activate its Screen Structure.
Drag the "Paragraph" screen control into the Screen Structure. Then, using Markdown, add the text as illustrated in the screenshot provided below.
Drag the "Reference Input" screen control into the Screen Structure. The click it to activate its supported Propertied Editor then set the properties outlines in the table below:
Drag the "Button" screen control into the Screen Structure. The click it to activate its supported Propertied Editor then set the properties outlines in the table below:
The responsibility of adding article tags to the application is assigned to the Staff user role. Follow the instructions below to implement this feature:
Access the Administration Screen:
Navigate to the Administration screen.
Locate and select the Content Management section within the screen structure.
Select the List Screen Control:
Under the Content Management section, click the List screen control to select it
Add Navigation Page Item Controls:
Drag and drop a Navigation Page Item controls into the active list. This action will nest these pages within the Administration page.
Configure the Navigation Page Item:
Select there Navigation Page control from the list by clicking it to activate the Properties Editor.
Populate the necessary fields as outlined below:
Click the Save button to persist your changes.
Expand the Administration screen and select the Article Tags screen to activate its relevant Screen Structure and Controls.
Drag and drop the Page Link screen control into the Article Tags screen structure
Click on the Page Link control then configure its properties outlined in the table below
Click the Save button to persist your changes.
Drag and drop a Paragraph screen control into the Add Tags screen
Using Templated Markdown populate the Paragraph with the content: ##Tags List
Drag and Drop a List into the screen and configure its following properties:
Click the Save button to persist your changes.
Expand the Article Tags screen to view the Add Tag screen added in step 8.
Click the Add Tag screen in the Screen View to activate its Screen controls
Drag and Drop two Input controls and Button onto the into the screen and configure their corresponding screen control properties as specified in the table below:
Click the Save button to persist your changes.
In conclusion, this tutorial has guided you through the essential steps and techniques to effectively enhance your application. From configuring screen structures to integrating dynamic content management features such as tagging, we've covered a broad spectrum of functionalities that are crucial for a modern, user-friendly application.
Track user interactions in real time, providing insights into user behaviour and preferences.
Access detailed analytics reports, assisting in the identification of trends and informing data-driven decision-making processes.
Access the Dashboard: Navigate to the Observability tab. By default, the Client Analytics tab will be displayed, showcasing your analytics dashboard.
This integration not only enhances the analytical capabilities within the ComUnity Platform but also aligns with the commitment to providing user-centric, secure, and effective digital solutions.
A core aspect of this tutorial is utilising the APIs feature to integrate external data sources. We will connect to the JSONPlaceholder API through Azure APIM, showcasing how the Toolkit enables structured API management and integration while maintaining a well-defined data model. This hands-on guide highlights how Virtual Entities facilitate controlled interaction with third-party services, ensuring secure and efficient API exposure within the Toolkit.
In this tutorial you will:
Set up a blog application using a predefined template to accelerate development.
Register and configure an API in the ComUnity Developer Toolkit to connect to an external data source.
Define a Virtual Entity to represent the external API within the data model.
Expose the API via the Virtual Entity by registering it in WebApiConfig.
Create a custom API class (TodosAPI) and update the controller class to handle API interactions.
Query and display JSONPlaceholder Todos within the blog application.
By the end of this tutorial, you’ll have a functional blog application enhanced with external data integration, as well as the skills to extend and improve applications within the Toolkit.
Access Requirements
A ComUnity user account with the necessary permissions (contact ComUnity Support if required).
A single-tenant environment is required for API integration (organisations must host their own instance of the Toolkit in Azure).
If a single-tenant instance is unavailable, users can request access to the shared ComUnity Platform environment (API management is not supported in this environment).
Technical Knowledge
C# programming skills
Development Tools
Visual Studio 2022 (Community, Professional, or Enterprise)
This tutorial builds a simple blog app with the following features:
Users can create, edit, and publish articles.
All users can view articles and add comments.
Authors can tag blog articles and readers can view, and comment on tagged articles.
Users can fetch and view todos from JSON Placeholder API
This section walks you through quickly setting up a blog application in just three steps. This forms the foundation for integrating the JSONPlaceholder Todos API in later sections.
To quickly build your blog, follow these steps:
Login into the ComUnity Developer Toolkit.
Create a project using the Blog Project template with a unique title, an illustration is shown in the following diagram:
In this section, we will register, configure, and expose the JSONPlaceholder API within the ComUnity Developer Toolkit using the APIs feature. This process involves:
Registering the API in the Toolkit and deploying it to Azure API Management (APIM).
Defining an API operation to retrieve Todos from the JSONPlaceholder API.
Testing the API in Azure to verify the response.
Configuring a Virtual Entity to expose the Todos API within the Toolkit.
Updating Custom Classes and the WebApiConfig class to enable API access.
Building the UI to display the fetched Todos in the blog application.
By following these steps, you will integrate an external API, expose it within the data model, and render its data on a UI page. This approach demonstrates how to extend applications using the ComUnity Developer Toolkit’s API integration capabilities powered by Azure API Management.
Register the API in the Toolkit and deploy it to Azure API Management (APIM)
In the ComUnity Developer Toolkit, open your project and navigate to Third Party Services > APIs.
Enter a unique name for your API in the API display name field.
Select the option HTTP as the definition type.
Provide a relevant description.
In the Provide Web URL field, enter:
Click Add Azure API button to your project button to deploy the API to Azure API Management (APIM).
Note: The Toolkit will handle API registration and deployment based on your specifications.
Access and Review the API in Azure API Management (APIM)
Once the API is deployed, click the ellipsis (⋮) button next to View Details and select View in Azure Portal.
In the Azure portal, navigate to APIs under All APIs.
Use the search function to quickly locate your newly created API.
Click on the API and open the Settings tab to review its details.
Define an API Operation
Navigate to the Design tab and select Add an operation.
Provide a resource name:
Leave the HTTP Verb to GET which is the default option
In the URL field, enter the relative path:
Click the Save button to register the operation.
Test the API Operation in Azure
Go to the Test tab in the Azure API Management Portal.
Select the operation created in the previous step (/todos).
Click Send to execute the request.
Scroll down to verify the response data containing the Todos list fetched from the JSON Placeholder API
Configure Properties and Security of the Todo Virtual Entity in the Data model
Go back to the ComUnity Developer Toolkit under Data.
Leave the default options selected for Add Entity class, Add Controller class and Add controller template code.
Click the Add button to create the Todo Virtual Entity
userId → int
id → int
title → string
completed → bool
Select the Todo entity to activate it.
Locate Table Security setting in the Properties Editor.
Set View permission only for the User role.
Expose the Todos JSON Placeholder API via an Virtual Entities and Custom Classes
Go to Custom Classes in the Toolkit select the WebConfigApi class and register your Virtual Entity as shown below (line 23):
Create a TodosAPI class add the code below:
To replace the comment on Line 13 with your API’s URL, navigate to Third Party Services > APIs in the Toolkit, locate your API, and copy its URL.
Update the Todo entity class as shown below:
Update your controller class as shown below:
Navigate Screens in the Toolkit and create a Todos Navigational page.
Set an icon of your choice
Add a List item to your screen
Click the List item to activate it
In the Properties Editor set the fields below with the values shown to set up your screen:
Data Path:
Item Title :
Build and Launch your project and view your todos in your application.
This tutorial has demonstrated how to integrate external APIs into an application using the ComUnity Developer Toolkit. By connecting to the JSONPlaceholder API, we successfully retrieved and displayed Todos using a Virtual Entity and the APIs feature.
Beyond this example, you can further enhance your integration skills by:
Exploring Other API Types – Try integrating APIs using OpenAPI and GraphQL API specifications to understand different API structures and query mechanisms.
Expanding Functionality – Modify the application to:
Post new Todos by extending the API integration with POST requests.
View a single Todo by configuring a GET operation with parameters.
Update or delete Todos by implementing PUT and DELETE operations.
• Customising the UI – Improve the presentation of Todos
By applying these additional enhancements, you can deepen your understanding of API integrations and extend the functionality of your application to meet real-world requirements.
Further Reading
The OData (Open Data Protocol) is a set of best practices for developing and using RESTful APIs.
In the ComUnity Development Toolkit the service root URL is system defined and and is not exposed publicly for security reasons.
The following links will provide you with more information on OData.
The OData metadata enables the development of powerful generic client tools. The following six steps demonstrate interesting scenarios of OData across different programming platforms.
Source: www.odata.org
The link below will provide you with a better understanding of OData.
This article describes in some detail how OData is used within the ComUnity Platform Toolkit.
The OData protocol and URL conventions are used to interact with the platform Screen Controls in the following ways:
Specifying the target URL for buttons and links, the data path for the content of links or the data path for the reference values of a reference field.
Populating a list with database values (the Data Path and any Query values).
Getting record values for a form (the Target URL).
By the end of this tutorial, you’ll be able to:
Register a public REST API using an OpenAPI 3.1 specification
Configure and validate the API in Azure API Management (APIM) via the ComUnity Developer Toolkit.
Define a Virtual Entity to model post data from the JSONPlaceholder API.
Use Custom Classes and Controllers to:
Fetch all posts
Retrieve a specific post by ID
Create a new post using a POST request
Build custom UI to:
Display a dynamic list of all posts
Enable click-to-navigate functionality, allowing users to tap on a post and view its details on a dedicated screen.
Add a basic input form allowing users to submit new posts from within the app
Access Requirements
A ComUnity user account with the necessary permissions (contact ComUnity Support if required).
A single-tenant environment is required for API integration (organisations must host their own instance of the Toolkit in Azure).
If a single-tenant instance is unavailable, users can request access to the shared ComUnity Platform environment (API management is not supported in this environment).
Technical Knowledge
C# programming skills
Development Tools
Visual Studio 2022 (Community, Professional, or Enterprise)
Project Setup Before proceeding with the GraphQL API integration, ensure that you have:
Registered a user account in your app – Sign up and log in within your app
Once your project is ready, you can proceed with configuring the OpenAPI integration.
OpenAPI specification file for JSON placeholder Posts
To configure the OpenAPI API in the ComUnity Developer Toolkit, follow these steps:
Register the OpenAPI API in the Toolkit:
In the ComUnity Developer Toolkit, navigate to Third Party Services > APIs.
Provide a name and an optional description for your API.
In the Provide Service URL field, enter:
Click the Add Azure API to your project button to register and configure the API in Azure API Management (APIM).
This process ensures the API is properly registered and available for further integration within the Toolkit.
Verify the API Registration in Azure:
After the API is registered, click the ellipsis (⋮) button next to the API in the Toolkit and select View in Azure Portal.
You will be redirected to Azure API Management (APIM).
Locate your newly created API under APIs (use the search function if needed).
Open the Settings tab and check for any schema validation errors to confirm the API was successfully registered.
Test the JSONPlaceholder API in Azure:
In Azure API Management (APIM ) under APIs, navigate to the Test tab.
Select one of the available operations listed under the API, such as GET /posts, GET /posts/{id}, or POST /posts.
Enter appropriate test data if required (e.g., provide a valid post ID or request body).
Click Send to execute the request and verify that a successful response is returned from the backend service.
Take note to include the following properties for the entity:
UserId → int
Id → string
Title → string
Body → string
For guidance on configuring table security and surfacing entity data to user roles, refer to:
Ensure that the Insert and View permissions are granted to your User role.
Expose the Posts API via Virtual Entities and Custom Classes:
Go to Custom Classes in the Toolkit. Select the WebApiConfig class and register your Post Virtual Entity as shown below (line 23):
Update the Post entity class as shown below:
Create a new class named PostsAPI, where you will define the logic for communicating with the API via Azure API Management, as shown below ensure that you also update your packages as shown:
Update your controller class as shown below, ensure that you also update all your packages on your file:
Build your project after updating your Data model and Custom Classes so as to publish your changes and as well as to confirm that there are no errors in your build, if any exist debug and resolve them before proceeding to the next step.
Build the UI: In this step we will outline how to build the Posts screen that shows all posts as a list and supports the ability to click to navigate to the Post by ID screen, which shows dynamic details of the selected list item, and finally the Add a Post screen, which shows a simple form to create a post.
Navigate to Screens in the Toolkit and create a Posts navigation page.
Set an icon of your choice.
Add a List control to your screen.
Click the List item to activate it.
In the Properties Editor, set the following fields:
Data Path:
Item Title:
Click the Save button to persist your changes.
Launch your project to see your list of the titles of posts fetched from the JsonPlaceholder API server in the Posts page.
To enable click-to-navigate functionality to a Post by ID screen:
Click to select the List in the Posts screen configured in step 6.a.
Supported screen controls will appear under List Navigation under the Screen Structure tab.
Drag and drop a Form screen control into the List.
A subpage of Form type will be inserted under the Posts page in the navigation hierarchy under Screen View.
Navigate to the subpage and update its title to Post by ID:
Set its Target URL to:
Click Save.
Insert an Auto Input screen control into the Post by ID page.
Copy the Name value of the Post by ID from the Properties Editor.
Go back to the Posts page screen configured in step 6a, select the List we configured in step 6.a.iii, and set its Target URL to:
These actions enable click-to-navigate functionality from List items to the Post by ID screen.
To creat a Add a Post screen:
Select the Posts screen we made in step 6.a in the navigation hierarchy under Screen View.
This action will display supported screen controls under the Screen Structure tab.
Add a Page Link control onto it just above the List we configured in step 6a. A subpage will be created in the hierarchy.
Select the subpage and configure the following values:
Title:
Icon:
Target URL:
Click Save.
Drag and drop Auto Input screen controls into the screen structure of Add Post page.
Add a Button control and configure the following settings:
Navigate URL:
Click to select each Auto Input and set its Exclude field to:
Click Save.
These actions complete the UI by enabling users to view a list of posts, navigate to a screen displaying the details of a selected post, and submit new posts using a form.
Build and launch your project to view your posts in the application. Click Add Post to navigate to the Add Post screen, where you can fill out a form to create a new post. Click on any post in the list to be redirected to the Post by ID page, where you can view the post’s details.
is integrated into the ComUnity Developer Toolkit (available from version 24.5) to facilitate data replication and reporting by creating Fabric mirrors of databases. This integration allows developers and analysts to transform and query data in a separate mirrored environment without directly impacting the production database.
By default the ComUnity Developer Toolkit Media Server supports anonymous public read access to storage resources, to increase the security of your applications you may opt to use the as it only allows permission based and time-bound access to storage resources.
When fetching images from the Media Server you can append optional arguments to the URL string which allow you to manipulate your images. These modifiers used to manipulate images are derived from .
This tutorial demonstrates how to integrate an internal API using the ComUnity Developer Toolkit. The API, named Bookings, is a sample service prepared internally within the organisation and exposes structured booking data through an -compliant interface.
If you are new to the APIs feature in the ComUnity Developer Toolkit, we recommend reviewing the tutorial. That tutorial introduces key integration concepts using a REST-based API. This tutorial builds on that foundation but focuses on a direct OData integration, which simplifies request handling by aligning with the Toolkit’s native architecture.
CommentFamiliarity with, Entity Framework, and
Go back to the ComUnity Developer Toolkit under Data. Create a Virtual Entity named Booking. For detailed instructions on creating Virtual Entities in the Toolkit, refer to the section.
Ensure that View permissions are granted to your User role for more details on setting up table permission view the section .
or as your database client.
overview – Learn more about how communication events and channels work within the ComUnity Developer Toolkit.
- Learn more about fields used to configure in-app notifications.
This tutorial is perfect for developers familiar with , , , and who want to explore building applications on ComUnity.
The ComUnity Developer Toolkit is hosted in Azure and accessible at:
programming skills
Understanding of ,, and
(Community, Professional, or Enterprise)
Changes made to the Data Service require you to Build your app to publish these changes. Subsequently, when modifications are made to screens, you must Launch your app to update the application metadata. For further details, see .
: Define the entities and relationships for your blog application.
: Publish your defined data model and make it accessible on ComUnity.
: Set up access rights, pages, and navigation for your blog app.
The ComUnity Developer Toolkit streamlines the development process by automatically provisioning necessary resources on Microsoft Azure and constructing your Data Service project based on the defined data model. This integration includes executing data migrations for existing databases and deploying your project to Internet Information Services (IIS) following a successful build. However, it's crucial to note that any alterations to the data model, custom classes, or virtual entities necessitate a project rebuild to avoid data loss and maintain application consistency, to learn more view .
To add an optional "divider.png" image, drag and drop the Image screen control into the screen a. Click the Image control to activate it in the Properties Editor then upload this image in the Image Digest field.
Launch your app to publish your changes you will be automatically redirected to a web application, if you have not yet registered in the app proceed to do so. Add a Staff role to your account so as to be able to manage Tags view for information about managing role based user access.
The ComUnity Platform offers client analytics functionality through the integration of , a leading open-source analytics tool, providing a comprehensive and intuitive interface for analysing user interactions within your projects. This integration furnishes a diverse array of features designed to augment your analytics strategy, enabling effective collection, analysis, and interpretation of user data to drive informed decision-making and optimise user engagement.
Ensure compliance with global data privacy standards, reflecting 's emphasis on user privacy protection.
To leverage your project's Client Analytics dashboard powered by , follow these steps:
Enable Observability: Activate the observability feature in your project. For detailed instructions on enabling observability within the Toolkit, refer to the guide.
In this tutorial, we focus on demonstrating API integration using the ComUnity Developer Toolkit, powered by . Rather than starting from scratch, we will accelerate development by leveraging a template, allowing us to focus on key integrations and customisations.
Familiarity with WCF Data Services, Entity Framework, and
Build and Launch your project the after building you will be redirected to your new app, refer to for further details. Register and log in to access the blog application.
Create a Virtual Entity named Todo
. For detailed instructions on creating virtual entities in the Toolkit, refer to the section.
Add the following entity fields and properties with their respective data types ensure that you delete the default primary key TodoId
and replace it with id
, refer to the section fields on an entity:
Set the permissions of the Todo Virtual Entity refer the section for more information about configuring Table Security:
Build the UI - for more information on how to build lists in Navigation pages refer to the section
The specification is a powerful way to fetch and display data from a Data service. This specification defines a standard way of exchanging data between systems, allowing developers to retrieve data from external sources such as a database or API. By utilising the capabilities of the oData 3.0 specification, developers can create dynamic and customisable lists that can be updated in real-time with minimal manual intervention.
An consists of three parameters: the service root URL, resource path and query options.
The ComUnity Development Toolkit only supports the specification.
This tutorial demonstrates how to integrate an external HTTP-based REST API using the integration support in the ComUnity Developer Toolkit. While the target API——is a public test API that does not natively provide an OpenAPI definition, we’ve prepared a compliant OpenAPI 3.1 specification to enable its integration into the Toolkit.
The ComUnity Developer Toolkit supports OpenAPI-based integrations via Azure API Management (APIM). When registering an API, the Toolkit expects a specification document that adheres Once registered, this allows developers to expose endpoints, define Virtual Entities, and render structured data inside the application using the Toolkit’s OData-compatible pipeline.
If you’re new to the APIs feature in the ComUnity Developer Toolkit, we recommend first reviewing the , which introduces key concepts for integrating external APIs using the Toolkit. This tutorial builds upon the same foundational workflow but focuses specifically on integrating APIs using an OpenAPI specification, including steps to register, validate, and expose an API via Azure API Management (APIM).
Familiarity with, Entity Framework, and
Created a project from a sample – Follow the section to set up a new project using a sample of your choice.
the project successfully.
Click the Select file button and upload the OpenAPI specification file for JSONPlaceholder Posts, which is provided in the section.
Configure Properties and Security of the Post Virtual Entity in the Data Model: Go back to the ComUnity Developer Toolkit under Data. Create a Virtual Entity named Post. For detailed instructions on creating Virtual Entities in the Toolkit, refer to the section.
For more details, see .
For more information, see the section .
The API simulates a successful record creation (201 Created) for POST requests, but no actual data is stored. The API response is mocked and does not persist changes.
Post
Title
string
Max Length = 64
Checked
-
Summary
string
Max Length = 256
Checked
-
Body
string
-
Unchecked
-
Publish
bool
-
Checked
false
Tag
Name
string
Max Length = 32
Checked
-
Icon
string
Max Length = 50
Unchecked
-
Comment
Detail
string
-
Checked
-
UserProfile
Post
One is to Many
Posts
Many
User
0..1
UserProfile
Comment
One is to Many
Comments
Many
User
0..1
Post
Tag
Many to Many
Tags
Many
Posts
Many
Post
Comment
One is to Many
Comments
Many
Post
0..1
Data Path
/UserProfile(guid'{{=userguid}}')/Posts
This property defines the specific endpoint or route for accessing posts associated with a user's profile in the application. The dynamic portion, guid'{{=userguid}}'
, is a placeholder that gets replaced with the actual globally unique identifier (GUID) of the user at runtime. This ensures that the data fetched or submitted via this path is precisely linked to the correct user profile, facilitating targeted retrieval or update of posts under a specific user's account. It's essential for operations like displaying a user's articles or submitting new ones under their profile.
Item Title
{{= Title}}
The Item Title
property specifies the template for dynamically displaying the title of each item, such as a post or article, retrieved from the data source. By using the placeholder {{= Title}}
, the system automatically inserts the title of each respective post into the layout or list where this template is applied. This dynamic binding ensures that the displayed title matches exactly what is stored for each post in the database, providing a direct and accurate reflection of the content to the user.
Item Detail
{{ = Summary}}
This property sets the template for presenting a brief description or summary of each item, like an article or blog post. The placeholder {{= Summary}}
is used to dynamically insert the summary content of each post into the display interface. This approach allows for a concise overview of each post's content to be presented alongside its title, offering users a snapshot of what the post is about before deciding to read further. It enhances the usability of lists or feeds by giving context to each listed item, making it easier for users to navigate through content.
Title
Add Article
This property defines the heading or title of the screen in the application.
Target URL
/UserProfile(guid'{{=userguid}}')/Posts
The Target URL
property specifies the endpoint or API route the application will call to perform a specific operation, in this context, to submit or associate new posts with a user's profile. The dynamic part of the URL, guid'{{=userguid}}'
, is replaced at runtime with the actual GUID (Globally Unique Identifier) of the user, ensuring that the new posts are correctly linked to the user's profile. This URL pattern facilitates direct access to a subset of data related to the user, specifically their posts, enabling a seamless data submission process.
Exclude
Tags,User,Comments
Comma delimited list of Post entity navigations to exclude from Auto Input control
Exclude
Tags,User,Comments
Comma delimited list of Post entity navigations to exclude from Auto Input control
Icon
cogs
This property specifies an icon to be used in conjunction with the screen or page title, enhancing the visual appeal and providing a visual cue about the action or content associated with the title.
Data Path
/Post
Defines the endpoint URL (/Post
) for retrieving data from the backend. This path is used to construct the full oData query URL for fetching data, specifically targeting the "Post" resource in the database.
Query
Publish eq true and Deleted eq null
This property sets a filter condition for the oData query, instructing the system to retrieve only those records where the Publish
attribute is true
. This ensures that only published items are fetched from the database.
Item Title
{{= Title }}
Specifies the template for displaying each list item's title, dynamically inserting the Title
property of the data item. This allows for a flexible display of titles based on the data retrieved.
Item Detail
{{= Summary }} Author: {{= User/Name }} {{= User/Surname}}
Sets the template for displaying detailed information about each list item. It combines static text with dynamic data fields, showing the item's Summary
followed by the author's full name, which is constructed from related user data (Name and Surname).
Target URL
LINK:AllArticlesList_PageItem?postId={{= PostId }}
Defines a template for constructing URLs to link to detailed article views. This property dynamically inserts the PostId
of the current item into the query parameter of the URL, facilitating navigation to a detailed view page for each article.
Item Aside
{{= Created }}
This property defines what is displayed in the aside section of each list item, in this case, the creation date of the article. The template dynamically inserts the Created
date, formatting it day-month format without the year.
Title
View Article
This property specifies the title of the screen or page within the application. Setting this value to "View Article" indicates that the screen is dedicated to displaying an article's content, providing users with a clear understanding of the page's purpose. The title is typically displayed at the top of the screen or in the browser tab, serving as a visual indicator of the current view.
Target URL
/Post({{= postId }})
This property defines the specific endpoint or URL to which a user will be directed or from which data will be retrieved. The value /Post({{= postId }})
utilises a dynamic parameter postId
that is replaced with the actual ID of a post when generating the URL. This enables the application to fetch or display information specific to a particular post. The use of {{= postId }}
within the URL structure indicates that this is a templated part of the URL, which will be substituted with a real post ID at runtime, allowing for dynamic navigation or data retrieval based on the user's interaction or selection.
Paragraph
## Title: {{= Title}}
Paragraph
__Summary: {{= Summary}}__
Paragraph
{{= Body}}
Property Name
Detail
Specifies the input label
Button Text
Add
Specifies the button label
Verb Name
Post
Specifies the HTTP method used for the form action. In this case, "Post" indicates that the form will submit data to the server to create a comment.
Document Template
{"Detail":"{{= Detail }}", "User@odata.bind":"UserProfile(guid'{{=userguid}}')"}
Specifies the structure of the data payload for the POST action, including dynamic values to be included in an OData query. The Detail
key is populated with the specific detail information, and the User@odata.bind
key binds the document to the user profile using the user's GUID.
Title
Add Comment
This property sets the title or heading of the interface screen where users can add a new comment. By naming the screen "Add Comment," it clearly informs users that they are in the section of the application dedicated to submitting their feedback or thoughts on a particular topic or post. This title helps enhance user navigation and usability by providing a clear context for the action they are about to perform.
Icon
svg/sdk/plus-circle/Bootstrap/regular
This property specifies an icon to be used in conjunction with the screen or page title, enhancing the visual appeal and providing a visual cue about the action or content associated with the title. The value svg/sdk/plus-circle/Bootstrap/regular
points to a specific icon within a structured library or SDK, indicating the use of a "plus-circle" icon from the Bootstrap icon set in its regular style. This icon, often symbolizing the addition of new items or content, is prefixed to the title, offering an intuitive understanding that the user is about to engage in a creation or addition process, such as adding a new comment, post, or item within the application. The use of this icon helps to visually distinguish the action or page, making the user interface more user-friendly and accessible.
Data Path
/Comments
The Data Path
property specifies the endpoint or API route used by the application to send or retrieve comments data. The value /Comments
indicates that this particular path is dedicated to handling operations related to comments, such as posting new comments or fetching existing ones. It serves as a direct link to the comments resource on the server, ensuring that data can be accurately accessed or submitted by the application.
Page
./AddComment
This property defines the relative path to the page within the application where users can add a new comment. The value ./AddComment
points to a specific screen or component designed for comment submission, indicating that this page contains the necessary interface elements (such as text input fields and submit buttons) for users to write and post their comments. The "./" prefix suggests that the path is relative, implying that the location of the AddComment
page is within the same directory level as the reference point in the application's file structure.
EntitySet/Navigation
/Comments
This property indicates the specific EntitySet or navigation path used within the application's data model, particularly in the context of OData services or similar API structures. The value /Comments
designates the targeted dataset or resource for operations, in this case, comments. It functions as a reference to the collection of comment entities, enabling the application to perform actions such as querying, adding, updating, or deleting comment records. By specifying /Comments
, the property clearly defines the path for accessing or interacting with comment data stored in the backend. This allows for efficient data manipulation and retrieval, ensuring that the application can dynamically handle user interactions related to comments, such as displaying a list of comments or submitting new ones.
Data Path
/Tag
This property designates the specific endpoint or route within the application's backend from which tag-related data can be accessed or manipulated. The value /Tag
signifies that this path is dedicated to operations involving tags, such as retrieving all tags, adding a new tag, or editing existing tags. It serves as a direct link to the tag resource, facilitating seamless interaction with the tag data stored in the database.
Item Title
{{= Name}}
This property specifies the name of the Tag by default only the Tag icon is shown
Target URL
LINK:TaggedArticles?tagId={{= TagId }}
This property defines the URL to which a user will be directed or the application will navigate when a particular action is taken, often linked from a UI element like a button or a hyperlink. The value LINK:TaggedArticles?tagId={{= TagId }}
constructs a dynamic URL for navigating to a page that displays articles associated with a specific tag. The {{= TagId }}
portion is a placeholder that gets replaced with the actual ID of the tag, allowing the application to fetch and display articles tagged with that specific identifier. This dynamic linking method enables a fluid and context-sensitive navigation experience within the application, directly connecting users with the content relevant to the selected tag.
Data Path
/Post
This property specifies the API endpoint or route for fetching posts from the backend. The /Post
value indicates the data path that the application uses to retrieve post-related data, serving as the primary access point for post resources within the system.
Query
Publish eq true and Tags/any(id:id/TagId eq {{= tagId }})
This query filters the posts to be fetched based on specific conditions. It ensures that only posts which are published (Publish eq true
) and contain any tags matching a specified tag ID (Tags/any(id:id/TagId eq {{= tagId }})
) are retrieved. The {{= tagId }}
portion is dynamically replaced with the actual tag ID during the query execution, allowing for flexible and targeted data retrieval based on user interaction or specific criteria.
Item Title
{{= Title }}
This property defines the template for displaying each item's title in the list or collection view. The {{= Title }}
template dynamically inserts the title of the post from the data retrieved, ensuring that each item accurately represents its corresponding post's title for easy identification by the user.
Item Detail
{{= Summary }} Author: {{= User/Name }} {{= User/Surname}}
Specifies the template for presenting detailed information about each post item. This template combines static text with dynamic placeholders, displaying the post's summary followed by the author's name and surname. The {{= Summary }}
inserts the post's summary, while {{= User/Name }}
and {{= User/Surname}}
are replaced with the author's first and last names, respectively. This detailed format provides a comprehensive overview of each post, enhancing user engagement and understanding of the content available.
Title
Tagged Article View
This property sets the title or heading for a specific screen or page within the application, in this case, designated as "Tagged Article View." It indicates that the page is focused on displaying articles that have been tagged with a specific keyword or category. The title helps users understand the context and purpose of the page they are viewing, ensuring a cohesive user experience by clearly identifying the content theme or focus.
Target URL
/Post({{= postId }})
The Target URL
property specifies the endpoint or resource location that the application should navigate to or fetch data from, based on a dynamic identifier. In this value, /Post({{= postId }})
, the URL is constructed to target a specific post within the application, with {{= postId }}
serving as a placeholder for the post's unique identifier. This dynamic approach allows for the URL to adapt based on the context in which it is used, enabling direct access to detailed views of posts by substituting the placeholder with an actual post ID. This functionality is crucial for creating a navigable and user-friendly interface where users can easily access detailed information about a specific article or post.
Title
Add Tag
This property sets the heading or name of a specific interface within the application, designated as "Add Tag." It clearly communicates to users that they are interacting with a section or screen dedicated to the creation or addition of new tags. This title is essential for guiding users through the functionality of the app, ensuring they understand they are in the process of tagging items, such as articles or posts.
Icon
svg/sdk/plus-circle-dotted/Bootstrap/regular
This property specifies an icon to be used alongside the user interface, particularly to visually represent the action or feature it accompanies, in this case, adding a tag. The value svg/sdk/plus-circle-dotted/Bootstrap/regular
indicates the file path and style for a specific icon within a standardised set or library. The icon, described as a "plus-circle-dotted" from the Bootstrap collection in its regular form, symbolises the addition of new elements or features, such as tags, enhancing the visual appeal and intuitive understanding of the function it represents.
Data Path
?postId={{= postId }}
The Data Path
property defines a query parameter to be appended to a base URL, targeting a specific resource or action within the application. In this context, ?postId={{= postId }}
is used to specify that the operation or data retrieval should be related to a particular post, identified by its unique ID (postId
). The {{= postId }}
acts as a dynamic placeholder that is replaced with the actual ID of the post in question, allowing for tailored interactions or data fetches based on the specific post being viewed or edited.
Page
./AddTag
This property indicates the relative path to a specific page or component within the application, named "AddTag." The ./AddTag
value suggests that this page is dedicated to the functionality of adding new tags, located within the same directory or level as the reference point in the application's structure. This setup facilitates easy navigation and modular development, ensuring that users can access the tag addition features seamlessly as part of their interaction with the app.
Entity Set or Navigation Property
/Tags
This property specifies the path used to fetch data. In this context, the value "/Tags" indicates that the data for the entity items will be retrieved from the "Tags" endpoint in the OData service.
Property Name
Tags
Name assigned to the Reference Input field
Data Path Template
/Tag
The Data Path Template
specifies the API endpoint or route for accessing tag-related data. The value /Tag
designates the path to the resource where tags are stored or managed in the backend. This path is utilized by the application to perform operations such as retrieving, adding, or updating tags, ensuring a direct link to the tags resource for efficient data handling.
Query
Posts/all(s:s/PostId ne {{= postId }})
This query is designed to filter and retrieve data based on certain conditions related to posts. Specifically, it ensures that only posts not matching a specified post ID (PostId ne {{= postId }}
) are fetched. The {{= postId }}
is a dynamic placeholder that gets replaced with an actual post ID during the query execution, allowing for the exclusion of a specific post from the results.
List Title Template
{{= Name}}
This property defines the template for displaying the title of each item in a list, particularly when dealing with a collection of tags. The {{= Name}}
template dynamically inserts the name of the tag from the retrieved data, ensuring that each list item accurately reflects the tag's name. This approach provides a clear and direct representation of tags in the user interface, enhancing navigation and selection within the application.
Navigation Page Item
Title
Article Tags
Icon
tags
Title
Add Tag
Icon
nn_more
Role Name
Staff
Target URL
/Tag
Page Name
AdminList2_ListItem - this page is autogenerated by the system its name might vary.
Target URL
/Tag
Input
Property Name
Name
Input
Property Name
Icon
Button
Button Text
Add
Verb Name
POST
ActionButton
UrlTemplate (OData resource path)
/UserProfile(guid'{{=userguid}}')/Posts({{= postId }})
DocumentTemplate (OData body) SME Note: DocTemplate control deprecated, should be replaced with a Content control
{"NewsId":{{= NewsId }},"Deleted":"{{= now }}"} OR
{"odata.type": "Demo211026.PersonalNotification","Message": "{{= Message }}", "Subject": "{{= Subject }}", "ClickAction": "{{= ClickAction }}"}
BlockTemplate
BlockUrl (OData resource path)
SME Note: Get clarity from Developers
QueryFilter (OData query option, value for $filter)
SME Note: Get clarity from Developers
EntityListItem
EntitySetOrNavProperty (OData resource path)
SME Note: Get clarity from Developers
QueryFilter (OData query option, value for $filter)
SME Note: Get clarity from Developers
FormInput
PropertyNav (navigation portion of an OData resource path)
SME Note: Get clarity from Developers
ReferenceInput
PropertyNav (navigation portion of an OData resource path)
SME Note: Get clarity from Developers
DataPathTemplate (OData resource path)
SME Note: Get clarity from Developers
Query (OData query option, value for $filter)
SME Note: Get clarity from Developers
ListLink
DataPath
/EDBusiness
Query
Open Code Box to add Query string:
Deleted eq null and ShowListing eq true and (LicenceExpiry eq null or LicenceExpiry ge DateTime'{{=now}}')
SingleListItem
DataPath
/EDBusiness
AppObject
DataServiceUrl (OData service root URL)
/Fault({{= faultId}})
SortOrder (OData query option, value for $orderby)
Created desc OR Deleted eq null
Button Text
Add
This property specifies the text to be displayed on a button, guiding users on the action that will be performed upon clicking. The value "Add" indicates that the button is intended for operations that involve adding new items, entries, or data into the application. It's a clear call-to-action for users to initiate an addition process, whether it's adding a new post, tag, or any other entity within the application's context.
Verb Name
PATCH
The Verb Name
refers to the HTTP method used for a particular operation in web development, especially in API calls. The value "PATCH" specifies that the operation involves partially updating an existing resource. Unlike PUT, which replaces the entire resource, PATCH is used to make changes to specific fields of a resource without altering the entire data set. This method is commonly used for updating records or settings in an application, allowing for more efficient and targeted data modifications.
Document Template
{"url":"http://localhost:82/blogapp/ds.svc/Tag({{= Tags/TagId }})"}
CRUD refers to the four major functions implemented in database applications, namely create, retrieve, update and delete.
The CRUD functions are the user interfaces to databases, as they permit users to create, view, modify and alter data. CRUD works on entities in databases and manipulates these entities. Any simple database table enforces CRUD constraints.
Razor is a markup syntax for embedding .NET based code into webpages.
Razor is a markup syntax that lets you embed server-based code (Visual Basic and C#) into web pages.
Server-based code can create dynamic web content on the fly, while a web page is written to the browser. When a web page is called, the server executes the server-based code inside the page before it returns the page to the browser. By running on the server, the code can perform complex tasks, like accessing databases.
Razor is based on ASP.NET and designed for creating web applications. It has the power of traditional ASP.NET markup, but it is easier to use and easier to learn.
The following links will provide you with more information on OData.
Privacy by Design means building privacy into the design, operation, and management of a given system, business process, or design specification.
The idea is that data protection in data processing procedures is best adhered to when it is integrated into the technology. There is, however, still uncertainty about what “Privacy by Design” means, and how one can implement it. So let's explore this a little further.
The concept of Privacy by design is based on seven "foundational principles":
Proactive not reactive; preventive, not remedial The ComUnity platform will anticipate and take care of any privacy issues before they occur and not after.
Privacy as the default setting The user will not need to do anything to protect their data, it's protected by default.
Privacy embedded into the design Privacy is a core feature, it is not an add-in nor is it a detriment to functionality.
Full functionality – positive-sum, not zero-sum The best privacy measures should not lead to sub-standard functionality.
End-to-end security – full lifecycle protection The privacy design should protect the user's privacy from beginning to end.
Visibility and transparency – keep it open All privacy policies and their implementation should be open, transparent and verifiable.
Respect for user privacy – keep it user-centric Privacy should be user-friendly so that all users can manage their own data.
We hope you found this short guide a useful introduction to designing for privacy, and highly recommend that you read more in the sources below.
In practice, this consideration is already performed in an early development phase when setting technology decisions. Recognised certification can serve as an indicator to authorities that the persons responsible have complied with the statutory requirements of “Privacy by Design”.
Sources and further reading:
Temporal Tables are useful in scenarios that require tracking of data changes in a database environment
Use cases for temporal tables include any of the following scenarios:
Use temporal system-versioning on tables that store critical information for which you need to keep track of what has changed and when, and to perform data forensics at any point in time.
Unlike a data audit, where the focus is typically on changes that occurred to individual records, in time travel scenarios users want to see how entire data sets changed over time.
Anomaly detection is the identification of items that do not conform to an expected pattern or other items in a dataset.
Dimensions in data warehousing typically contain relatively static data about entities such as geographical locations, customers, or products.
You can rely on historical data in system-versioned temporal tables to quickly repair individual rows to any of the previously captured states.
Instead of starting from scratch, we will use a predefined template project to accelerate development, allowing us to focus on integrating external data via GraphQL.
By the end of this tutorial, you will:
Register and configure a GraphQL API in the ComUnity Developer Toolkit.
Define a Virtual Entity to model external country data from the API.
Expose the API via WebApiConfig and Custom Classes for structured data interaction.
Query and display country data using GraphQL queries within the Toolkit.
Access Requirements
A ComUnity user account with the necessary permissions (contact ComUnity Support if required).
A single-tenant environment is required for API integration (organisations must host their own instance of the Toolkit in Azure).
If a single-tenant instance is unavailable, users can request access to the shared ComUnity Platform environment (API management is not supported in this environment).
Technical Knowledge
C# programming skills
Development Tools
Visual Studio 2022 (Community, Professional, or Enterprise)
Project Setup Before proceeding with the GraphQL API integration, ensure that you have:
Registered a user account in your app – Sign up and log in within your app
Once your project is ready, you can proceed with configuring the GraphQL API.🚀
To configure the GraphQL API in the ComUnity Developer Toolkit, follow these steps:
Obtain the GraphQL Specification Document
Click the Schema icon in the left panel.
Select the SDL tab.
Download the API Schema as a raw file.
Register the GraphQL API in the Toolkit
In the ComUnity Developer Toolkit, navigate to Third Party Services > APIs.
Provide a name and an optional description for your API.
In the Provide Service URL field, enter:
Click the Select file button and upload the schema file downloaded in the previous step.
Click the Add Azure API to your project button to register and configure the API in Azure API Management (APIM). This process ensures the API is properly registered and available for further integration within the Toolkit.
Verify the API Registration in Azure
After the API is registered, click the ellipsis (⋮) button next to the API in the Toolkit and select View in Azure Portal.
You will be redirected to Azure API Management (APIM).
Locate your newly created API under APIs (use the search function if needed).
Open the Settings tab and check for any schema validation errors to confirm the API was successfully registered.
Test the Countries GraphQL API in Azure
In Azure API Management (APIM), navigate to the Test tab.
Copy and paste the following GraphQL query into the Query Editor:
Click Send to execute the query.
Verify the response data to confirm that the API is correctly retrieving country details. Once confirmed, you can proceed to define a Virtual Entity for structured interaction with the API within the Toolkit.
code → string
name → string
native → string
phone → string
For guidance on configuring table security and surfacing entity data to user roles, refer to:
Expose the Countries API via an Virtual Entities and Custom Classes
Go to Custom Classes in the Toolkit select the WebConfigApi class and register your Virtual Entity as shown below (line 21):
Update the Country entity class as shown below:
Update your controller class as shown below:
Navigate Screens in the Toolkit and create a Countries Navigational page.
Set an icon of your choice
Add a List item to your screen
Click the List item to activate it
In the Properties Editor set the fields below with the values shown to set up your screen:
Data Path:
Item Title :
Build and Launch your project and view your countries in your application.
This tutorial demonstrated how to integrate a GraphQL API into a ComUnity Toolkit application using the APIs feature, powered by Azure API Management. By connecting to the open-source Countries GraphQL API, we illustrated how to register and configure APIs, define Virtual Entities, and transform GraphQL queries into OData-compliant operations using custom classes and controllers.
This approach not only enables controlled data access through the Toolkit but also allows developers to model and expose external data using familiar tools and standards. The flexibility to work with GraphQL—despite the Toolkit’s OData-first design—shows how adaptable the platform is for diverse integration scenarios.
To further extend this implementation:
Try adding GraphQL queries with parameters, such as querying countries by continent or language.
Explore mutation operations and how they can be adapted into REST-style POST requests for OData compatibility.
Improve the UI to display more detailed country data or filter results.
By applying these techniques, you’ll be able to build dynamic, data-rich applications that consume a variety of third-party APIs while maintaining a well-structured data model and user experience within the ComUnity Platform.
The ComUnity Development Toolkit offers advanced templating capabilities that enhance dynamic data rendering and application interactivity. Within the Toolkit, application definitions are designed to support template values, streamlining the runtime binding of data and arguments.
Template Syntax
The standard format for a template is expressed as:
At runtime, the template {{=<name>}}
is seamlessly replaced with the corresponding data value for name
. If the value is not available in the current context, the template reverts to an empty string.
Fields Supporting Templated Values
The fields in the Toolkit that typically support templated values are Data Path and Target URLs. These fields allow for dynamic referencing and navigation within the application, ensuring that data is always accurately presented and linked.
Key Features:
Templating in Markdown:
Templated Parameters in OData Queries:
Dynamic Data Navigation Between Screens:
Templating isn't limited to just data fetching. It also extends to inter-screen data navigation. By using templated URLs, developers can pass data between different screens in the application. For example, the following Target URL can be used to navigate to the FaultEditPage
and pass the faultId
value:
In this scenario, the {{= FaultId }}
placeholder gets substituted with the actual FaultId
variable's value when the URL is triggered. This mechanism removes the necessity of hardcoded values, ensuring a more dynamic navigation experience.
The following are the templating rules:
The {{= <name> }}
template is used to replace the placeholder <name>
with the value of the property name
in the JSON payload.
The {{= <object>/<property> }}
template is used to replace the placeholder <property>
with the value of the property property
in the object <object>
in the JSON payload.
The .
and /
characters are interchangeable in the templates, so they can be used interchangeably to access properties in the JSON payload.
There are also special tags:
These tags can be used to access information that is not stored in the JSON payload, such as the current user's Id or the current time.
Example
The following JSON payload is returned from the Data Service:
The following table shows how each template is parsed during runtime:
Template
Parsed Value
Hello {{= name }}, welcome back
Hello John, welcome back
{{= UserProfile/Suburb }}
Rivonia
{{= Business.BusinessType.Name }}
Restaurants
Address: {{= Address }}
Address:
There are two types of contexts in the ComUnity Development Toolkit:
User context: This context is always available and contains the session values from the UserProfile table for the current user. The values can be accessed using the following templates:
{{= profile/Cell }}
{{= profile.Name }}
Page / Form context: This context is unique and derived from a record and/or link argument values. The values can be accessed using the following templates:
{{= linkArgName }}
- for a link argument (i.e. recordId
)
{{= FieldName }}
- for a specific field on a record (i.e. Name
)
The user context is the most common context and is used to access the user's session values, such as their name, email address, and role. The page / form context is used to access the values of the arguments passed from parent links and the fields of the record that the page is referencing.
In this tutorial, we focus to building a robust communication framework within news application on the ComUnity Platform, leveraging pre-built modules and functionalities available in the Toolkit. Starting with templates modules as our foundation, you’ll gain insights into efficiently integrating and customising these components to suit your application needs. As we progress, the tutorial will guide you through the setup of various communication channels—such as in-app messaging, push notifications, SMS, and email—offered by the Toolkit.
This structured approach not only simplifies the development process by using existing, well-tested modules but also lays a solid foundation for understanding how to establish effective communication mechanisms. By exploring these foundational setups, you will acquire the skills necessary to further enhance and scale any application on the dynamic ComUnity platform. By the end of this guide, you’ll not only have a bespoke blog application equipped with sophisticated communication tools but also the expertise to expand and adapt these functionalities to create more comprehensive applications.
In this comprehensive guide, you will:
Integrate Pre-built Modules: Learn how to seamlessly integrate pre-built modules when creating your project, utilising existing functionalities to speed up development.
Extend the Data Model: Expand the data model to include new entities that facilitate the integration of various communication channels, ensuring a robust foundation for your application’s communication needs.
Set Up Communication Process: Define communication events and create templates for channels like in-app messaging, push notifications, SMS, and email. Implement change interceptors to dynamically manage messages, then activate these communication channels to start operations.
Test Communication Functionality: Verify that the communication setup works as expected, ensuring reliable and effective communication throughout your application.
Internet connection
ComUnity user account with appropriate access (contact ComUnity support)
Start with the integration of necessary pre-built modules into your project, setting up the core functionalities of your blog application.
Configure initial project settings to incorporate these modules, ensuring they fit well within the overall application architecture.
Extend your existing data model to include new entities necessary for supporting the planned communication functions, such as entities for communication preferences, logs, and user interactions.
Define and configure relationships between these new and existing entities to ensure smooth data flows and functionality integration.
1. Configuration of the Communication Template
Start with a Single Channel: Begin by configuring one communication channel, such as In-App Messaging. This channel should be set up to manage messaging operations triggered by user interactions or other specified events.
Configure Additional Channels Sequentially: Continue by setting up additional channels such as Push Notifications, SMS, and Email. Configure each channel one at a time to ensure detailed attention and comprehensive setup.
2. Adapting Change Interceptors for Event Handling
Implement Change Interceptors: For each configured channel, implement change interceptors. These interceptors are crucial for handling specific events that trigger communications, such as new post alerts, comment notifications, or urgent updates.
Ensure Effective Data Manipulation: Verify that interceptors are effectively accessing and manipulating the required data. They should integrate seamlessly with the communication functionalities to provide a smooth operational flow.
After configuring and setting up interceptors for a channel, conduct rigorous testing to ensure that communications are triggered appropriately and data handling is correct.
Validate the integration of each channel’s setup within the application, checking for performance issues or data inconsistencies.
Regularly publish these configurations to the ComUnity platform to test in a live-like environment, gathering feedback for iterative improvements.
In this section, we'll walk you through the process of creating a project by utilizing pre-defined templates within the ComUnity Developer Toolkit. This approach allows you to leverage existing templates to quickly establish the foundation of your news application. Here are the steps to get started:
Login into the ComUnity Developer Toolkit.
Create a project using the Custom Project template with a unique title, add search to add the News, Feedback and Notification templates in the Select one or more templates to the project field an illustration is shown in the following diagram:
Build your project to verify the integrity of your Data Model and ensure that it is free from any errors.
In this section, we will focus on extending the Data Model. This involves creating additional entities that are crucial for configuring various communication channels within your application. We will also establish the necessary associations between these entities to ensure seamless data integration and functionality, in addition to that we will also configure table security settings for these entities to specify entity-level permissions, ensuring data integrity and access control.
ShareWithFriend
FriendCell
string
-
Checked
-
In this step, we'll establish Table Security rules for the entities we've previously created. These rules are crucial as they determine who has the permissions to view, edit, and delete data within the table linked to each entity. the images that follow show the desired permission for the entities we added in the previous steps. Adjust the permissions by checking (to grant) or unchecking (to revoke) the relevant boxes for each role:
UserProfile
ShareWithFriend
One is to Many
Shares
0..*
Sender
0..1
Build your project to verify the integrity of your Data Model and ensure that it is free from any errors.
We have successfully extended the Data Model, created necessary entity associations, and configured table security to enhance your application's communication functionalities. These steps ensure robust data integration and controlled access, preparing your system for advanced features.
Next, we will focus on configuring communication events and event triggers, which are essential for activating the application’s communication channels under specific conditions.
In this section, we will focus on the configuration and setup of interceptors for key communication channels within your application. These channels include:
This setup involves detailed configuration of each specified templates, along with the implementation of interceptors that activate these communications under appropriate conditions. This framework not only supports these initial communication functionalities but is also designed to be scalable, allowing for the integration of additional channels as your application develops.
To enable the feature that allows users to share your application with friends via SMS, follow these detailed steps:
Access the Communication Settings:
In the Toolkit, navigate to the sidebar and click on the "Communication" menu item. This will display any existing events in your project on the Communication screen.
Click the "+Add an event" button. In the pop-up modal, select "ShareWithFriend" under the Entity field and "OnAdd" under the Event field. Leave the Name field at its default value "Default" and click "Create" to create the event.
Configure the Event:
Select the event you just created, click its corresponding pen icon this will open the Action Templates modal of the current event.
Under the Details tab, ensure the Template Name reads "OnAddSharewithFriendDefault".
Switch to the SMS tab and click "Add SMS Template" and fill in the fields as instructed below (details for these fields should be provided here).
Cell Number
Message
Click "Save" to finalise the event configuration.
Integrate Custom Code:
Go to Data > List and select the "ShareWithFriend" entity, then click More Settings > Custom Code. A text editor will open showing the custom code associated with the current entity.
Find the "OnAdd" change interceptor and add the specified code below the relevant comment.
Close the text editor and click "Save" in the Properties Editor to apply the changes.
Create the Share Screen:
Click on the "Screens" menu item in the sidebar.
Find the Feedback screen, click the three-dot button next to it, and select "Add screen below".
In the modal that appears, set the Title to "Share", keep the default setting of "Form page" for the Screen type, and click the "Add screen" button.
Configure Screen Properties: Select the Share screen and open the Properties Editor to adjust its settings as detailed in the following table. Focus only on the properties mentioned; leave all other properties at their default values unless specified otherwise.
Title
Target URL
Icon
Entity Name
ShareWithFriend
Build Screen Content: After setting the screen properties, build the content of the Share screen as outlined in the table below. Adjust screen controls and their properties as necessary to achieve the desired layout and functionality. Be sure to click the "Save" button in the Properties Editor to apply and preserve your changes.
Paragraph
Markdown
Input
Property Name
Button
Success Content
Button Text (Long)
Paragraph
Markdown
Build and Launch your project that it is error-free. This step is crucial to confirm that all new configurations and code integrations have been correctly implemented. Launching your project also allows you to view changes in real-time, providing an immediate visual confirmation that your application behaves as expected.
To enable the feature that allows users to share feedback about your application with friends via Email, follow these detailed steps:
Access the Communication Settings:
In the Toolkit, navigate to the sidebar and click on the "Communication" menu item. This will display any existing events in your project on the Communication screen.
Click the "+Add an event" button. In the pop-up modal, select "Feedback" under the Entity field and "OnAdd" under the Event field. Leave the Name field at its default value "Default" and click "Create" to create the event.
Configure the Event:
Select the event you just created, click its corresponding pen icon this will open the Action Templates modal of the current event.
Under the Details tab, ensure the Template Name reads "OnAddFeedbackDefault".
Switch to the Email tab and click "Add Email Template" and fill in the fields as instructed below (details for these fields should be provided here).
To Address
FromAddress
Subject
Text Body
Click "Save" to finalise the event configuration.
Configure Communication Environment Variables - CustomerSupportEmailAddress
Locate and click Environment Settings' cog icon in the Toolkits top-navigation bar
Go to Communication > Custom Values tab, all custom environmental communication variables associated with your project will be displayed
Click Add a configuration setting a Add configuration modal will appear set the Name to CustomerSupportEmailAddress and the Value to a ComUnity Platform issued email address.
Click "Add" button.
Integrate Custom Code:
Go to Data > List and select the "Feedback" entity, then click More Settings > Custom Code. A text editor will open showing the custom code associated with the current entity.
Find the "OnAdd" change interceptor and add the specified code below the relevant comment.
Close the text editor and click "Save" in the Properties Editor to apply the changes.
Build and Launch your project that it is error-free. This step is crucial to confirm that all new configurations and code integrations have been correctly implemented. Launching your project also allows you to view changes in real-time, providing an immediate visual confirmation that your application behaves as expected.
To enable the feature that allows users to receive in-app notifications about new news articles published in your application, follow these detailed steps:
Access the Communication Settings:
In the Toolkit, navigate to the sidebar and click on the "Communication" menu item. This will display any existing events in your project on the Communication screen.
Click the "+Add an event" button. In the pop-up modal, select "News" under the Entity field and "OnAdd" under the Event field. Leave the Name field at its default value "Default" and click "Create" to create the event.
Configure the Event:
Select the event you just created, click its corresponding pen icon this will open the Action Templates modal of the current event.
Under the Details tab, ensure the Template Name reads "OnAddNewsDefault" and fill in the fields as instructed below (details for these fields should be provided in the table below)
Member OData List URL
Member ID OData Field
Click "Save" to finalise the event details configuration.
Select In App tab, fill in the fields User Id, Action, Title and Message, as instructed below (details for these field values should be provided in the table below):
User ID
Action
Title
Message
Click "Save" to finalise the in-app notification template configuration.
Integrate Custom Code:
Go to Data > List and select the "News" entity, then click More Settings > Custom Code. A text editor will open showing the custom code associated with the current entity.
Find the "OnAdd" change interceptor and add the specified code below the relevant comment.
Close the text editor and click "Save" in the Properties Editor to apply the changes.
Build and Launch your project that it is error-free. This step is crucial to confirm that all new configurations and code integrations have been correctly implemented. Launching your project also allows you to view changes in real-time, providing an immediate visual confirmation that your application behaves as expected.
To enable communications, specify channel priorities within the channel settings. This activation is essential for starting the communication process.
To initialise communication channels, follow these steps:
In the Toolkit, navigate to the Project name in the bottom left of the navigation bar click the Project Settings cog icons, the Project settings modal will appear:
Select the Communications tab to view Channel Priorities in your project if any exist:
Click +Add a channel priority button in the Add a channel priority modal that appears select EMAIL and click the Add button.
Repeat the step above to select on channels INAPP and SMS.
Launch your project and proceed to test the Communication we have set up in the previous steps.
To ensure that the communication events and event handlers set up in your project function as intended, we recommend conducting thorough testing by following typical user actions within the application. Below are step-by-step instructions to test each communication channel, using the example of sharing the app with friends via SMS:
Launch the Web App:
Start by launching the project web application to access its features.
Create and Use a User Account:
Sign up to create a new user account.
Or else, sign in with your new account credentials.
Create Another User Account with Staff Role:
Sign Up for a Second Account:
Repeat the sign-up process to create a second user account.
Assign Staff Role:
Test SMS Communication:
Navigate to the Share page within the web app.
Enter a valid cell phone number into the "Friend Cell" field.
Click the "Share" button.
Verify that the cell number entered receives the intended SMS message, confirming that the SMS functionality is working correctly.
Test Email Communication:
Navigate to the Feedback page within the web app.
Enter feedback in the "PLEASE ENTER FEEDBACK" field.
Click the "SEND" button.
Verify that the email address you configured to receive feedback email receives the intended email message, confirming that the Email functionality is working correctly.
Test In-App Communication:
Sign In as Admin:
Use your admin account credentials to sign in.
Navigate to News Article Section:
Go to the "Admin" tab in the main menu.
Select "News Article".
Add and Publish a News Article:
Click on "Add New Article".
Fill in the article details (e.g., title, description, detail and photo).
Publish the article.
Check Notifications:
Navigate to the "Notification" tab.
You should see a personal notification alerting you that a news article has been published.
This confirms that the in-app notification functionality is working correctly.
This process simulates a real user's experience, allowing you to confirm the operational effectiveness of communication features and to identify any areas needing adjustment.
A description of Table relationship types which are also defined as Associations
Entity-relationship (ER) models are based on real-world entities and their relationships. Developers understand these systems just by looking at the ER diagram. ER models are normally represented by ER diagrams.
An ER diagram basically has three components:
Entities − It is a real-world thing that can be a person, place, or even a concept. For example, Department, Admin, Courses, Teachers, Students, Building, etc are some of the entities of a School Management System.
Attributes − An entity that contains a real-world property called an attribute. For example, the entity employee has properties like employee id, salary, age, etc.
Relationship − Relationship tells how two attributes are related. For example, an employee works for a department.
A One-to-Many relationship in a DBMS is a relationship between instances of an entity with more than one instance of another entity.
A Many-to-One relationship in a DBMS is a relationship between more than one instance of an entity with one instance of another entity.
A Many-to-Many relationship in a DBMS is a relationship between more than one instance of an entity with more than one instance of another entity i.e. both the entities can have many relationships between each other.
A One-to-One Relationship is an association with the same entity between the same instances represented by the same role group.
A delivery model where specific functionalities, platforms, or business solutions are provided to users on-demand, typically via the cloud. This approach abstracts complexity by offering modular, reusable, and scalable components that can be integrated into broader systems. Examples include Journey as a Service, Platform-as-a-Service (PaaS), and Software-as-a-Service (SaaS).
In the context of the ComUnity Platform, as a Service reflects its capability to provide modular, business-ready digital solutions that cater to both internal and external use cases. The platform supports reusable code and configurations, enabling organisations to build customer journey platforms, business solutions, and enterprise services efficiently. This modularity allows organisations to adopt the platform as a foundation for delivering their services, ensuring scalability, flexibility, and reduced development overhead.
A performance indicator that measures the cumulative number of unique users interacting with the project over a specific period. This metric helps track user engagement and growth trends.
App versioning is the systematic practice of assigning unique version identifiers to distinct releases of an application. It ensures clear differentiation between updates, improvements, and feature changes over time. This process allows developers to maintain compatibility across different app versions, manage upgrades efficiently, and provide a stable user experience. The ComUnity Toolkit includes a versioning feature that simplifies this process, supporting the efficient deployment of app updates across supported platforms.
The URL of an application’s listing on the Apple App Store, used for iOS apps.
The Application the immutable, system-defined identifier of an application, set during project initialisation by the project owner. It is used as the core identifier for the application across development and deployment contexts. The Application Name appears in technical contexts such as browser tabs, internal identifiers, and URLs, ensuring consistency and reliability for system-level interactions. It cannot be changed once defined, maintaining a stable reference throughout the application’s lifecycle.
The namespace associated with the application, which is used for referencing within the project.
The Application Title is a customisable, user-defined label displayed prominently in the application interface, such as in app headers or other user-facing contexts. By default, the Application Title inherits the Application Name but can be modified to suit branding or contextual requirements. Unlike the immutable Application Name, the Application Title offers flexibility and can be updated at any time without affecting the underlying application identifier or system references.
This provides a high-level view of the software's structure and interaction between its components. It often includes diagrams, such as UML diagrams, to illustrate system architecture, data flows, and other structural aspects of the system.
Authentication is the process of verifying the identity of a user or entity attempting to access a system, network, or application. It ensures that the claimed identity is legitimate and authorised to access the requested resources.
Authorisation refers to the process of defining and enforcing access rights and permissions for users, applications, or entities. It determines what actions or resources an authorised entity can access, modify, or perform within the platform, based on roles and organisational policies. This ensures secure and role-based access control across projects and applications.
A feature in the ComUnity Developer Toolkit that allows teams to integrate event-driven, server-less functions into their projects. It enables custom logic, workflow automation, and external service connections without requiring complex infrastructure management.
The set of guidelines provided by Azure for preparing and packaging function apps to ensure compatibility during deployment.
A storage solution integrated into the Media Services component that supports uploading, downloading, and managing large unstructured data files (up to 270 GB).
Internal operations managed by the Communications Service that occur behind the scenes, abstracting complexity from developers.
The default foundational entity from which all other entities in the Toolkit inherit. BaseEntity provides essential fields and properties, such as creation and modification timestamps, which streamline consistent data management across inherited entities.
Domains associated with a custom website in the ComUnity Developer Toolkit. By default, an initial binding (e.g., <<tenantname>>.webdev.comunity.me) is created when a custom website is published. Developers can add multiple bindings to a single custom website, enabling diverse domain configurations. Bindings require DNS registration, which can be managed independently or through the ComUnity Platform’s domain registrar services.
A template option that allows users to create a new project from scratch without any predefined configurations.
A combined action that builds your project and automatically launches the web version in a new browser tab.
A visual representation of your project’s build status, showing yellow for pending, green for success, and red for a failed build.
The build version is the third component in the versioning convention (e.g., x.y.z). It is primarily used for internal tracking of minor incremental changes, such as bug fixes, patches, or optimisations that do not introduce new features. This identifier helps developers and teams manage continuous updates while ensuring stability and consistency throughout the application’s lifecycle.
A mechanism that monitors changes to specific entities or data and triggers events that initiate messaging workflows.
Settings that determine the importance and order of communication channels to ensure messages are delivered efficiently through preferred pathways.
A component of the Observability suite that tracks user interactions, engagement, and feature usage within an application. It helps developers gain actionable insights to guide improvements and future development.
A helper function in the ComUnity Developer Toolkit that simplifies the process of triggering events programmatically. It abstracts complexities by activating messaging workflows with a single call.
Refers to the data exchanged and transmitted through a communication service. It encompasses the information, messages, or signals sent and received between users, devices, or applications using a communication service.
The end-to-end process of triggering an event, configuring templates, and delivering messages through defined communication channels.
An event-driven API within the ComUnity Developer Toolkit that enables developers to integrate centralised messaging workflows triggered by specific application events. These workflows involve the series of actions that occur between triggering an event and successfully delivering a message to target users across multiple channels, including email, SMS, in-app messaging, push notifications, HTTP, and WhatsApp. Communications are centralised, automated, and event-driven to streamline the delivery of messages and enhance user engagement.
Configuration options in the Toolkit that allow developers to define messaging workflows, set channel priorities, and incorporate pre-defined or custom values for dynamic communication.
A service that manages the delivery of messages across diverse communication channels. It operates independently and processes events without referencing other services, such as the Data Service.
The pathways through which communication is delivered, including:
SMS
WhatApp
In-App Messaging
Push Notifications
HTTP
A metric that tracks the number of simultaneous responses handled by the server. Monitoring concurrent responses provides insight into system load and its ability to handle high-traffic conditions.
Refers to the process of specifying and adjusting parameters, options, and preferences that control the behaviour and functionality of an application. This includes setting values for configurable aspects such as database connections, API keys, user interface preferences, feature toggles, and other customisable settings.
Refers to the process of duplicating or replicating entities, such as data objects, files, or database records. It involves creating an exact or partial copy of the original entity for preservation or manipulation separately.
A class responsible for managing the interaction between virtual entities and external services. The controller class handles logic and REST operations, enabling data fetching, updating, and CRUD operations from the external service within the Toolkit.
The process of starting a new project in the ComUnity Developer Toolkit by selecting a template or using a blank template, and entering the necessary project details.
CRUD refers to the four major functions implemented in database applications: create, retrieve, update, and delete. These functions serve as user interfaces to databases, allowing users to perform operations such as creating new records, retrieving existing data, updating records, and deleting records. CRUD operations manipulate entities in databases and enforce constraints on database tables.
A feature that allows users to view how configuration settings are applied across Development, QA, and Production environments, making it easier to spot discrepancies.
A unique domain name added to a custom website in the ComUnity Developer Toolkit. Custom bindings allow developers to configure specific domain addresses for their applications and may require assistance from the Toolkit’s technical team for activation.
System-generated classes within the
<<Project name>>.Custom
namespace, designed to encapsulate custom logic, functionality, or data structures. They allow developers to introduce specialised behaviours, define unique properties, and implement custom functionalities that align with specific project requirements, while promoting modularity and separation of business logic.
A feature that allows developers to upload their own custom icons in the form of SVG files, enabling unique branding and personalised designs.
A feature in the ComUnity Developer Toolkit used to build standalone websites or web applications when the default functionality of the Integrated Navigation and UI Builder cannot meet specific UI requirements. It enables developers to create solutions with customised designs, layouts, and functionalities beyond the capabilities of the Toolkit’s standard screen-building tools.
Customising the data model refers to the process of modifying or extending the structure and schema of a database or data storage system to meet specific requirements or business needs. It involves making changes to entities, attributes, relationships, constraints, and other elements of the data model to align with the unique data structures and functionalities required by the software application.
Sequences of automated tasks or processes that can be created and managed within the Toolkit to handle routine operations or complex data flows using Azure Function Apps.
In the ComUnity Developer Toolkit, data refers to the structured information organised into entities, attributes, and relationships that form an application’s data model. The Toolkit supports defining this model as either a Diagram (Entity Relationship Diagram, ERD) or a List, which is then translated into a Visual Studio project via Entity Framework Code First. This enables an efficient and direct transition from data model design to database structure, optimising data management and customisation.
The structured framework that outlines the organisation of data within a project, including entities, attributes, relationships, and constraints, serving as the foundation for database schema design.
Data privacy refers to the protection of individuals' personal information and ensuring that their sensitive data is handled securely, used appropriately, and not accessed or disclosed without their consent. It involves implementing measures and practices to safeguard data against unauthorized access, misuse, or disclosure.
A data type is an attribute that specifies the type of data that the object can hold: integer data, character data, monetary data, date and time data, binary strings, and so on. The properties of a field describe the characteristics of data added to that field. A field's data type is the most important property because it determines what kind of data the field can store.
Debugging requires the developer to examine the flow of control and the values of variables that caused a bad result, an exception to be thrown, or some other problem, in the process to resolve issues in the build.
In the ComUnity Developer Toolkit, efficient data management includes the ability to delete entities and entity fields when they are no longer needed in your data model. This section focuses on the functionality provided by the toolkit to remove entities and their associated fields.
The process of making a software application or system available and operational in a particular environment. It involves the installation, configuration, and setup of the software or system so that it can be used by end-users or integrated into a larger infrastructure.
A detailed record of past deployments within an environment (e.g., Development, QA). This history includes deployment names, dates, and status, providing insights into deployment patterns and aiding troubleshooting.
The default environment where developers write, test, and refine code. This environment is isolated to ensure code integrity and allows free experimentation before moving the code further down the pipeline.
A graphical representation of the data model within the ComUnity Developer Toolkit. The Diagram view allows developers to visualise entities and their relationships, select entities to view or edit properties, and design data structure visually.
A Digital Platform is a bespoke Platform as a Service (PaaS) product composed of people, processes, and tools that enable teams to rapidly develop, iterate, and operate Digital Services at scale.
A feature in Project Settings that enables the setup and management of domain names associated with a project, ensuring accurate URL mappings across deployment environments. This feature is applicable to versions of the Toolkit prior to 24.x.
Configurable templates that define the behaviour, content, and delivery of messages for specific events. These templates can be customised across supported communication channels, such as email, SMS, in-app messaging, push notifications, HTTP, and WhatsApp.
Refers to the process of generating and displaying lists or collections of data dynamically within a form-based web page or application. It involves populating a list or dropdown menu with data retrieved from a data source, such as a database, API, or user input, allowing users to select or interact with the list items.
A distinct data object or concept within a data model, representing a real-world item (such as a customer or product) that includes attributes to define its characteristics and relationships to connect with other entities.
Associations refer to the relationships between different entities in a data model, such as one-to-one, one-to-many, or many-to-many. These associations define how entities are logically connected or related within the model.
A security measure that manages permissions at the entity level, determining which roles have access to specific entities. Entity-Level Access Control allows developers to configure entity access based on the roles defined in the project, ensuring data privacy and security.
The organisational structure where entities share common attributes and behaviors through inheritance. This feature allows developers to set up parent-child relationships, enabling entities to inherit properties and reduce redundancy in the data model.
In the ComUnity Developer Toolkit, Entity Navigations are properties within an entity class that provide access to related entities in the data model. Leveraging Entity Framework Code First, these navigations are automatically generated based on defined associations, allowing developers to traverse relationships, such as one-to-many or many-to-many, and enabling easy access to associated data directly within the code. Defined as reference or collection properties, entity navigations streamline the retrieval and management of related entities, supporting efficient interaction across connected data structures.
The set of attributes and configurations that define an entity’s characteristics within the data model. These properties include name, data type, constraints, and relationships, offering control over the structure and behaviour of each entity.
A graphical representation of an application’s data model showing data entities, their attributes, and the relationships between them. ERDs aid developers in understanding, designing, and optimising complex data structures within a database schema.
The structured arrangement of entities within the data model where entities inherit properties and behaviours from parent entities. This hierarchical setup promotes data consistency, reuse, and logical organisation, especially in complex models.
The distinct stages in the deployment process, each designed to handle specific aspects of development, testing, and live production. These include Development, QA/Testing, and Production environments, with visual cues to differentiate them.
A configuration requirement where observability features must be activated for each deployment environment individually. This ensures precise monitoring and analysis of application performance in different environments.
The process of detecting errors and exceptions within an application using trace data. Tracing enables developers to trace errors back to their source for faster resolution.
A specific occurrence or action within an application that serves as a trigger for messaging workflows. Events are associated with entities and initiated programmatically using helper functions like CommsService.TriggerEvent().
A significant system-level occurrence or change that is logged and monitored for system integrity, performance, and user awareness. Events are categorised into Platform, Organisation, Project, Toolkit, or Unknown and are associated with severity levels to prioritise responses.
A mechanism that executes predefined automated workflows or responses in reaction to events or notifications triggered by the communication service. Event Actions monitor specific events or signals and perform actions based on those triggers, enabling efficient and automated responses within the system.
A software design pattern where messaging workflows are initiated in response to events. The ComUnity Platform leverages this architecture to facilitate communication through events exposed via REST APIs.
The configuration settings for event templates. This includes specifying data sources and key information required for building dynamic templates.
Templates that govern the behaviour and delivery of messages for an event. Developers can configure these templates by customising their content, format, and channel-specific settings.
Refers to the different categories or classifications of data that can be stored within a field or column of a database or data structure. It defines the type of data that can be assigned to a particular field and determines how the data is stored, validated, and processed.
Refers to interactive elements or components used in user interfaces to gather input from users within a form. They provide a way for users to enter data, make selections, and interact with a software application or website.
A human-readable name mapped to the SHA file name in the Filenames Data Service for ease of identification and retrieval.
A Form page is a screen type used for embedding forms to perform Create, Read, Update, and Delete (CRUD) operations. It can also display static elements (e.g., text, images) and dynamic lists. Form Pages can be integrated as top-level navigation screens or as sub-screens linked through Page Links and other controls. They are configurable with properties like title, icons, role-based access, entity names, and Target URLs for data operations.
An attribute in an entity that links it to another entity, enforcing a relationship through a reference key. In the ComUnity Developer Toolkit, foreign key properties are automatically generated in entity associations, ensuring data integrity between related entities.
A complete deployment of all components of an application, including the Data Service, Authorisation Service, Client, Communication Service, Configuration, and Screens. Full deployment is used for major updates or when structural changes require all components to be redeployed.
A compressed .zip file containing the core code and configuration files for an Azure Function App. This package must meet Azure specifications and include only essential files to ensure successful deployment.
A set of operations applied to images fetched from the Media Server for manipulation. Examples include resizing, cropping, rotating, blurring, and applying effects such as sepia or oil painting.
Complex templates designed to create fully-fledged applications with multiple features. These can be selected during project initialisation or applied to extend the functionality of existing projects.
A parent-child relationship between entities within the data model established through inheritance. Hierarchical relationships allow child entities to inherit attributes from parent entities, supporting efficient data modelling and minimising redundant configurations.
The Hierarchical Structure within the ComUnity Developer Toolkit refers to the organisational layout of screens using a tree-like format, where top-level screens act as primary nodes that define the application’s main navigation. These screens can have nested child nodes (Navigation and Form pages), creating a structured navigation flow for managing content and user interactions.
A declarative system in the Media Services that dynamically processes images to adapt them to device capabilities, optimising bandwidth and processing resources.
Parameters appended to image URLs to manipulate images dynamically. Examples include
$resize
,$crop
,$rotate
,$blur
,$sepia
, and more.
A feature in the ComUnity Developer Toolkit that enables entities to inherit properties and behaviours from a designated parent entity. Inheritance allows for the creation of hierarchical relationships within the data model, reducing redundancy and facilitating efficient data structure design.
A property in each entity’s configuration that specifies its parent entity, defining the inheritance relationship. By setting the Inherits from Entity value, developers can establish hierarchical links between entities, creating a layered structure within the data model.
Refers to the feature in the ComUnity Developer Toolkit that enables developers to create and manage navigation structures and user interfaces for screens.
Refers to the process of connecting different software systems, services, or components to work together and exchange data seamlessly. It involves creating bridges between disparate systems to enable interoperability and streamline workflows.
Refers to the textual information embedded within an image or associated with an image. It involves the practice of including descriptive or explanatory text within the image itself or providing text content that is related to the image.
An open-source tracing tool integrated into the ComUnity Platform for monitoring and troubleshooting distributed systems. Jaeger supports the collection, visualization, and analysis of trace data to enhance system observability.
A security feature that allows sensitive configuration settings, such as passwords and API keys, to be stored securely using Azure’s Key Vault, providing encryption and protection for these values.
An action that opens the web version of your project in a browser without rebuilding, used when no modifications have been made since the last build.
Icon sets from older versions of the ComUnity Developer Toolkit that are still supported for backward compatibility.
Refers to the process of dynamically generating and rendering a list of items in the navigation pane or sidebar of a user interface. This list is populated with data retrieved from a data source or generated programmatically.
A non-graphical, structured representation of the data model within the ComUnity Developer Toolkit. The List view organises entities and their properties in a list format, allowing developers to manage data structure through a straightforward, text-based interface.
The first number in the versioning convention (e.g., X.0.0), representing significant changes or breaking updates to the application. These updates may introduce new functionality, alter existing features, or require user intervention to upgrade due to potential compatibility impacts.
A secure media server configuration that enforces permission-based and time-bound access to storage resources, increasing application security.
The current process by which the Toolkit Administrator assigns users to organisations manually, after which the Organisational Administrator assigns their specific roles.
An icon library integrated into the Toolkit, offering icons based on Google’s Material Design principles.
Content types supported by the ComUnity Platform’s Media Services, including structured data (API-driven) and unstructured data (e.g., files, images, videos). Media enriches digital solutions by enabling efficient content processing and management.
A robust component of the ComUnity Platform responsible for processing and managing structured and unstructured data, supporting operations such as uploads, downloads, and media transformations.
Quantitative data points that monitor the real-time performance, resource utilisation, and operational health of an application. Metrics help identify system behaviour trends, optimise resource usage, and resolve issues proactively.
A visual interface in the ComUnity Toolkit that presents detailed metrics data, including graphs and trends, to monitor project performance. It includes key indicators such as server response times, concurrent responses, accumulative users, and daily request volumes.
The URL of an application’s listing on the Microsoft Store, used for Windows apps.
The second number in the versioning convention (e.g., 1.X.0), indicating incremental updates that add new features or improvements without introducing breaking changes. Minor versions enhance functionality while maintaining compatibility with existing systems.
Refers to a computer or network device that stores, manages, and distributes multimedia content such as audio, video, images, and other media files.
Refers to a logic-less template syntax that allows developers to generate dynamic content by filling in placeholders within a template. It separates presentation and logic, making web applications easier to maintain and reuse.
Navigation pages are specialised screens in the ComUnity Developer Toolkit that enable the creation of complex navigation structures within an application. They are versatile, capable of displaying both static content (like text, images, and lists) and dynamic content retrieved from entities, lists, or custom objects. These pages are based on the List node type, allowing them to contain other Forms, Lists, and Screen Controls, making them highly adaptable to various navigation requirements. Navigation Pages can be directly integrated into the navigation hierarchy, enhancing the flexibility and depth of your app’s structure.
A feature in the ComUnity Developer Toolkit that provides tools to monitor and analyse an application’s performance, usage, and behavior across deployment environments. It includes capabilities such as client analytics, metrics, and traces to offer comprehensive insights.
A prerequisite for accessing the Metrics Dashboard. Observability must be enabled in the project’s deployment environment to collect and display performance metrics.
A type of entity association in which a single entity instance is related to multiple instances of another entity. In the Toolkit, a one-to-many relationship is established using Table Links, allowing efficient structuring of hierarchical data.
A type of entity association where each instance of an entity is linked to a single instance of another entity. This relationship is configured through Table Links, creating exclusive pairs between entities for structured data alignment.
A unified observability framework integrated into the ComUnity Platform that provides standardised tools and APIs for generating and exporting tracing and metric data.
A conceptual framework used to represent trace data. It defines the structure and relationships of traces, spans, and associated metadata within distributed systems.
In the context of the Toolkit, an Organisation refers to a structured entity, typically representing a company or group, within which users, teams, and projects are managed. An Organisation is registered on the platform and is overseen by an Organisation Administrator, who has full control over its users, teams, projects, and settings.
A user responsible for managing all aspects of an organisation within the Toolkit, including managing teams, users, and projects. They have full control over the organization and can assign roles and responsibilities to team members. The user responsible for the complete management of an organisation within the Toolkit.
Events related to organisational activities, such as user management actions, role assignments, and policy updates, which serve as triggers for workflows within the application.
The feature in the Toolkit that enables Organisation Administrators to manage users, teams, and projects within their organisation. This functionality supports a structured and collaborative environment by offering tools for effective oversight.
A section in the Toolkit accessible only to admins, where the Organisation Administrator can view and modify key details of their organisation, such as the organisation name and user roles.
The name of the organisation linked to the project, displayed within the General section.
Settings accessible to organisation admins that allow for the comprehensive management of the organisation. This includes managing user roles, permissions, teams, and general organisational settings.
A Page Link is a screen control in the ComUnity Developer Toolkit used to extend the navigation hierarchy by linking Navigation pages to Form pages. This control facilitates the creation of system-generated Form pages, configurable with properties such as layout type, icons, and access permissions. By using Page Links, developers can efficiently connect different sections within the application, optimising navigation flow and enhancing the user experience.
A setup process initiated by clicking "Create Page Analytics Configuration" in the environment settings. This action activates observability features, allowing data collection for analytics, metrics, and traces.
A deployment method where only specific parts of the application (e.g., Authorisation Service, Communication Service, Configuration) are updated. It is used for minor updates or fixes that do not require redeploying the entire application.
Critical system-level occurrences within the platform, such as outages, resource limits (e.g., disk space or memory), or critical errors, that trigger messaging workflows or require immediate attention.
The specific actions and operations a user is allowed to perform based on their assigned role. Permissions control access to sensitive features and data within the Toolkit.
A specific point in an application workflow where performance is significantly slowed, often identified using trace data. Bottlenecks can include long request durations, resource contention, or inefficient processes.
The practice of tracking, analysing, and optimising key performance indicators (KPIs) such as response times, request volumes, and user engagement to maintain system health and reliability.
An intuitive configuration tool within Table Security that displays a list of available roles and associated permissions. This interface allows developers to easily enable or disable permissions for each role, providing precise control over entity access.
The deep purple environment where fully tested and stable applications are deployed for end users. This is the final stage in the deployment process and requires careful planning to maintain service continuity.
A project in the ComUnity Developer Toolkit refers to the namespace and all configurations that define an application. Each project belongs to a single tenant.
Events related to organisational activities, such as user management actions, role assignments, and policy updates, which serve as triggers for workflows within the application.
A unique identifier entered during the project creation process that distinguishes a project within the ComUnity Developer Toolkit.
A section within the ComUnity Development Toolkit that allows users to manage key configurations for a project, such as versioning, application name, namespace, and organisation details.
The individual responsible for managing a specific project, including overseeing progress, assigning teams, and controlling access to project details. They operate under the guidance of the Organisational Administrator.
The responsibility of overseeing all projects within the organisation, including assigning project ownership and ensuring the efficient execution of project tasks.
A section in the Toolkit’s interface where users can view and adjust the properties of an entity or field. The Properties Dialog provides access to customisation options and settings, supporting detailed data model configuration.
The property type specifies the kind of data that can be stored in an entity property. It defines the format and constraints for the data, such as text, number, boolean, date, and relationship.
A vibrant purple environment used for testing code after the development phase. This environment closely mimics the production environment to identify potential issues and ensure the application functions correctly before it reaches end users.
Razor syntax is used to template communication data into channels. Fields in the template accept both static and dynamic content, and when the system executes an action, expressions are evaluated and fields are resolved.
Relationship is a property type used to establish connections between entities. It represents associations or dependencies between entities, for example, a "user" entity may have a "orders" relationship property linking it to order entities.
Required is a property attribute that specifies whether a property must have a value. If a property is marked as required, it cannot be left empty or null.
A metric that displays the daily volume of requests to the system over a 7-day period. It helps identify usage patterns, peak load times, and stress points on the project's infrastructure.
Access control settings that define which roles can perform specific actions on entities. In the Toolkit, role-based permissions allow developers to manage user access to data, ensuring only authorised roles can read, update, or delete information within the data model.
Defined positions within the Toolkit that determine a user’s level of responsibility and access to specific tasks, projects, and operations. Roles are assigned to users to structure their contributions and permissions within an organisation.
A troubleshooting process that uses trace data to determine the underlying cause of an issue or anomaly within an application. Tracing provides detailed context to understand what happened and why.
The specific runtime environment selected for an Azure Function App, such as .NET, Node.js, or Python. This defines the programming environment in which the function executes.
Preconfigured application components, including entities, associations, navigation, screens, and application objects, that can be added to a project to quickly implement specific features. Templates can also be used to bootstrap new projects, providing ready-made functionality to accelerate development.
Workflows that run automatically on predefined schedules (e.g., daily, weekly, or periodic operations like data syncing).
Screen Controls refer to the interactive widgets and components used within the Screen Structure section of the Integrated Navigation and UI Builder in the ComUnity Developer Toolkit. These controls enable developers to build and customize the layout and functionality of screens, supporting dynamic user interactions and flexible content presentation. Screen Controls can be used to adjust the appearance, behavior, and content of screens, enhancing the application’s overall user experience.
Screen Structure is a section within the Integrated Navigation and UI Builder in the ComUnity Developer Toolkit. It allows developers to build and visualise the layout of application screens using various screen controls.
A component within the ComUnity Developer Toolkit where developers can build, organise, and manage application screens.
In the ComUnity Developer Toolkit, Screens refers to both a core concept for building an application’s user interface and the section within the Integrated Navigation and UI Builder used to view and manage all screens in an app.
Screens are organised into three main categories:
• Hierarchical Screens:
Structured within a hierarchical tree and include:
- Navigation page: Defines the flow and navigation structure of the application.
- Form page: Handles user input and data entry.
• Additional Screens:
Exist outside the main hierarchy but can be integrated into forms or lists to extend functionality.
• System Screens:
Pre-built screens, such as Login, Registration, and OTP screens, included by default in every project. These can be customised but not deleted, ensuring core functionalities remain intact.
Within the Integrated Navigation and UI Builder, the Screens section provides a centralised view for organising, managing, and customising all screens within the application, allowing developers to efficiently manage the app’s navigation, structure, and user interactions.
A file naming convention that uses the SHA (Secure Hash Algorithm) of a file to prevent duplicate uploads and ensure consistency in file identification.
A performance metric displayed on the Metrics Dashboard that measures how long it takes for a server to respond to incoming requests. It helps identify latency issues and optimize server performance.
The classification of events and notifications based on urgency, ensuring prioritized action:
• Low: Informational, no immediate action required.
• Medium: Monitoring recommended.
• High: Requires prompt attention.
• Critical: Urgent action needed to prevent significant issues or failures.
Data that follows a predefined format and is managed via the OData protocol. It includes APIs for data manipulation and URL-based queries for information retrieval.
The process of creating an entity in the data model that corresponds to an existing SQL table. This feature allows developers to integrate legacy or pre-existing database structures directly into the ComUnity Developer Toolkit, automatically generating entity fields to match the table columns. SQL Table Mapping saves time and ensures data consistency by leveraging existing data schemas within the Toolkit.
Pre-built screens, such as Login, Registration, Reset Password, and OTP screens, that are part of every project by default and can be customised but not deleted.
The ability of a project or system to maintain stable performance and prevent failures. Metrics help enhance system reliability by identifying performance trends and potential issues early.
A feature within the ComUnity Developer Toolkit that enables the configuration of role-based permissions for entities. Through Table Security, developers can grant or restrict access to specific actions (e.g., read, update, delete) for different roles within a project, enhancing data security and access control.
A feature in the ComUnity Developer Toolkit that allows users to establish and configure associations between entities, such as one-to-one or one-to-many relationships. Table Links create connections between entities, supporting data integrity and enabling foreign key relationships and cascading actions.
Configurable settings associated with a Table Link that define the behaviour and characteristics of an entity association. These properties allow developers to customise how entities relate to each other, including setting cascading actions and defining foreign key constraints.
Groups of users within an organisation who collaborate on specific tasks or projects. Each team is composed of members with defined roles, such as Developers, Testers, or Designers, and is created and managed by the Organisation Administrator and Project Owners.
The Organisation Administrator’s task of creating, assigning, and managing teams within the organisation. This includes determining the team composition and modifying roles to optimise project collaboration.
An instance of the ComUnity Platform, provisioned to an organisation during account registration. Each tenant is distinct and unique, identified by a system-generated name, and can manage multiple projects.
A communication service template is a preconfigured, reusable framework that provides a foundation for building communication functionalities within the ComUnity Platform. It serves as a starting point for developing services that support messaging, notifications, real-time data exchange, collaboration, and other forms of interaction between users or system components.
Temporal Tables, also known as System-Versioned or Time Travel Tables, are designed to track changes over time, maintaining a full history of data changes, and allowing easy point-in-time analysis.
Key Points:
Time-Based Versioning: Maintains a history of changes made to data over time.
Tracking Changes: New versions of rows are created when modifications are made.
Querying Historical Data: Simple queries retrieve data as it existed at any specific point in time.
Automatic Data Maintenance: Temporal Tables automatically manage versioning and retention.
Database Support: Supported in DBMS like Microsoft SQL Server, PostgreSQL, and Oracle.
Themes allow developers and designers to create visually appealing and user-friendly interfaces by providing a consistent visual design. They offer a flexible way to customise the appearance of an application without affecting functionality.
A user with the highest level of access within the Toolkit, responsible for the overall management of all organisations, projects, and users. This role includes system-wide control and configuration abilities, such as user approvals and organisation management.
A feature that captures detailed execution paths of application requests, providing a step-by-step breakdown of processes. Traces help identify bottlenecks, latency issues, and areas for optimization in request flows.
A unit of work within a trace that represents a single operation or step in the execution of a request. Spans include metadata such as timestamps, durations, and tags to provide granular insights.
Events that do not fit predefined categories but are captured for further classification or processing.
A URI is a string of characters used to identify and locate resources on the Internet. It consists of components like scheme, authority, path, query, and fragment, with scheme and path being mandatory.
Unique is a property attribute that ensures the uniqueness of values within that property across all entities. No two entities can have the same value for a unique property.
A URL is a subspecies of URI. It is often used to address web pages but can also localize files in the local file system. Every Internet address is a URL, but not every URL is an Internet address.
The process of managing user accounts within an organisation, including granting access, assigning roles, and maintaining user information. Organisation Administrators handle user management through the Organisational Settings.
Validation ensures that data meets certain criteria or constraints, ensuring that the data entered is valid and consistent with specified rules.
In the ComUnity Developer Toolkit, a Virtual Entity is a type of entity used to represent and integrate data from external services within a project. Virtual entities allow developers to seamlessly connect with external data sources, performing CRUD operations and enabling their data to appear alongside local entities in the project.
A specialised icon set integrated into the Toolkit, containing weather-related symbols for use in applications that require weather visualisation.
A configuration class in the Toolkit’s Web API setup that manages HTTP interactions with external services. It ensures that virtual entities can process OData requests and responses, which allows standardised querying and data manipulation.
A compressed archive containing all necessary files, including configuration settings, needed to deploy an application to an IIS server. This package is prepared using tools like Visual Studio and is uploaded during the deployment process.
Refers to connecting and integrating the WhatsApp Business API with other systems or applications. It enables businesses to communicate with customers on WhatsApp, send automated messages, provide support, and facilitate transactions.
A technical guide for businesses and developers
A data type is an attribute that specifies the type of data that the object can hold: integer data, character data, monetary data, date and time data, binary strings, and so on.
The properties of a field describe the characteristics of data added to that field. A field's data type is the most important property because it determines what kind of data the field can store.
The field type describes the behaviour of the form when capturing the value of a field.
The properties of a field describe the characteristics and behaviour of the data that is added to the field. A field's data type is the most important property because it determines what kind of data the field can store.
The following links provide you with more in-depth knowledge about Data Field Types.
Replace blog-app
in the url with your application name refer to for more information on how to access your application name
For more information, go to with the Entity Framework.
The principles have been cited in over five hundred articles referring to the Privacy by Design in Law, Policy and Practice white paper by .
Source:
For more information, go to
In this tutorial, we demonstrate API integration using the ComUnity Developer Toolkit, leveraging its APIs feature to connect with a third-party API. The APIs feature is powered by and enables structured API registration, management, and controlled data exposure within the Toolkit.
A core aspect of this tutorial is understanding how to integrate and query a GraphQL API in the Toolkit. We will use the to fetch and display country data, demonstrating the flexibility of the APIs feature when working with different API types.
🔗 GitHub Repository:
If you are new to the APIs feature in the Toolkit, we recommend first reviewing the , which covers similar API integration concepts using an HTTP-based REST API. This GraphQL tutorial builds upon the same workflow, with adjustments specific to GraphQL queries and resources.
Familiarity with, Entity Framework, and
Created a project from a template – Follow the section to set up a new project using the Smart City template.
the project successfully.
Open the for the Countries API.
Configure Properties and Security of the Country Virtual Entity in the Data model: Go back to the ComUnity Developer Toolkit under Data. Create a Virtual Entity named Country. For detailed instructions on creating virtual entities in the Toolkit, refer to the section, take note to include these properties for the entity.
Build the UI - for more information on how to build lists in Navigation pages refer to the section
The Toolkit's support for templated parameters within queries enables developers to devise detailed queries tailored to the application's specific needs see section for more details. This eradicates the constraints of using static values, granting developers the liberty to use dynamic placeholders for greater query adaptability.
For a deeper understanding, refer to the s guide as you progress through this tutorial. This comprehensive resource provides additional details and explanations of the concepts covered here.
This tutorial is perfect for developers familiar with , , , and who want to explore building applications on ComUnity.
programming skills
Understanding of ,, and
(Community, Professional, or Enterprise)
:
:
Initially, all communication channels are deactivated by default. Channel priorities determine the order in which communications are processed and sent.
Define the following entities in your project's Data Model view to learn more if you are not sure how to proceed:
In this step we will create associations of the entities we created in the step above, using the relationships specified in the table below, view to learn more if you are not sure how to proceed:
Assign it the "Staff" role within the Toolkit viewfor more details about user management
For more information, go to
X Y Z
A cloud-based service that allows you to automate workflows, integrate applications, and connect data across systems. Logic Apps support event-driven automation, scheduled tasks, and seamless integration with over 400 and third-party services.
The name provided during the creation of an Azure Logic App to uniquely identify it within the ComUnity Developer Toolkit and .
The process initiated to compile and provision resources for your application on , based on your Data model and project configurations. It may also trigger data migrations and publish the project to (IIS).
A development approach within the .NET framework where a data model is defined in code (typically using C#), and the underlying database structure is generated based on this code, allowing for flexibility and control in data modelling for additional details view .
A feature in the ComUnity Developer Toolkit that allows developers to browse, manage, and implement icons from various libraries such as Bootstrap Icons, , , and , as well as upload custom icons for projects.
A non-visual, structured representation of the data model where entities, attributes, and relationships are organised as a list, offering a simpler alternative to for defining data models without a graphical diagram.
Information required to define an integration, typically including the specification. MetaData enables the Toolkit to auto-generate proxy classes and streamline communication with external services.
helps developers focus on business logic while creating RESTful APIs, providing a standardised way of building and consuming data APIs, which enables interoperability between systems.
is a markup syntax that allows embedding server-based code (such as Visual Basic and C#) into web pages. It combines HTML markup with server-side code to generate dynamic content.
To integrate WhatsApp Business with the ComUnity Platform, users will need to create accounts on third-party providers that offer APIs for sending and receiving WhatsApp messages programmatically. This integration enables businesses to streamline customer communication and take advantage of WhatsApp's features, such as automation and quick response times. Several cloud communications platforms offer this service, including , which provides APIs for sending SMS, voice, and WhatsApp messages programmatically. 's WhatsApp API supports sending text, images, and audio files, as well as message templates and message tracking.
To create a WhatsApp Sender account from scratch and integrate it with the ComUnity Platform, you'll need to follow these high-level steps:
You need a Facebook Business Manager account as part of the verification process for applying for a Twilio Phone Number with WhatsApp capabilities. Facebook owns WhatsApp, and as such, they require businesses to go through a verification process to ensure that they are legitimate and authorized to use WhatsApp for business purposes. The verification process involves connecting your Facebook Business Manager account to your WhatsApp Business account, so you need to have a Facebook Business Manager account to create a WhatsApp Business account on .
Sign up for a account: Visit and click on Sign up to create a new account. Provide your name, email address, and a password. After signing up, verify your email and phone number as prompted.
Access the Console: Once your account is created and verified, log in to your account and access the Console.
Enable the WhatsApp Sandbox: Enable the WhatsApp Sandbox in your account by going to the Programmable Messaging section in the Console, and then clicking on Try the Sandbox today or visiting the WhatsApp Sandbox page directly at .
Configure the WhatsApp Sandbox: Follow the instructions to connect your personal WhatsApp account to the Sandbox by sending a message with a specific code to a -provided WhatsApp number. Once connected, you can use the Sandbox to test your WhatsApp integration.
Develop your application: With the Sandbox set up, develop your application using the API for WhatsApp, using a supported programming language and following the API documentation: .
Create a Facebook Business Manager account: If you haven't already, create a Facebook Business Manager account by following the instructions here: . This account is necessary for the verification process during the application for a Phone Number with WhatsApp capabilities.
Apply for a Phone Number with WhatsApp capabilities: After testing your application in the Sandbox, apply for a Phone Number with WhatsApp capabilities. Go to the Console, navigate to the Programmable Messaging section, and then click on WhatsApp in the left sidebar. Follow the instructions to submit your application for a WhatsApp-enabled number. Note that this process requires approval from WhatsApp and may take a few weeks.
Configure your Phone Number: Once your application is approved, and you have a Phone Number with WhatsApp capabilities, configure the number in the Console. Set the webhook URLs for incoming messages and status updates, which will point to your application's endpoints.
Deploy your application: With your WhatsApp Sender account set up and your application developed, deploy your application to a live environment.
You can find more detailed information at
Checklist
Allows users to select a True (checked) or False (unchecked) value. Includes the option to Customise Values: Select the desired Import/Export Values and Display Values from the drop-downs.
Currency**
Currency values. Use the Currency data type to prevent rounding off during calculations.
Date
Date control without time input
DateTime**
A text box set is formatted to accept M/D/YYYY dates, and the other is formatted to accept H:MM AM or H:MM PM.
Decimal**
Decimal pad
DecimalSigned
Decimal pad with "." keyboard
Digit
iOS - Number pad
Dropdown
Allows users to select a value from a list you define. You will specify the options and associated data values
Pre-formatted to accept an email address (text in a name@domain.com style format)
FileSet
File control allowing upload of files and images
GeoSearch
Search box that allows places of interest in a search map
Hidden
A value is automatically set upon a member completing a given step or form.
Image
iOS - Image control allow upload images
Money
iOS - Decimal pad keyboard
Multiline**
This field accepts multiple lines of text
Number**
This field accepts only numbers and specific numeric data entry characters
Password
A text input box that displays asterisks (*) in place of the actual characters a user types.
Radiolist
Provides users with a list of items from which they may select only one. You will specify the options and associated data values.
Signed
iOS - Number path with "." keyboard
Tel
iOS - Number pad
Text**
Allows users to enter any combination of letters and numbers (99 character limit).
Time**
A pre-formatted text box to accept text in an H:MM AM or H:MM PM format.
Bool
A logical field can be displayed as Yes/No, True/False, or On/Off.
Byte
An unsigned 8-bit integer value from 0 to 255
Byte[]
An array of type Byte. A fixed-length stream of binary data ranging between 1 and 8,000 bytes.
DateTime
A date and time combination. Format: YYYY-MM-DD hh:mm:ss.
Can represent date and time data ranging in value from January 1, 1753 to December 31, 9999 to an accuracy of 3.33 milliseconds.
Decimal
A fixed precision and scale numeric value between -10 38 -1 and 10 38 -1. The total number of digits is specified in size. The number of digits after the decimal point is specified in the parameter. Extra options are provided to define the decimal more precisely:
Precision is the number of digits in a number.
Scale is the number of digits to the right of the decimal point in a number. For example, the number 123.45 has a precision of 5 and a scale of 2.
In SQL Server, the default maximum precision of numeric and decimal data types is 38. In earlier versions of SQL Server, the default maximum is 28. To learn more about this data type, go to
Double
Double-precision floating-point. Will handle most decimals
Float
Floating-point data types, usually represent values as high-precision fractional values. A fixed precision and scale numeric value between -10 38 -1 and 10 38 -1.
Guid
The GUID data type is useful when you want to uniquely identify some data, so that it can be exchanged with external applications. The correct format of the GUID string is {CDEF7890-ABCD-1234-ABCD-1234567890AB} where 0-9, A-F symbolizes hexadecimal digits. To learn more about this data type, go to
Int
A 32-bit signed integer representing a whole number between -32,768 and 32,767
Long
A whole number between -2,147,483,648 and 2,147,483,647
Sbyte
The SByte data type represents integers with values ranging from negative 128 to positive 127.
Short
The Short Int16 data type represents signed integers with values ranging from negative 32768 through positive 32767.
String
A FIXED length string that may contain letters, numbers, and special characters up to a maximum of 4000 characters.
When you select this data type you may define the maximum length and the minimum length of the string.
When you select the data type <string> the following two properties are added to the properties editor. Learn more about this data type at
TimeSpan
The timespan (time) data type represents a time interval, where a number of formats are supported for value, as shown at