Blogs, How-to
Easily customize your (scan) views in 3PL Dynamics
Date
24 August, 2023
Reading time
7min. reading time
A standard solution without sacrificing flexibility and the possibility of personalization. It’s exactly what we pursue and offer with 3PL Dynamics. Naturally, you can assume that all your scan views in 3PL Dynamics will most likely have a similar touch and feel to them. You can tailor a lot of these views to your personal liking depending on your needs. How to customize your scan views to only show the information you need? We’ve got you covered. All in a layout and format which is desirable to your users. Dive into the possibilities with our hands-on tips & tricks.
Crafting personalized experiences: the Art of Layout Customization
When you are ready to start customizing within 3PL Dynamics, navigate to “Scan view list”. From there, search for the view that you would like to customize. The general layout of an object is defined per line and is set in the CSS Attributes class of the line. A CSS Attribute defines the properties of an object. This might be a simple horizontal line across the screen or an entire data table. By setting the attribute you want you tell the system what layout must be implemented on an object. One line can only have a single CCS attribute assigned to it.
Attune your layout with over 25 options
Of course, the layout possibilities don’t stop there. With the following classes, you can define the layout of different objects:
Object type | Description | Dependency |
CAPTION | Sets the information to a caption formatting style | None |
CAPTIONCENTER | Sets the information to a caption formatting style and centers it on the page | None |
CUSTOMITEMIMAGE | Retrieves the item’s image from the database and presents it on the view (if available) | Data type session variable |
FIELD | Sets the line to hold value defined by a field object data type | Data type field |
HIDDEN | Hides the line | None |
HTML | Allows to parse HTML code to the scanner and present it | The data type should be set to session variable |
HZINE | Creates a single horizontal line across the view | Text field should consist out of “-“ |
INPUTBUTTON | Creates a blue, clickable, button on touchscreen devices, the size can be set in the field “Value Format”. | Key code bound to the line |
MENUTITLE | Sets the header formatting of the view | None |
MENUWITHMAX | Broad menu button, bleu/ white formatting, each line equals an entire line on the view | None |
ONELINE | Creates a clickable text | Key code bound to the line |
ONELINEBLACKBUTTON | Creates a black, clickable, button on touchscreen devices. The size can be set in the field “Value Format”. | Key code bound to the line |
ONELINEBUTTON | Creates a blue, clickable, button on touchscreen devices. The size can be set in the field “Value Format” | Key code bound to the line |
ONELINEGREENBUTTON | Creates a green, clickable, button on touchscreen devices. The size can be set in the field “Value Format” | Key code bound to the line |
ONELINEREDBUTTON | Creates a red, clickable, button on touchscreen devices. The size can be set in the field “Value Format” | Key code bound to the line |
SESSIONVAR | Sets the line to hold a value defined by a session variable object data type | The data type should be set to session variable |
SESSIONVARGREEN | Sets the text on the line as green | The data type should be set to session variable |
SESSIONVARRED | Sets the text on the line as red | The data type should be set to session variable |
SQUAREINPUTBUTTON | Creates a square, blue, clickable, button on touchscreen devices | Key code bound to the line |
TABLE | Enables the creation of tables, useful to display pictures and accompanying descriptions | Columns can be set by a “|” as separator |
TYPEDATE | Displays a calendar with which a variable can be set | The data type should be set to session variable, input enabled, bound to key code 135 (F24) |
TYPEDROPDOWN | Enables a dropdown control, based on the values set in the field “Custom List” | Custom list, the data type should be set to session variable, input enabled |
TYPEMASKED | When set, the data set in the input field will be replaced by *, commonly used in password fields | The data type should be set to session variable, input enabled |
TYPERADIO | Enables a vertical radio control, based on the values set in the field “Custom List” | Custom list, the data type should be set to session variable, input enabled |
TYPERADIOHORIZONTAL | Enables a horizontal radio control, based on the values set in the field “Custom List” | Custom list, the data type should be set to session variable, input enabled |
WARNING | Sets the displayed text with a red font color and centers it on the view | None |
Transform layouts through CSS Class modifications
The next step is improving the readability and usability. Highlight, for example, a text on the screen or emphasize a text in larger font size. With CSS Class, you can define how the font is presented within your view. In contradiction to a CSS attribute which can only be bound once to a line, a single line can have multiple CSS Classes assigned to it by using a pipe “|”. For instance, if you would like a bold green font in conjunction with a font size of 5 you could write BOLD|FONTSIZE_GREEN|FONTSIZE_5 to accomplish this.
The following CSS Classes are currently available:
CSS Class | Description |
BOLD | Sets the formatting of the value entered in the field text to bold |
ITALIC | Sets the formatting of the value entered in the field text to italic |
DATATABLE | Sets the formatting to display a table. Must be used in conjunction with the CSS Attribute Table |
FONTCOLOR_GREEN | Sets the colour of the value entered in the field text to green |
FONTCOLOR_RED | Sets the colour of the value entered in the field text to red |
FONTSIZE_5 | Sets the formatting of the value entered in the field text to a size of 5 |
FONTSIZE_10 | Sets the formatting of the value entered in the field text to a size of 10 |
FONTSIZE_15 | Sets the formatting of the value entered in the field text to a size of 15 |
FONTSIZE_20 | Sets the formatting of the value entered in the field text to a size of 20 |
FONTSIZE_XS | Sets the formatting of the value entered in the field text to a XS size |
FONTSIZE_S | Sets the formatting of the value entered in the field text to a S size |
FONTSIZE_M | Sets the formatting of the value entered in the field text to a M size |
FONTSIZE_L | Sets the formatting of the value entered in the field text to a L size |
FONTSIZE_XL | Sets the formatting of the value entered in the field text to a XL size |
FONTSIZE_XXL | Sets the formatting of the value entered in the field text to a XXL size |
Empower user interaction: mastering button customization
You can customize your layout in other ways as well. For example, you can edit buttons to look exactly how you want them. To insert an icon for a button, you can select one in the column “Icon Code”. You can also scale the length and height of a button through the fields “Value Format” and “Icon Format” respectively.
Hint: Type what you are looking for to search for a match.
Work internationally with multiple languages
Working with a bi-lingual team? Create multiple languages within the same view with advanced features. Simply click on the 3 dots when hovering over the field “Text” and set a language code and a desired translation of the original field. Now, whenever you assign that language code to a scan employee, they will be able to read the scanner in their native language.
The difference between a tailor-made solution and an industry standard?
Deciding between custom software or a (branche) standard solution does not come lightly. With the tight margins, a bad buy is the last thing you need. This increases the importance of making a decision that can support you effortlessly in the short and long run. But which solution fits best with your organization now and in the future? You can read all about it in our whitepaper.