View source for Deep dive: Shopping cart with barcode scanning

{{Deep TOC}}
One standard feature of applications dedicated to the sales process is adding items to a basket. For selected entities used in the process, Resco Mobile CRM comes with a special multi-lookup form (sometimes called "shopping basket") to manage items in the list. In this form, products are on the left, and line items are on the right. This behavior is hardcoded and cannot be enabled for other entities. See [[Resco_Field_Sales%2B#Special_behavior_of_child_lists|Resco Field Sales+]] for more details.

Occasionally, our partners and customers contact us, asking for similar functionality for other entities. In the example below, which is designed for non-standard entities, we create a custom form for the Warehouse Transaction entity. Users of the Resco Mobile CRM app scan the barcode of a warehouse transaction item, enter the quantity, and can immediately proceed to the next item. The efficient scanning loop minimizes interactions, making it ideal for rapid-fire [[barcode]] entry scenarios. 

This setup works well when connecting related records, like scanning products into an order, checking in attendees, or logging items into inventory. It doesn’t require any custom coding, which makes life easier, and it’s flexible enough to fit into whatever process you’re working with. Plus, you can build a quick confirmation step before anything gets saved so users can double-check their input.

== High-level overview ==

This solution uses the following entities:
* Warehouse Transaction: Used for tracking deliveries. Each delivery can include multiple transaction items.
* Warehouse Transaction Item: Identifies the product and the quantity included in a particular warehouse transaction.
* Product: Things that can be included in a warehouse transaction.

Main steps:
* Define shared variables used in the process
* Create a new form tab for the Warehouse Transaction entity dedicated to adding items.
* Add three buttons that control the process:
# New item - initiate the barcode scanning and scan the first item
# Save & Next - save the scanned item (including quantity) and scan another item
# Save - save the scanned item (including quantity) and return to the standard Warehouse Transaction form.

== On Load rule: declare shared variables ==

# Edit the Warehouse Transaction form in Woodford.
# Click '''On Load''' and add the following shared variables.<br>[[File:Barcode-example-shared-variables.png|alt=shared variables used for the barcode scanning scenario]]
# Save all changes.

These variables are used later in the button-click rules.

== Create a new form tab ==

In our scenario, the warehouse transaction form currently has two tabs, and in this step, we are adding the third one.
* '''General''' tab with basic information about the transaction.
* The list of associated warehouse transaction items
* NEW: '''Add items''' tab with buttons controlling the data entry process.

[[File:Barcode-example-warehouse-transaction-form.png|600px|alt=Warehouse transaction form with three tabs]]

# Edit the Warehouse Transaction form in Woodford.
# From the '''Tabs''' pane, add a '''Detail''' tab to your form and rename it.
# Select the new tab and add the following components:
#* '''New item''' button
#* The shared variable "product"
#* The shared variable "quantity"
#* '''Save''' button
#* '''Save & Next''' button
# Save all changes.

Next, we must define [[Button Click]] rules for the three buttons.

== New item button ==

Write a button click rule for the "New item" button.
# In the first three steps, hide all tabs except "Add items".
# Initiate barcode scanning, saving the result into the shared variable.
# Fetch the record matching the barcode from the product entity.
# Save the fetched record into the "product" shared variable.
# Set focus to the quantity field on the form.

The scanned product is displayed on the form. The user must enter the quantity, save the record, and optionally scan another item.

[[File:Barcode-example-newitem-buttonclick.png|600px|alt=newItem button definition]]

== Save button ==

Write a button click rule for the "Save" button.
# Create a new Warehouse Transaction Item record.
# Populate its Product, Quantity, and the parent Warehouse Transaction ID fields; then save the record.
# Clear the shared variables.
# Restore the standard look of the form, making hidden tabs visible again.

[[File:Barcode-example-save-buttonclick.png|600px|alt=Save button definition]]

== Save & Next button ==

Write a button click rule for the "Save & Next" button.
# Create a new Warehouse Transaction Item record.
# Populate its Product, Quantity, and the parent Warehouse Transaction ID fields; then save the record.
# Clear the shared variables.<br>The remaining steps are the same as the New item button.
# Initiate barcode scanning, saving the result into the shared variable.
# Fetch the record matching the barcode from the product entity.
# Save the fetched record into the "product" shared variable.
# Set focus to the quantity field on the form.

[[File:Barcode-example-savenext-buttonclick.png|600px|alt=Save & Next button definition]]