Artchitecture

We will explain how to read the barcode with the smartphone camera using “RayKit” app and work together Salesforce.

Usage scene of Scanning function

With existing Salesforce organizations and smartphone cameras, it is possible to improve the efficiency of the work using the barcode and improve the user experience at low cost. For example, it can be used in the following scenes.

  • We will issue a lecture slip with QR code in advance to the visitors of the conference and exhibition. When the receptionist scans the lecture voucher with the camera of the smartphone at the time of the visit, the attendance situation can be reflected in Salesforce in real time.
  • You can read the material you arrive and the bar code pasted on the stock with the camera of the smartphone and reflect the result to Salesforce on the spot. You can complete the inspection on the spot without going back and forth between the warehouse and the desk.

In addition, you can use not only a smartphone but also a tablet (iPad).

Operation flow of Scanning function

After developing the reading screen with Salesforce, start up the Salesforce screen from the dedicated application of the smartphone. The exclusive application uses the application “GC Barcode (Grape city bar code)”, not Salesforce application (formerly Salesforce 1 application).

The GC Barcode application is used to realize close cooperation with the camera of the smartphone. The screen operation after logging in to Salesforce from the application is almost the same.

  1. The developer installs a “read” button on the Salesforce screen.
  2. The user installs the smartphone application.
  3. The user logs in to Salesforce from the smartphone application.
  4. The user displays the Salesforce screen from the smartphone application.
  5. A user performs a reading operation.
  6. The reading result is stored in Salesforce.

The chart below shows the procedure.

sequenceDiagram participant ユーザー participant GC Barcodeアプリ participant Salesforce ユーザー->>GC Barcodeアプリ: スマホでアプリを起動 Salesforce->>ユーザー: Salesforceログイン画面を表示 ユーザー->>GC Barcodeアプリ: Salesforceにログイン Salesforce->>ユーザー: Salesforceのホーム画面を表示 ユーザー->>GC Barcodeアプリ: Salesforce上のページを開く ユーザー->>GC Barcodeアプリ: 読み取りボタンをタップ GC Barcodeアプリ->>ユーザー: カメラ画面を表示 ユーザー->>GC Barcodeアプリ: カメラでバーコードを読み取り GC Barcodeアプリ->>Salesforce: 読み取ったデータをSalesforceに渡す Salesforce-->GC Barcodeアプリ: 読み取ったデータを判定 Salesforce->>ユーザー: 判定の結果ページを表示

Flow of development of reading function

Please pay attention to the difference between “GC Barcode application” and “Salesforce application (formerly Salesforce 1 application)” and “Salesforce 1 Platform” accessed from smartphone’s web browser.

In either case, you can display a Salesforce screen optimized for mobile. However, it is only when using the “GC Barcode application” to scan the barcode through the camera of the smartphone and transfer the result.

graph TD; A[スマートフォンのホーム画面] B[GC Barcodeアプリ] C[Salesforceアプリ] D[ブラウザーからSalesforceを開く] E[Salesforceのログイン画面] F[Salesforceのメニュー] G[Visualforceページ] H[カメラを使ったバーコードの読み取りはGC Barcodeアプリのみ] A --> B A --> C A --> D B --> E C --> E D --> E E --> F F --> G G --> H
  1. Make sure the type of barcode you want to read is supported by RayBarcode. The type of readable barcode refers to the type of readable barcode on this page.
  2. Make sure your smartphone is a supported OS and version of RayBarcode.
  3. Make sure you have a Salesforce license and a RayBarcode license. Trial version is also acceptable.
  4. Develop screens for read operations using Visualforce pages and Apex classes.
  5. Display a Visualforce Page as an App in Salesforce 1
  6. Install the “RayKit” app on your smartphone.
  7. Log in to Salesforce from the “RayKit” application.
  8. Display a Visualforce page from Salesforce.

You can also develop with Lightning app instead of Visualforce page.

The following points are points that need attention because they tend to be confused. The check marks (✔) in the following table indicate that they are supported.

Camera differences between apps:

App type Step 1. Scan the barcode from the camera Step 2. Send Reading Data to Salesforce
Smartphone built-in “camera” application Model dependent
“Salesforce” app provided by Salesforce.com, inc.
“RayKit” application offered by Grape City ✔ ✔

Salesforce Differences Between Apps:

App type Step 1. Login to Salesforce Step 2. Use the Salesforce screen Step 3. Use barcode reading app on Salesforce
Smartphone built-in “camera” application
Smartphone built-in browser application ✔ ✔
“Salesforce” app provided by Salesforce.com, inc. ✔ ✔
“RayKit” application offered by Grape City ✔ ✔ ✔

App development differences:

The picture above can be enlarged by clicking (tap).

  • Apps running on smartphones: The “RayKit” app is provided, so Salesforce developers do not have to create apps to install on their smartphones.
  • Apps running on Salesforce: With Visualforce and Lightning, Salesforce developers can develop any app with barcode reading capabilities.

Barcode type that can be read

When using a smartphone back camera, it supports reading of the following barcodes and two-dimensional codes. For front camera (in-camera), only QR code (QRCode) reading is supported.

  • Code39
  • Code93
  • Code128
  • DataMatrix
  • NW7（alias : Codabar or Codeabar or Code2of7）
  • ITF
  • JAN8（alias : EAN8）
  • JAN13（alias : EAN13）
  • QRCode
  • GS1DataBar OmniDirectional（alias : RSS-14）
  • GS1DataBarExpanded（alias : RSS-Expanded）

We support the reading of the next bar code experimentally.

  • Aztec
  • PDF417

Technology selection

プIf you want to process barcode reading data without the need for programming, you can create a reading app with Process Builder.

For developers, you can choose between Visualforce page development or Lightning app development. Whichever you choose, barcode reading can use almost the same function. Choose the one that best suits your development requirements. For example, in the case of Lightning app, please note that you need to activate “My Domain”.

The barcode reading screen is provided as a single button. When the user clicks the button, the camera screen is displayed and the barcode can be read. If the barcode is successfully read, the original screen will be restored and the read value will be returned. Developers can concentrate on processing the values that have been read successfully.

Difference with QR code automatic recognition function of camera application

Some smartphones have built-in functions that automatically recognize and read a QR code with a camera application, display a website from a URL, and capture data from a QR code. For example, in iOS 11, the camera application can read the QR code. RayBarcode does not use the QR code reading function of the camera application, but uses its own barcode reading function of the “RayKit” application. For this reason, the screen, operation, and function at the time of reading differ.

In general, the smartphone camera app does not support reading other than QR codes, but the RayKit app supports reading of various barcodes other than QR codes.

The RayKit app is installed and used additionally as an app, so you don’t have to worry about the difference in the camera app’s functionality for each smartphone model. You can use different smartphones like iPhone and Android with the same operation. There is no mechanism to check if the scanned barcode data matches the data on Salesforce with the camera app, but with the RayKit app it is possible.

Japanese reading

When kanji, full-width hiragana, full-width katakana, full-width alphanumeric characters, etc. are included in the QR code read by the RayKit application, the QR code value must be encoded in Shift-JIS (Shift JIS) or UTF-8.

Copyright © MESCIUS inc. All rights reserved.