Browse step-by-step how-to guides for building and adapting features on the DAZZM platform.
- Working with files and images
Store a Single Image in an Aggregate When to use: Choose this approach when the aggregate requires exactly one image field that is tied to a specific business purpose, such as: An equipment photo in an asset record A user profile picture in an account A company logo in an organization profile
- Create and use an external API
Integrate an API into an application to facilitate communication with a second application. In this example, when a new user is created in our application, a workflow triggers an external API call to an external application to verify if the user already exists. If the user is found, their information is updated accordingly.
- Workflow triggered by email
An email-triggered workflow automates actions when an email is received in a designated in app inbox. By default, the application can receive emails at any inbox formatted as inbox@myapp.octopus-esm.com, where "inbox" can be replaced with any word. In this case, the goal is to automate Ticket creation based on specific keywords in the subject and body of emails sent to support@myapp.octopus-esm.com.
- How To Integrate with Microsoft Graph API to Create Users from Azure Directory
Integrate a Dazzm application with the Microsoft Graph API to enable searching and selecting users directly from your Azure Active Directory. Part 1 - Configuring the API Connection to Azure AD 1. Register the Azure App and Add Graph API Permissions Go to portal.azure.com and sign in to your Azure account
- Dialogue Message Bar
Adding a message bar to a dialogue allows for the display of alert or informational messages to users. This message section does not affect the data since it is not part of the command parameters or mutations. In this example, we will see how to add a message bar to a dialogue that allows a user to change their language. We will then customize its title, main message, and background colour based on the type defined in the JavaScript code.
- How to Hide a List When It Is Empty
In a user interface, displaying an empty list can be confusing and unattractive. To improve the user experience, it is essential to adapt the display based on the available data. Hide a list when it is empty and replace it with a clear message indicating the absence of data.
- How to Present Data in Columns
To organize your data efficiently, you can present it in columns using a table that categorizes the information according to a specific field. For example, by working with an aggregate such as "Account" and using the "Industry" field (which should be under the parent entity or aggregate) to group the data, you can achieve a clear and structured result. The final result is a dynamic table where each column represents an industry, with the ability to explore the associated accounts directly via a dedicated…
- Creating a Layout from Scratch
The layout is an essential component of an application, as it determines the fixed sections that remain accessible to the user regardless of the page being viewed. Let’s explore how to create a layout from scratch by following a simple and structured approach. Whether you want to create a complex interface with multiple panels or a more minimalist structure, anything is possible with a bit of creativity.
- How to Manage Files in a Model
Manage files in a model by making modifications to the data model and user interface. Using the example of adding the ability to attach files, such as contracts, to the Account entity in a CRM application, it describes the steps required to structure the data, create commands to handle files, and integrate a user interface for uploading and managing files.
- Create and add a ReactJS component to the toolbox
In modern ReactJS development, creating reusable components and adding them to a design framework is important for improving productivity and keeping code consistent. Create a custom ReactJS component and make it available in the toolbox. You will learn how to organize and set up the component so that it is easy to access and configure through the platform’s user interface.
- How to Create a Contextual Menu
Create a contextual menu in the contact details page of an account that adapts to different contexts. For this purpose, it uses an existing command called "modifierCoordonnées", which contains parameters such as website, phone number, address, city, province, and postal code.
- Preventing Duplicate Entries
When entering data, it sometimes happens that a user is unaware of an existing record with the same name in the database. This can result in the creation of duplicate entries, which complicates data management and reduces data reliability. A simple and effective solution can be implemented to address this issue: a warning dialogue that only appears when a record with the same name is detected.
- How to customize a detail page route to make it user friendly
By default, the detail page route displays the data's ID. However, it is possible to create a more user-friendly URL like https://dazzm-training-gs.octopus-esm.com/profile/Gabrielle-Strauss instead of the default https://dazzm-training-gs.octopus-esm.com/user/2dd26bd3-eb86-46ad-a1c6-d4830271a430.
- Integrate an SVG To Create a Progress Bar
Learn how to display a SVG file as a static image as well as use a more advanced way to integrate a dynamic SVG, that reacts according to the data. In the first example, the SVG image will replace the DAZZM logo, on the top left corner of the application. In the following one, the HTML component will allow the SVG code to react to the progress the user makes at completing its profile information.
- Creating a Master List and Master Details with Page Frame
A “page frame” is a component from the toolbox that create a section to view another page within the same application. It’s the same concept as Iframe, in HTML. Keep in mind that to make modifications to the page displayed in the page frame, you need to modify the referenced page directly.
- Integrating a User Image Feature to Replace Avatars
Create a feature allowing users to add a picture to their user profile. Apply a restriction to that feature ensuring that only the user of that profile can add a picture. Additionally, the user picture will be replacing the user avatar in the top right corner of the application, as well as in the drawer menu.
- Creating an Embedded To-Do List with No Dialogs
Using embedded forms allows the user to complete fields without having a dialogue window open. In this example, a do-to list will be added to a new tab of the Opportunity’s details page. Both the option to add a task and mark a task as completed will be achieved without the help of dialogues.
- Creating a Custom Dialog with an Embedded Form
The component dialog behavior lets a user display a reusable component with an embedded form instead of a standard dialog. This creates the possibility to save space between fields and customize the look of the dialog. 1. Creating the Reusable Component for the Dialog Create the reusable component (AccountAddressDialog) which will be used as our dialog and set the data source to account:
- Display/Hide an Element When Hovering: Edit Button
Learn how to display/hide an element when the mouse hovers over a predetermined section. In this example, an “edit” icon will be displayed when hovering over the “coordinates” section of the account’s detail page. 1. Adding the Edit Icon to the Field Panel Drag and drop an icon, next to the box containing the title of the field panel and wrap it in a box. It’s essential to apply a wrap to the icon that will be displayed only when hovering on a specific section, because only a box gives access to “class name”…
- Create a Comment and Reply Section
Create a section where users can leave comments/notes and receive replies. These will be organized by date of publication and each comment will be identified by the user’s logging name, user icon and publication date and time. Comments and replies will have the option to be edited or deleted exclusively by their author. If one is edited, a tag will be displayed, and a tooltip will show when it was last edited.
- Create a Reusable Component: Account Card
A reusable component is a complex set of components and styling elements, saved to your toolbox. There are 2 main reasons for which you would want to create one: • to use it on more than one page • to simplify the structure of a page while designing the specific section in the reusable component
- Using Candidate Values & On Change
When creating an opportunity, allow the user to pick a currency associated with multiple price lists for their products. Since each price list contains a collection of products with their own unit price, when an opportunity is assigned to a price list the product’s cost will be set automatically.
- Batch Command Applied to List Items
Create a batch dialogue on multiple items in a list, which empowers you to change the account manager on all accounts selected, all at once. This efficient batch dialogue can be applied to any types of fields, from a number field to a text field. 1. Enabling Multiple Selection for List Items
- A Repeater with Heterogeneous Information
For this example, use the repeater of the product Aggregate, built using a grid. To learn how to build it, refer to the “Use Grid to Create a Table” How To. Its columns will represent various fields of heterogeneous information common to any product type. From the Product Aggregate, create subtypes such as clothing and electronics. These represent categories of products. To see how, refer to step 1 of this document, where a Food subtype will be added. Fields that are unique to a subtype will be added under the…
- Google Maps API in a Custom React Component
Add a component react, to the account list page, specially built to display a Google Maps where integrated pins show each Account’s location. 1. Creating a New Module for Google Maps Start by creating a new module. In this example, it’s named “GoogleMaps”. Then, copy its module value, as it will be used in step 3. This is done simply by clicking on it, in the top section of the module page.
- OpenWeatherMap in a Custom React Component
This open “OpenWeatherMap” component is designed to display weather data. It uses Google Maps API to geocode the address into coordinates. Then, using these coordinates, it makes an API call to OpenWeatherMap, to retrieve the current local weather data of that area. It’s a useful component for anyone who wishes to quickly and easily integrate weather data based on an address, using React in the application.
- Use Grid to Create a Table
In this example, the table will give users the number of items sold per product and calculate the percentage of sales attributed per products. 1. Creating a "Sold" Field and Update Command Before creating the table, we need to create data. Create a new “sold” field, of type number and add it as a required field to a new update command. In this example, the command’s name will be “sellProduct” and the event type “PRODUCT SOLD”.
- Related Enums for Country and State/Province
Creates a relationship between two Enum, in order to display only a specific set of values from the second Enum, depending on the selected value in the first Enum. In this example, we will create a Country and Province/State Enum and add them as params of the “modifyInfo” command. When Canada will be the country selected, only the provinces will be available and of course, only the states will be displayed for USA. The option “other” will also be available, for both countries.
- How to create full-screen forms
Instead of using the default “+” button to prompt the form in a dialogue window, we want to redirect users to a new page where the form will take the full screen. 1. Setting Up a New Custom Page for the Form Under the Pages section in the left-hand side panel, click on Add custom page to create a new page. It will later host the Account creation form.
- Select a Main Contact from a List of Contacts
This CRM has an “Account” Aggregate, which has a collection of “Contacts” entities. Here, we're looking for a field at the root level (Account) that will point to a single element of the Entity collection (Contacts) to define the main contact of the account. You cannot create a “main contact” field of type Contact and configure it to choose from the list of contacts in the account, as this would create a second contact entry in the database with the selected contact information. Any modification to the contact…
- Show or Hide a Section Using Icons
Let's see how to use “save page data” and “show/hide component based on a condition” to show or hide an element. This could be another icon, a box, or even text. For our example, we'll make sure that an information section can be collapsed and opened by clicking on an icon. We'll also make the icon vary according to its function.