Create input forms for shipments
◄ Back to Companies as groups
Procedures on this page:
On the basis of the 'structure' created in the previous work steps, configurations for operative processes now become more significant.
As an example process for the typical use of a Lobster_pro system, the recording and tracking of Shipments is used here.
Although Shipments are at the heart of logistics processes for most companies, even within the same company there are often different views on the structure and requirements for this 'business object'. In practice, different 'shipment types' with specific characteristics and process sequences are therefore often differentiated.
Against this background, it is not the policy of Lobster_pro to bundle up 'common' requirements into a binding default that makes things more difficult for the business or specialist department involved.
On the one hand, Lobster_pro offers a specific business object type 'Shipment' for which the system provides a sophisticated standard logic and infrastructure as well as some specific functionalities. On the other hand, with regard to the design of workflows and data entry forms, Lobster_pro focuses above all on an optimum balance between flexibility and efficiency. The intelligently structured components offered makes it possible to set up configurations on an individual basis, instead of having to compromise and adapt a supposed 'default' for concrete application dictated by the system.
This can mean that different, specifically designed entry forms are created for the same business object type (here: Shipment), which the system can access according to predefined rules depending on the situation.
Complicated? No way!
We make it simple ...
For the following configuration, the user 'jabend' should be logged on, which implicates the company 'Smart Logistics AG' and the role 'Administrator'.
Open 'Shipment details forms' overview
Follow the menu path Administration/Configuration/Input forms/Shipment details forms to initiate the configuration of entry forms for Shipments.
This opens an overview, listing all any previously created entry forms for shipment details available in the login context. So far this list is empty.
A click on New (in the ribbon) or by double-clicking on the list entry for an already created form opens the Form designer, which provides a uniform working environment for configuration and testing for all Input forms, Portals and Dashboard.
Create an input form for shipment details
Unless an Owner is explicitly selected for the Input form in the first tab, the company of the session (here: 'Smart Logistics AG') is automatically assigned as the owner when saving. Since this is required in our example, the selection field can remain empty.
A Name must be specified for each input form before it is saved. This name should enable the form to be 'recognized' (e.g. in the 'Shipment details forms' overview). However, at runtime it does not appear for users in the menu or title bar.
For the example scenario, an input form for 'Standard shipments' with very limited content (Shipment number, Sender, Recipient, Shipping date and Position data) is provided. Therefore, the Name 'Standard shipment' was entered here.
After the required header data of the form has been entered, the 'design' can begin in the Form editor tab:
The Element bar (1) shows a catalog of predefined elements that can be placed in the Form layout (2) via drag & drop.
►NOTE◄ Conversely, elements can be removed from the Form layout (2) by using drag & drop on the Element bar (1).
The displayed categories (e.g. 'Layout', 'Shipment', etc.) and the elements offered for selection after opening a category are arranged according to the current selection in the Form layout (2).
The categories for attributes also expand their selection automatically depending on the Master data entered for Dynamic enumerations.
The category Layout section (3) contains general structural components (Label, Tab panel, etc.) as well as controls (like Button or Check box).
All elements in the Form layout (2) appear in the Tree view (4) as hierarchically nested nodes in a tree structure. From there they can also be removed by dragging them to the Element bar (1).
On the right-hand side, the Form editor shows a bar with Properties (5) matching the selection in the Form layout (2), which can consist of a single element or several.
In practice, input forms are usually not created once and then used unchanged 'forever'. On the contrary – the concept of Lobster_pro is designed to ensure that necessarry adjustments can be implemented extremely quickly and with minimum bureaucracy. The range of input forms and their functionality must therefore be constantly expanded and revised in parallel with the ongoing operation of the system. It is important that users are not confronted with a 'half-finished' form. In contrast to other configuration objects, changes to Input forms and other forms (Portals and Dashboard) are saved with regard to the design by clicking on Save in the ribbon, but are not immediately 'operationally effective'. A newly created or revised form is only confirmed when you click on Publish (6) in the ribbon. The 'publishing' includes saving. The design should not only be completely implemented, but also checked in test mode.
In the same section of the ribbon (subcategory Editor) you can also select the Language for localizable contents in the Form editor, so that the multilingual appearance can be tested and maintained without changing the language of the session.
However, this compact introduction can only provide a superficial explanation of how to use the form designer. A more detailed description of the extensive possibilities can be found in the manual (Form designer, Form elements).
Layout for the header data of the shipment
The layout for the shipment entry should initially only contain the automatically assigned shipment number (ID), the planned departure date, the consignor address and the consignee address.
The first step is to drag the element ID (1) from the category Shipment (in the element bar) into the form layout and drop it there at an arbitrary position within the Section (2) element.
►NOTE◄The dragged element is added to the form layout when the mouse button is released (drop). New elements are always added as a child element of one of the elements already included in the form layout. In our example, the parent element is the Section element, which by definition covers the entire layout area an empty form and serves as the 'top' Element containers in the hierarchy of a form (see also Tree View above the element bar), which contains contains all additionally inserted Form elements. An element added to an Element containers is positioned (3) according to the arrangement principle applicable for the type of Element containers. In our example, the first added element is positioned 'top left' within the Section element. The next element added will by default be placed immediately below, as the Section arranged child element like an Element containers of the Row layout type.
Immediately after an element is transferred from the element bar (left) to the form layout, it is considered 'selected' so that its Properties can be displayed and edited in the property bar (right):
The text for the Label (1) entered instead of the standard label ('ID') appears above the element, since the option Show label is selected by default for a Text field.
A more extensive explanatory text for an element can be provided as a Tooltip (2). It will appear temporarily (in a kind of 'speech balloon', see image), if the mouse cursor is located in the area of the element.
However, a Tooltip (2) will only appear in the form at runtime if the element is also set to Active (3). The ID-element is deactivated by default, to prevent from interfering with the ID assigned by the system.
Setting the option Active (3) makes the tooltip indicator appear in the form layout, since the the option Indicate tooltip is selected by default for a Text field.
To enable the Tooltip (2) while preventing user access to the ID, the options Active (3) and Read Only (4) must be combined.
Next an element is to be added, in which the planned departure date can be specified. For each Date types defined in the system, the form editor features an element representeing a date attribute of the respective for use with business objects. Whether the system already offers a suitable Date attribute can be easily determined with the search function (1) in the element bar. In the screenshot the text 'departure date' was typed in to the input of the search (1), which produced a list of matches below. Unsurprinsingly, all matches listed belong to the category 'Date attributes'. The element Departure date planned has already been added to the form layout by drag & drop. Therefore it appears gray in the element bar as it can only be added once within the same form:
The addresses of the sender and recipient of the shipment should be entered by the user only directly and without reference to an Address book.
|
For this purpose, the category Addresses (edit only) provides suitable elements, which by default offer a selection of address details inside a so-called Row layout container.
|
|
|
After dropping the element in the form layout, a Row layout container appears, which contains a predefined set of elements for address details. ►NOTE◄ Choices in the element bar and possibly also the success of a drag & drop action may depend on the selection of a certain target element in the form. Before adding the Consignee address, this risk did not (yet) exist, since none of the perviously added elements would allow adding or removing contained elements. The just added Consignee address container allows this. However, none of the available elements uses a name beginning with 'consignee'. Therefore the element bar appears empty. Click the X Symbol, to delete the search criterion! |
|
|
Users of our input form should be able to fill the following address fields:
Based on the configuration provided by the system, unnecessary fields can be removed by drag & drop (onto the element bar), where a trash-can symbol is shown. Delete the fields Match code and Account-No by this method! Next, customize the Label (in the property bar) for the fields highlighted in yellow in the screenshot to the following texts:
|
|
|
All of the previously added fields should now be defined as 'required fields', which means that a shipment can only be saved if these fields are filled in. The option Required field (2) can be selected after selecting an element in the property bar. This procedure (select element and check option) must then be repeated for each element. Alternatively, multiple selection (1) of all relevant elements can be 'clicked together' while holding the Ctrl key. For multiple-selection, the property bar supports a 'mass update' for displayed properties. In this case, checking the option Required field will apply to all elements contained in the multiple selection. |
|
Now the layout of the input form can be structured more clearly with the help of elements from the Layout category:
|
The Consignor address should appear to the right of the Consignee address (3) presenting the same address details in the same order. However, the Section (1) element will arrange all contained elements strictly "row-by-row". Therefore a Column layout (2) element must first be added at a position between the Departure date planned and the Consignee address (3). During the drag & drop action a strong red line appears to mark the target position (see screenshot). ►IMPORTANT◄ The Section (1) element must be selected before adding the Column layout by drag & drop. If the Consignor address was selected instead, a Column layout can only be dropped inside the address container. Afterwards, the already inserted container with the complete Consignee address, which is now placed immediately in the Section, can be moved into to the newly added Column layout container by drag & drop. ►NOTE◄ Drag & drop actions for elements can also involve the Tree View at the left. This is often easier and more precise than in form layout, especially for containers. |
|
|
Next, the element for the Consignor address (4) can be placed by drag & drop directly from the element bar to the target position in the Column layout (3) – to the right of the 'Consignee'. The green frame around the Consignor address in the screenshot to the right appears when the mouse points at an element of the element bar, which has already been added to the layout. The Consignor address (2) can also be dragged from there to its designated position in the Tree view (3). In the screenshot on the right, the adjustments made above for the 'Consignee' have only partially been applied to the layout of the address. Ensure both addresses use the same choice of fields and labels! ►NOTE◄ The order of elements in a container (here the two address-containers, which are arranged as 'columns') can also be changed by drag & drop. Again, such adjustments are usually easier and more precise in the Tree View than directly in the Form layout, if containers are involved. |
|
Layout for the position data of the shipment
In addition to the previously compiled header data for the shipment, the user should also be able to define the shipment's positions.
The Line item element in question is offered in the Shipment category. It can be used exactly once for each configured Line item type within the same input form.
If the element is transferred to the form layout by drag & drop, the following dialog appears, in which the respective Line item type must be selected and assigned by clicking on Apply.
In the example scenario, as shown in the screenshot, only the Line item type Default appears for selection, since no other types have been created:
The outer shell of the element is a Repeatable element (1), which by default contains a Row layout container whose configuration defines the layout for the detailed data of line items, also referred to as 'positions'. Elements from the category Shipment > Line item (2) of the element bar can be added to the Row layout. The element bar only provides elements suitable for line items if an element on the line item level (e.g. the Row layout) is currently selected. At runtime, the Row layout is repeated for each position added, and all contained elements are duplicated. With the symbols 
and 
(3) new line items can be added or existing ones removed.
The property bar (to the right) features specific properties for a Repeatable element (4). Here, the value for Min. entries was changed from a default 0 to 1. At runtime the input form will therefore provide at least one 'repetition' of the Row layout labelled as Position, which cannot be removed by the
symbol. This enables entering details for the first line item without having to click the
symbol first. The default value of 0 for Max. entries is maintained, which the system interprets as 'no upper limit' for the number of line items.
The Row layout in the element for the Line items should now be equipped with certain input fields for line item details – again via drag & drop.
|
The following elements should define the line items of a standard shipment:
Drag these elements from the element bar into the Row layout labelled Position one by one, until it matches the screenshot to the right!
|
|
►NOTE◄ While the Number of packages hardly differs externally from a text field, a combination of two fields combined in a Column layoutt is inserted for the Gross weight. The difference is that the 'Numeric attribute' used in the second case provides for the specification of a unit (see Units) in addition to the numerical value, while the Number of packages (special case!) is predefined as a field of the position, which only accepts integer values without a unit.
Reorganize layout
The design of the newly created input form now contains elements for all desired information, but still looks rather confusing.
Simple layout components such as Horizontale und Vertikale Linie (HRule/VRule) or a Tab panel can help to make the layout of an input form clearer and more intuitive.
Here, on the top level of the form, only the Shipment no. should appear (quasi as a heading), while the other 'Iinformation' about the shipment and the position data should be distributed on two different tabs in a Tab panel element.
To do this, first drag the component Tab panel (1) from the Layout category into the form layout, for which the Show label (2) option in the property bar is also deselected.
Within the properties bar Tab panel the list of existing Tabs (2) appears, where you can add more tabs by clicking the
symbol and remove existing ones by clicking the
symbol.By default, the Tab panel already offers the two tabs (of the Row layout container type) required for the input form.
The previously configured elements can now be distributed to the two tabs via drag & drop. These must then be renamed using the property bar, so that the two tabs look like this:
►NOTE◄ The Tab panel uses a predefined height (Fix: 165) by default, so it will not grow appropriately when inserting large content. This value should be adjusted if necessary.
Publish the input form
A click on Publish in the ribbon of the form editor makes it available to the operative users in the system.
Since it is also saved when publishing, it also appears in the overview for 'Shipment forms'.
► Continue with Entering shipment data