1 Introduction

The purpose of this book is for readers to acquire the necessary skills to develop applications using the digital note applications “GEMBA Note.” Through exercises, readers will learn the following fundamental knowledge related to the development and operation of GEMBA Note applications.

1. Procedure for developing an application that searches across multiple notes and displays the results in a list
2. How to customize the user interface
3. Operation of development packages for storing content related to app development

Explain the features and uses of GEMBA Note before starting to read. Describe the themes and objectives of each chapter, the steps to follow when verifying the sample code, how to proceed with the exercises, and the notation of sample code and commands that appear in the text.

1.1 What is GEMBA Note?

eYACO/GEMBA Note is a digital notebook application designed for use in the “GEMBA(field)” to support team work and improve productivity by centrally managing various types of information. It allows users to record current events through handwritten notes, text, photos, and videos, annotate the same drawings and images with multiple members, and collaboratively create field reports.

Not just a simple note-taking app, but also a development platform with features such as:

• Allows easy creation of business forms
• Database mechanism
• Information sharing through real-time screen sharing

GEMBA Note and eYACHO are sister products that have the same features. eYACHO was developed in collaboration with a general construction company in Japan and includes content specialized for construction and civil engineering tasks (e.g., crane diagrams, survey calculation templates, construction photo management, etc.).

On the other hand, GEMBA Note is positioned as a general-purpose application intended for use not only in construction sites but also in various other field operations.

1.2 What GEMBA Note Can Do

Balancing High Functionality and Ease of Use for “No Wait” Field Operations

It is not practical to switch between several applications at various sites where conditions change from moment to moment. In this respect, GEMBA Note is a digital notebook with numerous functions needed in the field.

Although it is such a multifunctional application, it has various customization functions such as a toolbox and UI customization, and can provide menus focused on necessary operations, so even beginners can start using it right away.

Real-Time Transmission Technology that “Connects People in the Moment”

MetaMoJi’s real-time information transfer technology “Share” enables stress-free information sharing between remote locations such as the field and the office, or between distant sites and the headquarters.

The “Share” technology does not compress and transmit screen images, but only the updated edited differences, greatly reducing the transmission volume. Even the most detailed forms can be shared quickly and without loss of resolution, allowing stress-free exchange of drawings and detailed management forms.

Fusion of “Freedom” and “Standardization”

GEMBA Note is a digital notebook that allows you to write anything as Freely as you would in a paper notebook. Additionally, it enables end users to quickly create forms required for Standardization tasks, integrate with task systems, and import/export data, making it suitable for standardized operations as well.

Aggregation for Collecting and Displaying Information in a List

GEMBA Note has database functions based on tag schemas. By using the application to paste tags by note, page, or object, database processing such as searching and aggregation across notes and pages becomes possible.

It is possible to display a list that aggregates data and information from accumulated data and external services, matched for the specific purpose. This helps field managers to understand information from various aspects.

Possible uses include:

• Aggregating data written by multiple people in separate notebooks
  
• Compiling daily reports into monthly reports

These functions allow for the construction of business systems.

Extension Features for Customization

GEMBA Note comes equipped with a wide range of features that cover various on-site operations, making it usable without the need for individual development. Additionally, it can be customized to have a user-friendly UI and menu structure that is common across different sites, even without advanced IT skills.

GEMBA Note offers customization capabilities at various levels. These range from creating and sharing form templates by end-users to advanced system development by IT departments and system integrators.

By providing a flexible and multi-layered customization environment, it can serve as an application development foundation for the digitization of on-site operations.

Who Uses It and How?

Creating and sharing the necessary forms at each site without relying on the IT department or external SI companies. Systemization is driven by on-site personnel rather than the management department, ensuring that the digitization efforts meet the specific needs and satisfaction of the site staff.

Detailed and dense information can be shared in real-time across departments and locations, significantly improving productivity and realizing true “work style reform.”

Additionally, advanced business system construction integrated with other systems is also possible through system development companies and SI companies.

1.3 What GEMBA Note Apps Can Do

The following figure depicts what applications developed in GEMBA Note can do:

🔳 Creating Forms using Form Components

You can create a business form using a variety of form components such as text and table that are placed on a note.

🔳 Making Tag Schemas into a Database

Form components linked with tag schemas on a form page of GEMBA Note allows you to utilize the form information as a database.

🔳 Cascading Inputs

GEMBA Note offers drop-down menus for selecting dynamically-updated items.

🔳 Defining Search Conditions

You can define search conditions that consist of search connectors and SQLs to declare data extraction methods.

🔳 Aggregations

Commands and button components allow you to run your defined search conditions.

🔳 Exporting the Results of Aggregations (Not described in this document)

Using button components, the results of executing search conditions can be exported as files as image, PDF, and CSV formats.

🔳 Connecting to External Systems (Not described in this document)

Using REST APIs, you can import/export data from/to external systems.

🔳 Launching URL Scheme (Not described in this document)

URL scheme is used as an identifier in launching applications and performing a set of commands on iOS and Windows devices from other Web applications. This feature allows you to import/export data to/from GEMBA Note.

1.4 Prerequisit Knowledge

Users who intend to develop an GEMBA Note application using this book are assumed to already be using either product and to be able to perform the following basic operations.

• Creating and editing notes and pages
• Adding and editing text
• Adding and editing photos and diagrams
• Editing tables

Having knowledge of SQL (Structured Query Language), a specialized language for manipulating and defining data in relational database systems, is likely to accelerate understanding of the definition and execution of aggregations.

1.5 Chapter Overview

This book is composed of eight chapters. Below is an overview of each chapter, the key points to be learned, and examples of the deliverables for each chapter.

From Chapter 2, through practical exercises, new content and features will be sequentially added to the previous tasks, ultimately completing a single development package.

Ultimately, this will result in a “Property Management Application” consisting of one to two notes, a couple of tag schemas to represent them, and aggregation search conditions.

🔳 Chapter 2: Preparing for Application Development

To develop an application on GEMBA Note, you must start by preparing the “development package.” This involves explaining the required permissions and necessary preparations.

🔳 Chapter 3: Creating Forms

In GEMBA Note, various types of content such as handwriting, text, and images are primarily placed on notes to organize information. There are form components available to construct forms and items. These components can be placed on notes or shapes to create standardized forms.

🔳 Chapter 4: Defining Data

Simply placing form components in a note allows the note to hold information, but it does not enable the retrieval and utilization of those values. The expression of what each component “means” is missing. Therefore, a structure called a “tag schema” is prepared to define the meaning and role of each component.

🔳 Chapter 5: Defining Search Conditions

GEMBA Note can process form components linked to a tag schema as a database. Its search function, called “aggregation,” extracts and displays data that matches the search conditions from the data collected by various connectors. This chapter will cover how to create search conditions.

🔳 Chapter 6: Executing Search Conditions

This chapter focuses on executing the aggregation search conditions defined in Chapter 5. You will learn how to display the results of cross-form searches and understand how to update tag schema values through button actions.

🔳 Chapter 7: Customizing UI

The UI display of GEMBA Note can be customized by creating XML definition files and loading them into notes or note templates. This chapter will cover the customization methods and the procedures for registering the created forms as reusable standard UIs.

🔳 Chapter 8: Deploying Applications

Explain the tasks and procedures for sharing completed development packages with other users.

1.6 About Exercises

Each chapter includes exercises designed to reinforce the concepts and skills learned. When working on these exercises, you will add or modify content within the same development package. The files required for the exercises and reference materials can be downloaded directly from the locations below, or you can view the contents on the web and save the files.

Backup

Property Forms

[1] Import the file when skipping the exercise to create the Property form

Shared List

[2] Use the file to shorten the exercise of a shared list

UI Definition

1.7 About Suppliments

Each chapter may contain supplementary explanations related to the development of the GEMBA Note apps, which are referred to as “Suppliments.” These sections might also include more anecdotal content. While they are not entirely unrelated to GEMBA Note, their purpose is to broaden and enrich the reader’s knowledge by providing explanations about widely used technologies by offering comparisons or analogies with GEMBA Note.

1.8 Code Descriptions and Operation Commands

In this book, numbers and symbols are used to differentiate between code descriptions and execution commands. Their meanings are as follows.

Examples of Code Formatting

SELECT * 
FROM P_TABLE  
WHERE name != '' -- Comment

When presenting expressions or code similar to SQL, write a comment after – to highlight and explain specific sections.

Example of Command Execution Formatting

> sqlite3 property_management.db

When executing commands, use the Windows Command Prompt. Place the > symbol at the beginning of the command, followed by the command itself.

1.9 Trademarks

There are cases where the product names appearing on this book are used as company trademarks.

• Google and Android are registered trademarks or trademarks of Google LLC in the United States and/or other countries.
• iPhone and iPad are trademarks of Apple Inc.
• Linux is a registered trademark of Linus Torvalds.
• Visual Studio Code, VS Code, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
• All other trademarks are reserved by their respective owners.

1.10 Special Note

The exercises are designed to be performed on a PC running Windows 10 or 11.

1.11 Reference Documents

The documents related to application development are as follows:

• GEMBA Note Quick Guide
• Package Development Guide (Japanese) (zip file)
  • Includes the following three documents:
    • Aggregation Search Condition Editing Guide
    • Custom UI Configuration Guide
    • Package Development Guide
• Form Creation Manual
• Administration Manual

2 Preparing for Application Development

This chapter describes the necessary usage permissions, the configuration for using developer features, and key points for operating on a Windows PC to start development on GEMBA Note.

2.1 Steps to Develop an Application

The following figure shows how to develop and to deploy an application in GEMBA Note.

[1] Using Developer Mode

Enable the package development features to show development package folders.

[2] Creating a Package

Prepare a development package.

[3] Creating a Form

You can create a business form with various form components on a page of a note.

[4] Creating Tag Schemas

Define tag schemas and their properties to structure the data to be utilized as a database.

[5] Configuring the Tag Schemas

Link each form component with a tag property of the tag schemas.

[6] Defining an Aggregation Search Condition

Define a search condition using the tag schemas and their properties.

[7] Setting the Aggregation Search Condition

There are two ways to execute an aggregation search condition. The one is for displaying results on a table or with sumnails. Another is to invoke from a button component.

[8] Executing the Aggregation Search Condition

Run the aggregation search condition to confirm the behavior as expected.

[9] Registering the Form

Put the created form as a template in the development package to easily reuse them.

[10] Publish the Package

The development package can be shared among other users by releasing or deloying it.

[11] Managing the Package

You can manage the development package to back it up or to modify it for a new version.

2.2 Installation of GEMBA Note

GEMBA Note can be installed from the App Store, Google Play Store, or Microsoft Store. Although the app is available for free installation, a license is required for use. You will need to set up an organization ID, user ID, and password to log in to the cloud service provided by MetaMoJi Corporation.

If you have not yet purchased a license or development options, contact MetaMoJi Global Team by sending a request mail to sales@metamoji.com. A trial license will be issued.

While it is possible to use development environments on iPads, it is recommended to use the Windows version of the app for easier development tasks such as copy and paste with mouse operations and multi-window support.

2.3 Required Permissions

To develop applications for GEMBA Note, not only a product license but also “Developer Permissions” are required to access developer features for package development.

There is also a “Package Administrator Permission” for managing the developed packages. Each permission should be allocated to the appropriate users according to the application development policies within the organization.

The configuration of these permissions is performed using an account that can log in to the web-based user management tool, commonly referred to as the “Green Tool.”

2.4 Using Developer Features

When logged in as a developer user, you can enable package development features.

1. Click the application icon at the top right corner of the note list screen to display the menu.
2. Select Developer Mode On from the menu.

A “Package Development Folder” will appear in the folder tree.

2.5 Creating a Package

A development package is a container on GEMBA Note for developing forms and items, and storing content that provides aggregation functionality known as “Aggregation.”

Select the package development drive and start creating a package by choosing + > Create Package from the navigation menu.

2.6 Operations on a Windows PC

Applications installed on a Windows PC come in two types: “Store Apps” and “Desktop Apps.” GEMBA Note is a Store App, originally developed for smartphones and tablets like iPhones, iPads, and Android devices.

In a Windows environment, some devices, such as the Microsoft Surface, support touch screen operations. However, on most commonly used Windows PCs, which do not have touch screens, you will need to use a mouse and keyboard for operation.

On a Windows PC, copying text with Ctrl + C and pasting it with Ctrl + V cannot be done within GEMBA Note’s notes. Instead, right-click on the item to bring up the context menu, select “Copy,” then right-click in the desired location and choose “Paste” from the menu.

Exercise 2: Create a Property Management Package

Create the “Property Management Package” using the following steps. Note: The provided examples are for reference only; please customize them according to your needs.

• Select the Package Development Folder
• Click the + icon on the top bar menu and select Create Package.
• The “Create Package” dialog will appear.
• Enter the package name as “Property Management.”
• Click on the version, set it to 1.0, enter “Initial Release” in the comments, and then click the Done button.
• Enter your name or nickname in the developer information section.
• Click the Done button.
  • A folder named “Property Management” will be added under the Package Development folder.

Suppliment: Packages

In programming languages, a “package” is a way to organize and distribute code so that it can be easily reused, shared, and maintained. Packages typically bundle related code files, such as libraries, modules, classes, and functions, into a single unit that can be easily imported into a development project.

Here are some key aspects of packages:

• Code Reusability
  • Packages allow developers to write code once and reuse it across multiple projects. This promotes efficiency and consistency.
• Dependency Management
  • Packages often include metadata that specifies other packages or libraries they depend on. When you install a package, the package manager automatically handles these dependencies.
• Version Control
  • Packages typically have version numbers, allowing developers to specify which version of a package they want to use. This helps maintain compatibility and avoid issues when packages are updated.

For example, in Python, you use a tool called “pip” to install and manage the necessary packages.

3 Creating Forms

In GEMBA Note, content refers to items, tables, shapes, photos, videos, etc. Specifically, standardized documents used for entering or printing information necessary for business or transactions, such as ledgers, forms, and application forms, are called “forms.” In GEMBA Note, these forms are realized by arranging “form components” on the pages of a note.

In this chapter, you will learn how to place form components and create standardized, reusable forms.

3.1 Form Components

Open the note, click the ＋ icon in the navigation menu, then select Add Form Component. Available form components will appear in the toolbox. Click on the desired component and paste it into the current note.

For details about each component, refer to the ‘Form Creation Manual’ in the ‘References’.

3.2 Place Form Components

Click the desired form component from the toolbox and paste it onto the currently open page.

Manually, the positions of the components may vary horizontally and vertically. To align the components, select them with the Lasso tool, then from the context menu, choose Alignment and then Align Left and Distribute Vertically. This will align the left positions of the components and arrange them at equal vertical intervals.

3.3 Setting Up Form Components

When form components are placed, they are initially set with default settings. To change the behavior of a component, long-press/right-click the target component, click Form in the context menu, and select (Target Component Name) Settings. The example below shows settings for a single-line text field.

In the toolbox on the right side of the screen, the attribute information for the selected component will appear. Modify these attributes according to your purpose and requirements.

3.4 Register a Shared List

Among the form components, single-line text fields and numeric fields can have an option to select items from a drop-down menu. Settings for these can be adjusted either through the settings on the toolbox or by registering them for shared use within the development package.

To start registration, long-press/right-click on the development package and select More > Manage Shared Lists. Before completing the registration, enter a “password” to prevent unintended changes by other users.

Exercise 3-1: Register Property Types in the Shared List

Follow these steps to register property types so that they can be used in the menu:

• Using a text editor, enter the following property types (ensure to add a line break after each type name)
  • Apartment
  • Single-family Home
  • Land
  • Office
  • Other
• Save the text file with an appropriate name, such as PropertyTypes.txt.
  • Save the file in UTF-8 format.
• Perform the same steps as in the previous section [1] through [3] to register the shared list.

Exercise 3-2: Create a Property Form

In the “Property Management Package,” create a new note, place the headings and form components as shown in the diagram, configure each component, and complete the property form.

• In the “Property Management Package” folder, click Create Note and select “Plain Horizontal” from the basic templates.
• Name the note “Property Form.”
• Enter the heading “Property Information” and the headings for each item as text. Then, place the form components as shown in the diagram above.
  • Set the shared list registered in the previous section for the “Property Type” single-line text field.
    • Long press/right-click > Settings for Text Input Field to display the settings screen in the toolbox.
    • Switch to List in Input Method, select Use Shared List from the List settingd, specify the registered shared list, and complete the editing.
    • Click the Text Input Field to confirm that the property type menu items appear.
  • Set the “Price” numeric field to use a 3-digit separator.
    • From the numeric field settings, click Display Format, turn on Thousand Separator, and complete the edit.
    • From the same settings screen, select Prefix/Suffix and enter “$” in the Suffix field.
• Set the background color, font, and size of the text in the note according to your personal preferences.

Suppliment: Representing the Property Form as HTML

HTML (Hyper Text Markup Language) is used to create Web pages. The following code shows a Web page that is similar to the Property form.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Property Information Form</title>
    </head>
    <body>
        <h1>Property Information</h1>
        <form method="post" action="something">
            <table>
                <tr>
                    <th>Name</th>
                    <td><input type="text" name="name" placeholder="Enter the property name"></td>
                </tr>
                <tr>
                    <th>Property Type</th>
                    <td><input type="text" name="type" placeholder="Enter the property type"></td>
                    <!-- Text input sample rather than selecting an item from a menu -->
                </tr>
                <tr>
                <th>Price</th>
                    <td><input type="number" name="price" placeholder="Enter the price"></td>
                </tr>
                <tr>
                <th>Address</th>
                    <td><textarea name="address" rows=5></textarea></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Generally an action is triggered from a button within the ‘form’ element with input parameters. For example, the button action can send a mail or save input values in a database.

To collect input values for the button action, the ‘name’ attribute and the ‘id’ attribute are referred to. These attributes are correspoinding to ‘tag properties’ of a ‘tag scheme’, which is described in the next chapter.

4 Defining Schema

A schema refers to a description used to define the structure of information. In GEMBA Note, a “tag schema” is prepared to define the structure of pages, shapes, and form components placed on them. By defining the structure, it is possible to perform information retrieval, aggregation, and processing (calculation).

In this chapter, the form created in the previous chapter will be given a data structure, preparing it for aggregation searches in the next chapter.

4.1 Create a Tag Schema

On the target development package, long press/right-click and select More > Tag Schema List from the context menu to start creating a tag schema. When a note is open, you can also create and edit tag schemas from the navigation menu by selecting > Edit Tag Schema.

4.2 Add Tag Properties

Add tag properties, which are components of a tag schema. Repeat steps 1 to 3 for each property.

A gear-shaped icon is provided in the section where the Tag ID and Property ID are specified. By clicking here, you can specify display strings in Japanese or English, which will be used as headings when displaying aggregation search results in a table.

Exercise 4-1: Create a Property Tag Schema

Define property information using the tag schema editing function.

Defining a Tag Schema：

Definition of Tag Properties：

4.3 Set the Tag Schema for the Content

Set which tag schema the content is related to.
The target for setting can be the page where the note exists, strings on the form, shapes, form components, or any other components that make up the content. However, when displaying aggregation search results in a “box,” this setting will be reflected in the list display.

Here is an example of associating with a page.

1. Long press or right-click the target page from the page list.
2. Select Page Attribute from the context menu.
3. Click Tag Settings in the “Tag Settings” dialog.
4. Select the tag schema to associate.
5. Click the Done button to finish.

4.4 Link Form Components to Tag Properties

Set which tag properties the form components are related to.

1. Long press or right-click the form component on the target form.
2. Select Form > Link to Tag from the context menu.
3. Select the tag property (in English) to associate in the “Link Settings” dialog.
4. Repeat the same steps for all form components on the form.

Exercise 4-2: Link Form Components to Tag Properties in the Property Form

Using the link function to tag properties, associate each property form component with the respective property tag property.

Form Components and Tag Property IDs to Link：

Exercise 4-3: Prepare Property Data

To check the operation of the aggregate search function in the next chapter, prepare data for testing by filling in the values on the property form that is associated with the tag schema and its tag properties.

1. Save the completed property form note.
   • To be used later for paper registration.
   • Set an appropriate name for the note.
2. Copy the note and create a new note.
   • Create it in the development package.
3. Open the duplicated note, copy the property form page, and create 2 to 4 pages.
4. Fill out each form with fictitious property information.
   • Prepare the forms with different property types.

Suppliment: Creating the Property Table in SQLite

The article shows how the similar Property schema is defined in SQLite. SQLite is an open-source software and lightweight database management system. It is often embedded in applications rather than used as a server. The SQL syntax defined for the aggregation search to be described in the next chapter comes from those of SQLite.

First download the command-line tools of SQLite from the official site:

[SQLite Official Site] https://www.sqlite.org/download.html

• Download a target compressed file according to your using OS
  • For the Windows OS, download sqlite-tools-win-x64-***.zip from ‘Precompiled Binaries for Windows’
• Upzip the downloaded file and place the files in an appropriate folder (such as the sqlite folder underneath the C drive)
  • The files are as follows:
    • sqlite3.exe：　SQLite command-line tool
    • sqldiff.exe：　Tool to compare two different databases
    • sqlite3_analyzer.exe：　Tool to analyze databases
• Open a command prompt of the Windows OS on the folder above
• Create a database using sqlite3 as follows:

> sqlite3 property_management.db

• Creating the Property table

sqlite> create table property(name text, type text, price integer, address text);

• Inserting data to the Property table

sqlite> insert into property values('Green Valley Apartments', 'Apartment', 1200, '5678 Oak Avenue, Apt 3B, Los Angeles, CA 90001');
sqlite> insert into property values('Downtown Office Space', 'Office', 2500, '321 Business Ln, San Francisco, CA 94101');

• Retrieving property data

sqlite> select * from property;

• Getting out of the sqlite3 command-line

sqlite> .exit

5 Defining Search Conditions

Just as data stored in a relational database can be searched using the SQL language, the same can be done in GEMBA Note.

In GEMBA Note, form input data linked to a tag schema can be manipulated as a Tag Database (Tag DB). This is called the “Aggregation” feature. The aggregation search system provides a mechanism to extract and display data that matches the search conditions from the data collected by various DB connectors.

5.1 Create a Search Condition

There are two entry points for creating search conditions.

• In the context menu of the package development folder > More > Filter Search Condition List
  • ‘Aggregation’ is sometimes called ‘Filter’
• (With the notebook open) Toolbox > > Aggregation Search Condition List

The following diagram shows the process of creating search conditions.

1. Click the item to add search conditions.
2. Decide on the table name. The name specified here will be used within the SQL statement.
3. Select the connector type (described later).
4. Select which tag schema to search.
5. If the connector type is LocalTagDB, specify the path of the folder to search.
6. Select the folder.
7. Select the target folder.
8. Click the Done button on the “Add Connector” dialog.
9. Click SQL on the “Set Search Settings” dialog.
10. Write the SQL statement.
11. Click the Done button on the “SQL Settings” dialog to finish editing the SQL statement.
12. Click the Done button on the “Set Search Settings” dialog to finish editing the search conditions.

5.2 Configuration of the Search Condition

Search conditions are defined by setting the configuration ID, result tag schema, search parameters, connectors, and SQL. The actual entity is an XML file, and you can view its contents by exporting it.

5.3 Components of the Search Condition

The breakdown of the elements that make up the search condition is as follows.

5.4 Connector Types

There are different types of connectors provided by GEMBA Note, depending on the search methods for tag schemas.

5.5 SQL Statements

• The SQL syntax follows ‘SQLite’ standards. For detailed specifications, please refer to https://www.sqlite.org/lang_select.html.
• If the following columns (tag properties) are included as result columns in the SELECT statement, the connector types NoteTagDB and LocalTagDB will allow thumbnail display and jumping to the corresponding page as a result.
  • _driveId ,_documentId , _roomId, objectType ,_objectId ,_ownerId ,_pageId ,_layerType ,_layerId ,_x ,_y ,_width ,_height
  • Write an asterisk (*) as a column in a SELECT statement to get all available columns
• When using column names that contain non-alphanumeric characters or spaces, be sure to specify a column alias using AS, as shown below.
  • SELECT “完了” AS completion, “期限” AS deadline, …

5.6 Specify Folders

If the connector type is LocalTagDB or ServerTagDB, specify folders to be searched.

Exercise 5: Create the Property Search Condition

Create a condition to search for the property tag schema (ID: Property). The settings for the condition are as follows.

The WHERE clause means that property data without a property name will not be searched.

Suppliment: Basic SQL Commands

SQL (Structured Query Language) is the standard language for interacting with databases. A database contains multiple tables. A table is a collection of data organized into rows and columns. Each row represents a record, and each column represents a data field.

Here are the basic SQL commands:

SELECT: Retrieve data

SELECT name, age FROM users;
-- Get values of the name field and the age field

WHERE: Specifies conditions to filter the data

SELECT * FROM users WHERE age > 20;
-- Get records in the users table where the age value is greater than 20

ORDER BY: Sorts the data by a specific column

SELECT * FROM users ORDER BY age DESC;
-- Get records from the users table in descending order of age value

JOIN: Combines data from multiple tables based on a related column between them

SELECT users.name, orders.order_id 
FROM users 
JOIN orders ON users.user_id = orders.user_id;
-- Get the values ​​of the name and order_id columns of the records in the users and orders tables that have matching user_id values

GROUP BY and Aggregate Functions

SELECT department, COUNT(*) 
FROM employees 
GROUP BY department;
-- Get the count for each value of department in the employees table

6 Executing Search Conditions

This chapter explains how to execute the aggregation search conditions defined in the previous chapter. Additionally, it provides an explanation on how to change the values of the tag schema using button actions.

6.1 Execute an Aggregation

To execute the aggregation search condition created in the previous chapter, first open the note on the development package, then click + > Aggregation on that page to start.

1. Click Filter from the + menu
2. Select Add Result As Spreadsheet
3. Click Search Condition
4. Select a search condition to execute
5. Click the Done button.

The search results will be added to the note in a tabular format. The table headers will be the columns (tag properties) specified in the SQL statement from the result tag schema defined when setting up the aggregation search conditions.

6.2 Update the Aggregated Results

On the note where the aggregation search condition was executed, you can update it to the latest content by using a button of the form components.
Long press/right-click on the placed button to start the configuration.

1. Select Form > Command Button Settings from the context menu.
2. Click Command to Run on the toolbox. From the menu, select Update Filter.
3. In the ‘Update Filter’ dialog, ensure that the action is set to Update.
4. Click the Done button.

By default, the label of the button component changes to “UPDATE”. Change the label name as you wish.

Exercise 6-1 Execute the Property Search Condition

1. Create a new note on the development package. The page format should be horizontal and plain.
2. Add a tabular aggregation to the created page and execute the search condition defined in the previous chapter as propertyList.
3. Place a button from the form components at the top right of the table and set the command to be executed as ‘Update Filter’.
4. Close the current page, then try adding and deleting property data. Click the update button and confirm that the changes are reflected in the search results.

If you right-click on a row for a property, a context menu will appear. By selecting Move to Original Data from the menu, you can jump to the corresponding form and view or edit the content.

6.3 Use Search Parameters

When executing a search and using the value of a form component as a search condition, use ‘search parameters’.

The procedure is described here using an example of a condition that narrows down the search results from the value of a form component that allows you to select a property type.

Create a Tag Schema for Search Parameters

Create a tag schema linked to the form component for property type.

Definition of Tag Schema：

Definition of Tag Properties：

Prepare the Form Component for the Property Type

• Create a new page (horizontal and plain) and place a heading ‘Property Type’ with a single-line text field next to it.
• Use the shared list PropertyTypes for the settings of the single-line text field list.
• “Link this single-line text field to the tag property ‘propertyType’ of the tag schema PropertySearch.”

Update the Search Condition

• Duplicate the property search condition propertyList and name it propertyListWithType.
  • Right-click on the target in the aggregation list to reveal the duplicate command.
• In the search condition settings dialog, click the ‘Add’ button for ‘Search Parameters’ and add TYPE (String type, initial value: Apartment).
• Select SQL and add a condition to the WHERE clause.

Edit the Update Button

• Edit the Update button and select Change Settings.
• When Update Parameters is turned on, a list of search conditions will appear.
• Select the duplicated search condition propertyListWithType.
• Set the Tags to Linked to Search Parameters to the tag property PropertyType of the tag schema PropertySearch.

Exercise 6-2 Execute Property Search Condition by Specifying Type

Referencing the aforementioned ‘Use Search Parameters,’ place a single-line text field to specify the property type. Define the search conditions so that when you click the Update button, the property list switches to show properties by type.

6.4 Reflect Aggregation Results in Tags

This command is used to reflect the execution results of the aggregation into the tag property values of the specified tag schema through a button component. It is a convenient command for transferring or processing data.

Exercise 6-3 Find the Lowest-Priced Property

To reuse the property form, place a “Min Price” button, and when the button is clicked, the name, type, price, and address of the relevant property are reflected in the input components on the form. Define the aggregation search conditions.

The settings for the conditions are as follows:

The SQL statement retrieves property data where the property name is set, the price is greater than 0 $, and the first property when sorted in ascending order of price.

6.5 Roles of Result Tag Schema

In the previous exercise, after extracting the lowest-priced property and saving the note, when executing the propertyList defined in Chapter 5, the same lowest-priced property appears twice. This occurs because the “Result Tag Schema” of propertyMinPrice is the same as the “Search Tag Schema.”

To resolve this, the following modifications are required:

• Create a tag schema for output (e.g., PropertyOutput) that is different from ‘Property’ and use it to store the results.
• Replace the tag schema settings of the property form used for the lowest price search with the output tag schema.
• Update the links to each input component as well.
• Reconfigure the result tag schema of propertyMinPrice to the output tag schema.

Result tag schemas can be applied for to interpret output data. They are used to show a different set of property values, to change the order of displaying values, and to show calculation results.

Suppliment: Cascading Menu

A single-line text field or a numeric field allows you to select an item using a drop-down menu. If the candidates of selection are static, you can set them in the settings or a shared list in a development package.

However, if the candidates are changed dynamically, the aggregation feature will be applied to. In this case, the target tag scheme to be used is either StringValue or NumberValue. Both are embedded in the GEMBA Note product.

For example, the settings to allow you to select a property name from all existing properties are as follows:

Put a single-line text field on a page and open the settings, choose List Settings > Filter (aggregation) to specify the search condition above.

7 Customizing UI

The user interface of the GEMBA Note product itself can be customized by preparing an XML definition file and importing it into a note or note template.

7.1 Customizable Areas

In the default settings of the GEMBA Note editing screen, all available menus and commands are displayed. For certain content, many commands and menus may be unnecessary for the user. Therefore, the “UI definition file” allows only the necessary menus and commands to be displayed during editing.

To define the UI, names for the UI and IDs used in the XML file are assigned for each area of the editing screen. The following figure illustrates this.

7.2 Structure of the UI Definition File

To customize the UI of GEMBA Note, prepare a file in XML format. The main structure is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<uicustomsetting xmlns="http://xmlns.metamoji.com/noteanytime/uicustomsetting/1.0" version="1" name="Check for updates by looking at these attribute values.">
    <custom key="Key value that distinguishes the custom element">
        <name string="Input UI"/>
        <navibarleft>
            <!-- Define the left-side menu items -->
        </navibarleft>
        <navibarmode>
            <!-- Define the items to be placed in the center  -->
        </navibarmode>
        <navibarright>
            <!-- Define the right-side menu items -->
        </navibarright>
        <pagetab>
            <!-- Define the page tab items -->
        </pagetab>
        <menuset>
            <!-- Define the menus and their items -->
        </menuset>
    </custom>
</uicustomsetting>

7.3 Import the UI Definition File

The UI definition file is customized by importing it into a note template or note.

[In the case of a note template]

• Long-press or right-click the target note template, and select Create Note Template from the context menu.
• After that, follow the steps 1 to 4 in the diagram below to load the file.

[In the case of a note]

• Click on in the navigation menu of the open note.
• Select Note Settings > Custom Settings
• After that, follow the steps 2 to 4 in the diagram below to load the file.

If there are multiple custom elements in the UI definition file, check which one to use.

7.4 Register a Form

Content such as forms you have created can be registered as templates so they can be quickly reused from the menu.

1. Long press / right-click on the target page
2. Select Register/Create > Register Paper Template from the context menu
3. Enter an appropriate template name
4. Click the Done button

Exercise 7-1 Customize the UI

Using a sample UI definition file, you can customize the UI.

1. Download simple_ui.xml, one of reference materials.
2. Open the note that contains the property data.
3. Click on in the navigation menu of the open note.
4. Select Note Settings > Custom Settings and import simple_ui.xml.
5. Ensure that the menu structure has changed.

Exercise 7-2 Register the Property Form as a Template

Register the property form as a paper template using the following steps.

1. Open the note that contains the property form.
2. Open the page list.
3. Long press / right-click on the page with the property form, and start registration from the context menu by selecting Register/Create > Register Paper Template.
4. When creating a new note, ensure that the registered form is included in Paper Template > Shared Templates.

Exercise 7-3 Import Data from a CSV File

You can import data from a CSV file using a regisrated template. Try to import property data as follows:

1. Download propertyList.csv, one of reference materials.
2. In the “Property Management Package” folder, click Create Note and select an appropriate note from the basic templates.
3. While editing the note, 、click the ＋ icon in the navigation menu, then select Add Page > Add from CSV.
4. You will be asked to choose the target CSV file to be imported. Choose propertyList.csv.
5. On the ’Page Generation Settings” dialog, click Paper Template and select the paper template registered in the previous exercise.
6. Click the Done button to start importing data from the CSV file. Confirm that new pages with values from the CSV file are added.

Suppliment: Using Visual Studio Code

UI definition files, exported tag schema files, and aggregation search condition files are in XML format. Editing these files with a simple text editor like Notepad could potentially corrupt them, so a more advanced text editing tool is needed.

Visual Studio Code (VS Code) is a versatile source code editor provided by Microsoft. VS Code has the following features:

• Open-source and available for free to everyone.
• Can be used across a wide range of operating systems, including Windows, Mac, and Linux.
• It offers code auto-completion, enabling efficient editing.
• Its functionality can be customized through a system of “Extensions.”

Although it’s not mandatory to install VS Code, as it’s just one of many editors available for editing program code or text, it integrates well with Git, which you’ll likely use later for source file management. For this reason, We recommend using this editor.

Install the software according to your environment from the following URL.

8 Deploying Applications

This chapter explains the process and operations for making the GEMBA Note development packages available to other users.

8.1 Publish a Development Package

To publish a developed package to other users, the entire company, or specific teams, follow these steps:

• Backup (for developers)
  • Users with developer permissions can create a copy of the development package as a backup for emergencies.
  • The created backup file can also be restored by other developers.
• Release (for developers)
  • Users with developer permissions can release content related to the package from the development package.
• Deployment (for package administrators)
  • Users with package administrator permissions deploy the package files released by the developers to the entire company.
  • If the developer is also the package administrator, they can deploy the package directly from the development package to the entire company.

8.2 Backup a Development Package

In general, a backup refers to creating a copy of data and storing it on a separate medium to enable recovery in case of equipment failure, data corruption, or loss. Similarly, in GEMBA Note, it is recommended to regularly back up development packages or before starting a new development phase to be prepared for any unexpected situations.

When creating a backup, long press or right-click on the target package development folder.

• From the context menu, select Others > Backup.
• A dialog box confirming the backup will appear. Select Yes.
• You will be prompted to choose where to save the file. Specify the location and save it.

The saved file will be named ____backup.gncproj.

When restoring, select the “Development Package Folder,” then choose the backup file to import from the navigation menu by selecting ＋ > Import File > Backup Format.

8.3 Send a Development Package

Developers can send the package from the package development folder. Create a package file that consolidates the settings, including templates, tag schemas, and aggregation search conditions.

Long press or right-click on the target package development folder.

1. From the context menu, select Send.
2. On the Send dialog, click the Execute button.
3. You will be prompted to choose where to save the file. Specify the location and save it.

The saved file will be named ____package.gncproj.

8.4 Publish the Development Package

The package manager can publish the development package, created by the developers, so that it is available for all users. First, click on in the navigation menu, then select Manage Packages from the menu.

1. Click on Import.
2. Select the target package file to import.
3. Click the Open button.
4. Review the contents of the development package, then click the Import button.
   1. You will be asked to publish the package.
   2. You need to wait for a while.
5. Without checking the imported package, it will not be deployed company-wide.
6. Check the imported package.
7. Set on the Use button and close the dialogs. All users can utilize the package.

8.5 Publish to a Specific Team

If the package is not deployed company-wide, it can be published to specific teams. To do this, long press or right-click on the target team folder, and select More from the context menu to begin.

1. From the operations menu, choose Select Package.
2. Check the package you want to publish.
3. Set on the Use toggle button.
4. Click the Back button.
5. Click the Done button.

Exercise 8-1: Back Up the Property Management Package

1. To review the contents of the Property Management package, long press or right-click on the package folder.
2. From the context menu, select More and verify that the following items are included:
   • Tag Schema List
   • Filter Search Condition List
   • Template List
   • Manage Shared Lists
3. Create a backup file.

Exercise 8-2: Deploy the Property Management Package

Deploy the Property Management Package using the following steps:

1. Create a package file from the Property Management package.
2. Import the created package file (without deploying it company-wide).
3. Create an appropriate team folder.
4. Ensure that the paper included in the package is not yet available
5. On the created team folder, select the deployed package.
6. Verify that the contents included in the package are available.

Suppliment: What is Deployment?

An English word “deploy” has meanings such as “to move”, “to spread out” or “to position.” Regarding software system development, “deployment” refers to making a developed application available by positioning it on a server.

For example, in the case of a web application, the application is made available to users by uploading the executable files to a web server or application server and then starting those files so that the application runs on the server. This entire process is known as deployment.

To perform deployment, preparation is necessary. As part of this preparation, converting source programs into executable files is called “building,” and the process of making the runtime environment, including the executable files, publicly available is called “releasing.”

Updated History