Skip to main content
Let’s consider a scenario where the sales person is collecting data from their client. There are multiple steps in this process like travel, visit, data collection, verification etc. Here, Data collection is a step in the workflow and there is a mobile app screen that corresponds to this step. A screen node has multiple properties, they are defined below. Screen Name:​ Each screen has a name that it can be identified with. The name of the screen is shown to the user so they’re aware of which screen of the process they are in. Screen Description:​ Description is provided for clarity on what a screen node means.

​
How To Connect Two screen nodes in a Workflow?

Right-click and drag on the blue box of the the first Screen Node (the Screen Node from which you want to connect it from) and connect it to the blue box of the second Screen Node (the Screen Node to which you want to connect it to). You will notice that a curve line has formed on the screen, which implies that the two Screen nodes have been connected.

​
Components

Components are UI elements that can be used to design the screen of the mobile app. There are over multiple UI components in ERPLite with which our users can design really powerful applications easily. UI Elements are higher order ready made components with which development of a screen becomes very easy. For eg., for a user to collect images from the app or show a map location, all they have to do is to drag and drop the component into the app screen and change the configurations on the config tab.

​
Component Configuration​

Each component has its own way of configuration. For eg., a text display component only takes a text as an input. Whereas the camera component has options to specific collection mode via camera or gallery, no of images that need to be collected and many more.

​
Working with data

Components can both read from and write to data fields:
  • Read: Display components pull values from data fields
  • Write: Input components save user entries to data fields

​
Screen Properties

PropertyDescription
Screen NameIdentifier shown to users
DescriptionInternal notes about the screen’s purpose
ComponentsUI elements on the screen
On-Load AutomationsActions triggered when screen loads

​
For AI Agents

​
Screen Node Structure

interface ScreenNode {
  nodeId: string;
  type: 'SCREEN';
  name: string;
  description?: string;
  isInitial: boolean;
  isTerminal: boolean;
  components: Component[];
  onLoadAutomations: Automation[];
}

interface Component {
  componentId: string;
  type: ComponentType;
  config: ComponentConfig;
  dataFieldBinding?: string;
  visibility?: VisibilityCondition;
}

​
Component Types

type ComponentType =
  | 'TEXT_DISPLAY'
  | 'TEXT_INPUT'
  | 'NUMBER_INPUT'
  | 'DROPDOWN'
  | 'RADIO'
  | 'CHECKBOX'
  | 'CAMERA'
  | 'SIGNATURE'
  | 'FILE_UPLOAD'
  | 'DATE_PICKER'
  | 'LOCATION'
  | 'MAP'
  | 'BUTTON';

​
UI Components

ComponentLocationPurpose
ScreenNodeEditor/src/views/workflows/nodes/ScreenNode/Screen node configuration
AppBuilder/src/views/appBuilder/Visual screen designer
ComponentPalette/src/views/appBuilder/ComponentPalette/Draggable components
ComponentConfig/src/views/appBuilder/ComponentConfig/Component properties

​
Event Tracking

// Screen node events
WorkflowEvents.SCREEN_NODE_CREATED
WorkflowEvents.SCREEN_NODE_UPDATED
WorkflowEvents.SCREEN_COMPONENT_ADDED
WorkflowEvents.SCREEN_COMPONENT_REMOVED