How to ensure the cursor focus for a scan screen? [AutoFocusPlugin]

[StephanRS]

Hi everyone,

We’ve created two separate screens: one for the delivery process (scanning) and another for label printing. Both screens allow users to input a value, and after hitting enter, a process starts. I’m trying to ensure that the cursor automatically defaults to the scan input field after each scan. I attempted to use a loadpage function in the process to reload the page after each scan, which works to some extent but not exactly as expected.

A good example is the scanning of incoming deliveries, which is part of component M4458; when the page loads, the cursor is immediately placed in the scan field, and after each scan, the field is cleared automatically.

Thank you in advance.

[j.batzke]

Hey Stephan,

To focus a specific element on a page, you will need to use the “Autofocus” Plugin. I will explain how to add the plugin and how to configure it to focus a specific element in a form.
View component M7811 if you want to view a working example.

Adding the plugin

1. In your component go to the start screen, click (1), scroll to “autofocus” and add it. It should appear in your list of available plugins then (2).
   

   

2. Next, go to the page where you want to focus a specific element.
   Right-click on the top of the form panel where your element is that you want to focus (1) and apply the plugin item “AutoFocusFormPanel”
   

   

3. The plugin icon in the toolbar is now highlighted when you select the form panel. Click on the plugin icon to add the autofocus configuration.
   

Configuring the plugin

1. Open the plugin settings for the form panel via the plugin button in the toolbar or right-click on the form, choose properties and then plugin configuration.
   

   

2. Add a new “PageElementToFocus” to the configuration. Link the element that should be focussed like so:
   

   

3. Now define a condition that has to result in “true” for the element to be focussed. Either choose “true” from the dropdown (1) or choose the fx button (2) to define a custom expression.
   

4. You can check that you configured the plugin when you see the small plugin icon in the top right corner of the form panel:
   

5. The conditions of the autofocus plugin are checked with every page load. So please make sure to reload the page in your custom processes when you want to focus a field.

6. You can add more elements to focus with different priorities. All conditions are checked from the lowest priority to the highest with every page load. If a condition results in “True” the plugin stops checking any other conditions with a higher priority. So make sure to choose correct priorities and expressions if you have multiple elements that you want to focus. Also keep in mind that a page load is a very frequent action, so the expressions for the conditions should be lightweight.

[StephanRS]

Great explanation, we got it working, and it now perfectly meets the specs! Thank you.