--- title: "Break and Jump Controls" slug: "break-and-jump" updated: 2025-12-19T16:05:44Z published: 2025-12-19T16:05:44Z canonical: "docs.processmaker.com/break-and-jump" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Break and Jump Controls > [!TIP] > [**Plan Availability:**](https://www.processmaker.com/products/pricing/) ![Professional](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Professional.png)![Enterprise](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Enterprise.png) The Break and Jump controls are used in Conversational Screens and provide powerful tools for guiding conversation flow dynamically, enhancing user engagement and interactivity. Together, these controls create flexible pathways in a screen, adapting to user input for a tailored experience. - **Dynamic Routing**: The Jump control triggers specific Break points based on predefined conditions, allowing the form to respond directly to user actions. - **Adaptive Flow**: This setup ensures that each user follows a path suited to their responses, creating a seamless and intuitive navigation experience. - **Personalized Interactions**: By routing users to different Break points, the conversation becomes more interactive, catering to individual needs and making the experience feel more responsive. - **Enhanced Engagement**: This functionality not only improves user satisfaction but also supports more complex conversation flows, increasing the form's effectiveness in gathering information or completing tasks. Together, the Break and Jump controls create a conversational journey that feels intuitive and custom-fitted, enhancing the overall user experience. > These controls are only available for Conversational Screens. See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use the Break and Jump controls. [Embedded content](https://demos.processmaker.com/embed/cm3rmzw8j0wha3vuki7shgeth?embed_v=2) [Embedded content](https://demos.processmaker.com/embed/cm3rokcfp0g5n5a3t355w9ypz?embed_v=2) --- ## Add the Break Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the Screen: 1. [Create a new Conversational-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Navigation** category, and then locate the **Break** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Break Icon.png). 3. Drag and drop the control onto the Screen Builder. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Break Control.png) 4. Configure the **Break** control. See [Settings](/v1/docs/photovideo-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). --- ## Settings The Break control has the following configurable settings in the Properties Panel: ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Label Edit the default label that identifies this control. This name will be used to call the break point from a Jump control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Label Break Control.png) ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/1671686a-2db8-45fc-8f2b-abdf01a990bc.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). See how to [configure a Submit Button control that prevents the Request participant from clicking on that control multiple times](https://www.processmaker.com/blog/multiple-form-submit/) so the Screen cannot be submitted after the first click. #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/a5a776d6-2352-45a1-a10f-a4f684f50584.png) #### CSS Selector Name[](/docs/break-and-jump#css-selector-name) Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/fb4c976a-ac60-4536-80ab-4146f2767466.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings) See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings) --- ## Add the Jump Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the Screen: 1. [Create a new Form-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Navigation** category, and then locate the **Jump** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Jump Icon.png). 3. Drag and drop the control onto the Screen Builder. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Jump Control.png) 4. Configure the Jump control. See [Settings](/v1/docs/photovideo-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). --- ## Settings The Jump control has the following configurable settings in the Properties Panel: ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Label Edit the default label that displays for this control if necessary. This name will be used to call the break point from a Jump ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Jump Label.png) ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### Conditions In the **Add Condition** property, define the rules for triggering a break point in the Conversational screen from this Jump control. 1. Click the **Add Condition** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Add Condition Icon.png) to create a new condition. 2. In the **Condition** setting, enter the rule that determines when to jump to a break point. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Add Condition With Breakpoint.png) 3. In the **Select a Break Point** setting, choose the Break control label to which the user should be directed. 4. Click **Add** to add the condition. 5. Repeat steps 1-4 to add additional conditions. > [!NOTE] > If multiple conditions are defined, the evaluation will stop at the first condition that evaluates to true. ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/1671686a-2db8-45fc-8f2b-abdf01a990bc.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). See how to [configure a Submit Button control that prevents the Request participant from clicking on that control multiple times](https://www.processmaker.com/blog/multiple-form-submit/) so the Screen cannot be submitted after the first click. #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/a5a776d6-2352-45a1-a10f-a4f684f50584.png) #### CSS Selector Name[](/docs/break-and-jump#css-selector-name) Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/fb4c976a-ac60-4536-80ab-4146f2767466.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings) See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)