Formula Editor
The Formula Editor is an interface element that allows users to input, create, and manage formulas or expressions.
- Overview
- Specs
- Guidelines
Component
A Formula Editor is a specialized tool that allows users to create, edit, and format logical formulas, enabling the management of calculations, expressions, and functions without the need to manually type each symbol.
Formulas are powerful tools that allow users to automate key tasks. By offering an intuitive interface for creating and editing formulas, the Formula Editor can significantly streamline workflows and improve efficiency.
- 1: Item the formula is being applied to
- 2: Formula Editing Field
- 3: Pulse Suggestions
- 4: Header Action
- 5: Custom Action
Used for:
Creating formulas
The Formula Editor is ideal for creating formulas that allow communication between fields, such as those used in financial calculations, where the input from one field influences the output of another.
Don’t use for:
Inappropriate formulas
The Formula Editor is not suitable for mathematical expressions that incorporate natural language.
General users or simple tasks
Certain products and users may not benefit from the Formula Editor due to its specialized nature. This component should only be applied in specific contexts where its use is appropriate.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Added component to design system.
Related
Color Variations
Unique Variation
formulaEditor{
border: var(--grey-5);
padding: var(--spacings-12);
header{
buttonIcon1{
variation: var(--tertiary-grey-regular);
icon: arrow_back;
}
titleBox{
height: 36px;
text: var(--label-regular);
color: var(--grey-8);
}
buttonIcon2{
variation: var(--tertiary-grey-regular);
icon: formula; /* this icon can be changed */
}
}
gapHeaderCodeEditor: var(--spacings-12);
codeEditor{
title{
text: "Formula Editor", var(--label-regular);
color: var(--grey-8);
}
button{
variation: var(--textButton-grey-regular);
}
codeBox{
border: var(--grey-5);
padding: var(--spacings-8, --spacings-12);
text: var(--label-regular);
}
}
gapCodeEditorPulseSuggestions: var(--spacings-8);
pulseSuggestions{
gapPulseSuggestion: var(--spacings-8);
element{
padding: var(--spacings-8, spacings-12);
iconPulse: "cegid_pulse", var(--theme-100);
title: var(--label-small, --grey-8);
description: var(--label-small, --grey-7);
iconCopy: "content_paste", var(--grey-7);
}
}
}
Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Variations
Header
Since the Formula Editor is normally used in specific scenarios, it doesn’t require many variations. However, to maximize flexibility, we offer an option to remove the header when it is unnecessary, preventing it from taking up extra space.
Custom Actions
Depending on its use case, it may be necessary to customize the Formula Editor’s functionality. We offer two customization options: header buttons and a text button. These can be used independently or together, depending on the need.
Avoid using both custom actions when they are not needed or when they result in redundancy.
The header button may not be appropriate for actions that aren’t clear to the user.
Pulse Suggestions
Users can use Cegid Pulse to enhance the capabilities of the Formula Editor. It can offer real-time suggestions as users work in the Formula Editor.
Related
