dandelionS Blog

I’m oz, and I’ll be covering this study session article. This time, we held our study session “Low-Code Development Experience with OutSystems Part 3,” so let me share how it went!

Check out the previous study session here!

Continuing from last time, this study session also aims to “deepen understanding of low-code development and OutSystems by experiencing development with OutSystems.” With many members joining for the first time this session, it became an even more lively study session.

The study session will proceed as follows:

① Development Experience with OutSystems
② Summary and Q&A

Development Experience with OutSystems

While delivering a PowerPoint presentation, we simultaneously progressed with actual development using the OutSystems environment. The main activities conducted this time were as follows:
Data Import and Export
・Let’s create an Entity (table)
・Let’s create master screens (list/detail) from an Entity: Scaffolding
・Let’s read and write Entity data from the created screens

Let’s create an entity (table)

First, add a table to store the data handled by the app.
Next, give the table a name that reflects its purpose so you can understand what kind of information it manages.
After creating the table, proceed to add columns. Assign each column a name corresponding to the actual item you wish to store, and simultaneously determine the data type based on the type of data to be stored, such as string, number, or date.

Let’s create master screens (list and detail) from an Entity: Scaffolding

Typically, when creating a master screen, you need to design and implement the list screen and detail screen from scratch. However, OutSystems offers a convenient mechanism that automatically generates a master screen to a certain extent simply by preparing a table.
This automatic generation feature is called Scaffolding. Using Scaffolding creates basic master screens such as list displays, registration, updates, and deletions as templates, greatly reducing development effort.

Let’s try reading and writing Entity data from the screen we created.

The master screen created with Scaffolding allows basic operations as-is, but adding further functionality makes it more practical. This time, we will enable direct data entry from the web screen, bulk data import using Excel files, and conversely, the ability to export data as Excel files.
From the web interface, you can register or update data one record at a time by setting values in the input fields on the screen and saving them. Additionally, by adding the Excel import feature, you can register or update multiple records at once simply by uploading an Excel file.
Furthermore, enabling the output of registered data as Excel files simplifies data verification and integration with other systems. By combining screen input, Excel import, and Excel export, the master screen is designed to be user-friendly for daily operations.

Summary

This study session covered even more practical content than the last one, and I believe it successfully conveyed the benefits of low-code development and OutSystems.
As development progressed, when questions or difficulties arose, nearby members actively exchanged ideas, discussing questions and issues together.
As a result, I feel that my understanding has deepened even further.

We plan to continue hosting study sessions focused on OutSystems development!
Stay tuned for our next article.

今回の勉強会記事を担当します、ozです。 今回は社内勉強会「OutSystemsを用いたローコード開発体験 Part3」が開催されましたので、その様子をご紹介します！

前回の勉強会の様子はこちら！

前回に引き続き、今回の勉強会も「OutSystemsでの開発を体験することで、ローコード開発やOutSystemsへの理解をより深めていくこと」を目的としています。 今回からの参加となるメンバーも多数おり、さらに活気ある勉強会となりました。

勉強会の流れは以下のとおりです。

① OutSystemsでの開発体験
② まとめ・質疑応答

OutSystemsでの開発体験

パワーポイントでの発表を行いながら、 一緒にOutSystemsの環境を用いて実際に開発を進めました。 今回実施した内容は、主に以下のとおりです。
データのインポート・エクスポート
・Entity（テーブル）を作ってみよう
・Entityからマスタ画面（一覧・詳細）を作ってみよう：Scaffolding
・作った画面からEntityデータを読み書きしてみよう

Entity（テーブル）を作ってみよう

まずは、アプリで扱うデータを保存するためのテーブルを追加します。
次に、そのテーブルがどのような情報を管理するものか分かるよう、用途に合わせた名前を付けます。
テーブルを作成したら、続いて列を追加していきます。 各列には、実際に保存したい項目に対応する名前を設定し、あわせて文字列・数値・日付など、格納するデータの種類に応じたデータ型を決めます。

Entityからマスタ画面（一覧・詳細）を作ってみよう：Scaffolding

通常、マスタ画面を作成する場合は、一覧画面や詳細画面を1から設計・実装する必要があります。 しかし、OutSystemsではテーブルを用意するだけで、マスタ画面を自動である程度作成してくれる便利な仕組みがあります。
この自動生成機能は Scaffolding（スキャフォールディング） と呼ばれています。 Scaffoldingを使うことで、一覧表示や登録・更新・削除といった基本的なマスタ画面がテンプレートとして作成されるため、開発の手間を大きく減らすことができます。

作った画面からEntityデータを読み書きしてみよう

Scaffoldingで作成したマスタ画面は、そのままでも基本的な操作が可能ですが、さらに機能を追加することで、より実用的になります。 今回は、Web画面から直接データを入力したり、Excelファイルを使ってデータを一括で取り込んだり、逆にExcelとして出力できるようにしていきます。
Web画面からの入力では、画面上の入力欄に値を設定して保存することで、1件ずつデータを登録・更新できます。 また、Excelの取り込み機能を追加すると、Excelファイルをアップロードするだけで、複数件のデータをまとめて登録・更新できるようになります。
さらに、登録されているデータをExcelファイルとして出力できるようにすることで、データの確認や他システムとの連携も簡単になります。 このように、画面入力・Excel取り込み・Excel出力を組み合わせることで、マスタ画面は日常業務で使いやすい形に仕上がっていきます。

まとめ

今回の勉強会では、前回よりもさらに実践的な内容を取り上げ、ローコード開発やOutSystemsの良さを伝えられた回になったと思います。
開発を進める中で分からないことや、うまくいかない点が出てきた際には、近くのメンバー同士で相談しながら、質問や問題点について活発な意見交換が行われていました。
その結果、理解もより一層深まったのではないかと感じています。

今後もOutSystemsの開発をテーマとした勉強会を開催予定です！
次回の記事もお楽しみに。

In this engineer blog, I’ll introduce what I’ve been learning recently. This time, I’ll explain automatic column generation in OutSystems Data Grid.

• OutSystems Data Grid is a spreadsheet-like grid that can be displayed and interacted with within an OutSystems application.
• This article assumes prior knowledge of OutSystems Data Grid.

Problem Statement

For example, let’s say we have a grid like the one below.

The usual way to create it would be as follows.

1. Set the data to be displayed into a Structure that matches the grid layout, convert it into a list, transform it into JSON using ArrangeData, and set the resulting JSON as the grid’s data.
2. Place a column widget on the grid for each column to be displayed, and configure each header, column width, display conditions, and so on.

For a grid with six columns like the one above, it’s not too difficult. However, if the number of columns to display is variable, creating it becomes more challenging.

You need to determine the maximum number of columns to display, then prepare the Structure from step 1 and the column widgets from step 2 to match that maximum number. Additionally, you must control the visibility of each column based on how many you actually want to display. As a result, all the columns up to the maximum exist, but only the desired number of columns are visible.

Especially for step 2, if the grid’s configuration is even slightly complex—such as having merged headers with dynamic labels—the amount of work required increases significantly.

If the maximum number is around 100, it might take some time, but it’s still manageable. However, I once faced a case where the maximum number reached nearly 1,500. At that time, I looked into whether it was possible to generate the grid columns using JavaScript.

As a result of the automatic generation, step 1 of the usual method still needs to be done as is, but step 2 becomes much simpler.

Prerequisites

In a grid like the one below, the columns outlined in red are the target for automatic generation. (The left three columns are placed as usual. The auto-generated columns are on the right.)

The cells in the auto-generated columns will be set to read-only. The column order in the grid will be fixed and cannot be changed.

The data to be displayed in the grid has already been retrieved and is set to the grid as described in step ① above.

The header labels (such as ‘グループ1’, ‘データX’, ‘名名名’, etc.) are dynamic and have already been retrieved in a format that can be passed into JavaScript. (In the sample JavaScript code, these input parts will be shown in bold.)

In the implementation JavaScript, we use a variable called dataGrid. You can obtain dataGrid as shown below. (Let gridId be the ID of the configured grid.)

var dataGrid = OutSystems.GridAPI.GridManager.GetGridById('gridId').provider;

Preliminary Research

From the link below, I found that it’s possible to push columns into dataGrid.columns.

https://www.outsystems.com/forums/discussion/80001/outsystems-data-grid-is-is-possible-to-add-columns-dynamically-on-datagrid/

Upon further investigation of dataGrid, I found that in addition to columns, there is also columnGroups. I thought that by pushing to columnGroups, it might be possible to create grouped, merged header columns.

Implementation Flow

In the ‘On After Fetch’ action after retrieving the data, implement it as follows.

The first column of ‘グループ1’

// Create the element to push
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'グループ1', align: 'left', columns: [
		{header: 'データX', align: 'left', columns: [
			{header: '名', binding: 'Data1', width: 100, align: 'left', isReadOnly: true}
		]}
	]}
)

// Push newColGroup into columnGroups
dataGrid.columnGroups.push(newColGroup);

The second column of ‘グループ1’

// Create the element to push
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'データ1', align: 'left', columns: [
		{header: '名名', binding: 'Data2', width: 100, align: 'left', isReadOnly: true}
	]}
)

// Push newColGroup into the columns of the target columnGroup
// columnGroups[3] refers to the created "Group 1", which is at index 3 in columnGroups
dataGrid.columnGroups[3].columns.push(newColGroup);

the ‘グループ2’ column

// Create the element to push
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'グループ2', align: 'left', columns: [
		{header: 'データV', align: 'left', columns: [
			{header: '名名名', binding: 'Data3', width: 100, align: 'left', isReadOnly: true}
		]}
	]}
)

// Push newColGroup to columnGroups
dataGrid.columnGroups.push(newColGroup);

As shown above, grouped columns with merged headers are created one by one.
By adjusting the structure of newColGroup and the target of the push accordingly, it should be possible to create column groups with different structures.

additional support

When automatically generating columns, the following two points must be taken into consideration.

• The variable dataGrid represents the grid obtained as a JavaScript object. At the time the ‘On After Fetch’ action is executed after data retrieval, the grid must already exist. One way to handle this is to set the data retrieval action’s timing to ‘Only on Demand’ and execute it in the ‘OnReady’ action.

• If the grid contains columns with editable cells, a post-edit check is performed on the entire row to determine whether any cells were edited. However, if this check tries to access the automatically generated columns, it will result in an error. (In the grid used as an example in this article, the ‘Settings’ column is editable.)

To handle this, adjust the edit check in the grid’s ‘OnInitialize’ action using JavaScript as shown below.

// Regular cell edit check
var originalCheck = OutSystems.GridAPI.GridManager.GetGridById('gridId').features.dirtyMark._isDirtyCell;

// Adjust the check
// Immediately treat cells in auto-generated columns as unedited
// Since columns with index 3 and above are auto-generated, control with "columnIndex > 2"
var newCheck = function (rowIndex, columnIndex) {
	if (columnIndex > 2) {
		return false;
	} else {
		var checkResult = originalCheck.call(this, rowIndex, columnIndex);
		return checkResult;
	}
}

// Apply the adjusted check to the grid
OutSystems.GridAPI.GridManager.GetGridById('gridId').features.dirtyMark._isDirtyCell = newCheck;

Stay tuned for the next developer blog.

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。今回は、OutSystems Data Gridにおける列自動生成について説明します。

• OutSystems Data Gridは、OutSystemsのプログラムの中で表示・操作できる、Excelのようなグリッドになります。
• 本記事は、OutSystems Data Gridについての知識を前提とします。

問題設定

例えば、以下のようなグリッドがあるとします。

通常の作成方法は、以下になると思います。

1. 表示するデータを、グリッドの構造に合わせたStructureに設定して、リスト化して、ArrangeDataでJSONの変換して、結果のJSONをグリッドのデータとして設定する
2. グリッドに、表示する列の件数分、列ウィジェットを配置して、それぞれのヘッダ、列幅、表示条件などを設定する

上記のような、列が6件のグリッドの場合、さほど難しくないと思いますが、表示したい列の数が可変の場合、作成が難しくなります。

表示できる最大数を決定して、「1.」のStructureの項目数と、「2.」の列ウィジェットは、それぞれ、その最大数の件数分を用意しなければなりません。そして、各列の表示条件を、表示したい個数に合わせて制御しなければなりません。結果として、最大数の件数分の列が存在しているが、表示した件数分のみが見えています。

特に「2.」については、グリッドの仕様が少しでも複雑（重複ヘッダで、その文言が動的など）でしたら、必要な作業量が著しく増えていきます。

決定した最大数が、例えば100件ぐらいでしたら、多少時間がかかりますが、できなくはない程度になると思いますが、以前、最大数が1500件近くになる場合に直面したことがあります。その際に、グリッドの列をJavaScriptで生成できないか、調べてみました。

自動生成の結果、上記の通常の作成方法の「1.」は、そのまま実施しなければなりませんが、「2.」の方が、簡単になります。

前提

以下のようなグリッドでは、赤枠の列を自動生成の対象します。（左3列は、通常通り配置した列となります。自動生成の列は、右となります。）

自動生成の列のセルを編集不可とします。グリッドの列順を変更不可とします。

グリッドで表示するデータは、取得済みで、上記の①のようにグリッドに設定します。

ヘッダの文言（「グループ1」、「データX」、「名名名」など）を可変として、取得済みで、JavaScriptにインプットできる形で持っています。（実装例のJavaScriptコードの中で、このようなインプット部分を太文字にします。）

実装のJavaScriptで、dataGridという変数を使います。dataGridは、以下のように取得できます。（gridIdは、設定したグリッドのIdとします。）

var dataGrid = OutSystems.GridAPI.GridManager.GetGridById('gridId').provider;

事前調査

以下のリンクで、dataGridのcolumnsに列をpushできることが分かりました。

https://www.outsystems.com/forums/discussion/80001/outsystems-data-grid-is-is-possible-to-add-columns-dynamically-on-datagrid/

dataGridを細かく調査すれば、columnsの他に、columnGroupsもあると分かって、columnGroupsに対するpushで、グループ化された重複ヘッダの列群を作成できるのではないかと考えました。

実装の流れ

データ取得後のOn After Fetchアクションで、以下のように実装していきます。

「グループ1」の最初の列

// pushする要素を作成
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'グループ1', align: 'left', columns: [
		{header: 'データX', align: 'left', columns: [
			{header: '名', binding: 'Data1', width: 100, align: 'left', isReadOnly: true}
		]}
	]}
)

// newColGroupをcolumnGroupsにpush
dataGrid.columnGroups.push(newColGroup);

「グループ1」の二つ目の列

// pushする要素を作成
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'データ1', align: 'left', columns: [
		{header: '名名', binding: 'Data2', width: 100, align: 'left', isReadOnly: true}
	]}
)

// newColGroupを対象のcolumnGroupsのcolumnsにpush
// columnGroups[3]は、作成した「グループ1」はcolumnGroupsの中でインデックス3のため
dataGrid.columnGroups[3].columns.push(newColGroup);

「グループ2」の列

// pushする要素を作成
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'グループ2', align: 'left', columns: [
		{header: 'データV', align: 'left', columns: [
			{header: '名名名', binding: 'Data3', width: 100, align: 'left', isReadOnly: true}
		]}
	]}
)

// newColGroupをcolumnGroupsにpush
dataGrid.columnGroups.push(newColGroup);

上記のように、グループ化された、重複ヘッダの列を1つずつ作成していきます。newColGroupの構造、push先のところを適宜調整すれば、異なる構造の列群を作成できると思われます。

追加対応

列自動生成にあたり、以下の2点を留意しなければなりません。

• 変数dataGridは、グリッドをJavaScriptオブジェクトとして取得したものになります。データ取得後のOn After Fetchアクションが実行される時点で、グリッドが存在しなければなりません。一つの対応方法として、データ取得アクションのタイミングをOnly on Demandに設定して、OnReadyアクションで実行することができます。

• グリッドに、セルが編集可能な列がある場合、セル編集後、行全体に対して実施されるセル編集有無チェックは、自動生成列のセルをチェックしようとしたら、エラーとなります。（本記事で例として使ったグリッドでは、「設定」列が編集可能とします。）

対応するには、グリッドのOnInitializeアクションのJavaScriptで、以下のように編集有無チェックを調整します。

// 通常のセル編集有無チェック
var originalCheck = OutSystems.GridAPI.GridManager.GetGridById('gridId').features.dirtyMark._isDirtyCell;

// チェックを調整
// 自動生成列のセルを、即座に編集なしとする
// 列インデックス3以上は、自動生成の列のため、「columnIndex > 2」で制御
var newCheck = function (rowIndex, columnIndex) {
	if (columnIndex > 2) {
		return false;
	} else {
		var checkResult = originalCheck.call(this, rowIndex, columnIndex);
		return checkResult;
	}
}

// 調整したチェックをグリッドに設定
OutSystems.GridAPI.GridManager.GetGridById('gridId').features.dirtyMark._isDirtyCell = newCheck;

次回の技術者ブログをお楽しみに。

What is Dandelions Café?

At Dandelions, we regularly hold communication events to deepen mutual understanding among team members and build stronger collaboration.
These events and discussions take place in a relaxed, café-like atmosphere that transcends departments and job titles—just like chatting over coffee. That’s why we call this initiative “Dandelions Café.”

This time, the theme was “What Makes a Company One I’d Want to Stay With.”
Teams spent about two hours researching and discussing the topic, followed by presentations from each group.

Ideas born from diverse perspectives

Through the presentations, we got a glimpse into how each member views the company in their daily work and what they truly think.
The opinions stood out in two main categories: an active perspective, focusing on how we can contribute to the company’s growth, and a passive perspective, reflecting what kind of environment we expect from the company to keep working there.

Opinions from an active perspective

• Opinions that reflect an awareness of the types of talent and actions needed for the company’s growth
• such as creating systems—like organizing manuals—that prevent workload from being concentrated on specific employees

These reflected the perspectives of team members who are clearly mindful of the organization’s overall dynamics in their daily work.

Opinions from a passive perspective

• Adequate salaries to keep up with rising living costs
• Enhanced employee benefits such as transportation and housing allowances
• Expansion of remote work options

The desire for a comfortable and secure work environment left a strong impression.

There were also some unique ideas!

• Lavish rewards for perfect attendance each month
• A system that allows employees to bring their pets to work

Some suggestions aimed at making the company atmosphere more enjoyable brought smiles to our faces.

A discussion that led to new insights and learning

Through this theme, we discovered just how much perspectives can differ depending on one’s role and experience—even within the same company.
It felt like a valuable opportunity for both leadership and younger team members to understand each other’s ways of thinking.

Differences in opinions can sometimes appear as gaps, but looking at it another way, they’re simply different expressions of the same desire—to make the company even better.
This discussion offered valuable insights for Dandelions to continue growing and evolving.

At Dandelions, we’ll continue to value open dialogue across all roles and positions, as we work together to create a company that’s not only easier to work in, but also a place where everyone can grow even more.

Stay tuned for our next blog post!

ダンデライオンズカフェとは

ダンデライオンズでは、メンバー同士の相互理解を深め、より良い協力関係を築くことを目的に、コミュニケーションイベントを定期的に開催しています。
イベントやディスカッションは部署・役職の枠を越えて、まるで“カフェで語り合う”ようなカジュアルな雰囲気で行われるため、私たちはこの取り組みを 「ダンデライオンズカフェ」 と呼んでいます。

今回のテーマは 「自分が続けたいと思える会社の特徴」。
チームに分かれて約2時間の調査・ディスカッションを行い、その後、各チームがプレゼンテーションを実施しました。

さまざまな視点から生まれた意見

プレゼンテーションでは、メンバー一人ひとりが普段どのように会社を見ているのか、その思いを知ることができました。
意見は大きく分けると、「会社の成長に向けて自分たちがどう関わるか」を考える 能動的な視点 と、「働き続ける上で会社にどのような環境を期待するか」という 受動的な視点 の二つが印象的でした。

能動的な視点の意見

• 会社が成長していくために、どのような人材や行動が求められるかを意識した意見
• 手順書の整備などにより、特定の社員に負荷が集中しない仕組みづくり

これらは、日頃から組織全体の動きを意識しているメンバーらしい視点でした。

受動的な視点の意見

• 物価高に対応した十分な給与
• 交通費、住宅手当などの福利厚生の充実
• リモートワークの拡充

「働きやすさ」や「安心できる環境」を求める声が印象的でした。

その他、ユニークなアイデアも！

• 毎月皆勤賞に豪華景品を贈呈
• ペットと一緒に出勤できる制度

会社の雰囲気づくりをより楽しくする提案として、思わず笑顔になる意見もありました。

気づきと学びにつながったディスカッション

今回のテーマを通じて、同じ会社にいても、立場や経験によってこんなにも視点が変わるのかという発見がありました。
経営層にとっても若手メンバーにとっても、お互いの考え方を知る貴重な機会になったと感じています。

意見の違いは、ときにギャップとして現れますが、裏を返せば 「会社をもっと良くしたい」という思いが、形を変えて表れている ともいえます。
今回の話し合いは、ダンデライオンズがより成長していくための大きなヒントになりました。

これからもダンデライオンズでは、立場に関係なく意見を交わせる場を大切にしながら、
「もっと働きやすく、もっと成長できる会社」づくりを進めていきます。

次回のブログもどうぞお楽しみに。

As part of our engineer blog, we’d like to share what we’ve been learning day by day.
This time, it’s Team 2, focusing on low-code development.

This Time’s Theme: ‘PDF Output Using Ultimate PDF

This time, we’ll show you how to export screen data within OutSystems as a PDF.

What is Ultimate PDF?

Ultimate PDF is one of the Forge components available in OutSystems. It allows you to export web pages (HTML + CSS) as PDFs.
For example, you can generate PDFs of formatted content like invoices, reports, business cards, and forms.

Installing Ultimate PDF

Launch Service Studio, search for ‘Ultimate PDF’ via Browse Forge, and install it.

Adding References to the Module

Open the module you want to use, go to Manage Dependencies (CTRL+Q), select the necessary elements from Ultimate PDF, and click the Apply button.
(This time, we selected PrintLayout, HideOnPrint, and PrintToPDF_Advanced.)

Descriptions of each element are as follows.

・PrintLayout: A layout template used to optimize screens for printing or PDF output.

・HideOnPrint: A CSS class (style setting) for screen design that, as the name suggests, hides specific elements during printing.

・PrintToPDF_Advanced: An advanced function that allows for more detailed settings when converting HTML screens (web pages) into PDFs.

Creating a Screen for Output

To create a screen for output, follow the same steps as when creating a regular Screen. Place ‘PrintLayout’ on the screen and design the layout you want to export as a PDF.

For any text you don’t want to appear in the PDF output, add ‘HideOnPrint’ to the screen and place the text inside it.

Creating a Server Action for PDF Output

This time, we’ll place an output button on the screen we created earlier and set up a Server Action that triggers a download when the button is pressed.

The properties for each action are as follows
・PrintToPDF_Advanced: Under Action, set the URL of the screen you want to export (in this case, we’re using the current screen’s URL), the PDF page size, and the PDF margins.

・Download: Under Action, set the return value from PrintToPDF_Advanced and the name of the PDF.

Here is the PDF we actually generated.

Important Notes

・Be careful when choosing between Client Action and Server Action. Since PDF generation is generally handled on the server side, calling it from a Client Action by mistake may result in it not working properly.

・Always enclose the FileName in double quotation marks (“”).If not specified like \”Test.pdf\”, it will result in an error

・Screens with a large amount of information are more likely to time out. If there are many tables or images, PDF generation may take longer.

Summary

In this article, we introduced how to generate PDF files from OutSystems using Ultimate PDF.
Since it can also output images and graphs, be sure to try it out in apps that generate reports or forms.
Team 2 will continue to share technical blogs using low-code tools like OutSystems, so stay tuned!

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしているチーム2です。

今回のテーマ：『Ultimate PDFを使ったPDF出力』

今回はOutSystems内にある画面データをPDFとして出力する方法をご紹介します。

Ultimate PDFとは

OutSystemsに搭載されているForgeコンポーネントのひとつで、
Webページ（HTML＋CSS）をPDFとして出力できます。
例えば、請求書・報告書・名刺・帳票などレイアウトされた内容をPDF化できます。

Ultimate PDFのインストール

Service Studioを起動しBrowse Forgeより”Ultimate PDF”で検索してインストールを行います。

モジュールへの参照追加

利用したいモジュールを開き、Manage Dependencies（CTRL+Q）よりUltimate PDFの要素を必要な分選択しApplyボタンをクリックします。
（今回はPrintLayout、HideOnPrint、PrintToPDF_Advancedを選択しました）

各要素の説明は以下の通りです。

・PrintLayout …”画面を印刷やPDF出力に最適化するためのレイアウトテンプレート” です。

・HideOnPrint …画面デザインで使えるCSSクラス（スタイル指定）のひとつで、その名の通り「印刷時に非表示にしたい要素」に付けるための機能です。

・PrintToPDF_Advanced …HTML画面（Webページ）をより細かく設定してPDF化できる拡張版の関数です

出力用の画面の作成

出力用の画面を作るときですがScreenを作る時と同じ要領で作成します。
画面に”PrintLayout”を配置しPDF出力したい画面を作成します。

PDF出力する際に出力されてほしくない文字は”HideOnPrint”を画面に追加しその中に文字を入力します。

PDF出力用のSever Actionの作成

今回は上記で作成した画面に出力ボタンを配置し押下時にダウンロードするServerActionを作成します。

各アクションのプロパティは以下の通りです。
・PrintToPDF_Advanced…Action＞出力したい画面のURL(今回は現在の画面URLを取得しています)、PDFの画面サイズ、PDFの余白をそれぞれ設定します。

・Download…Action＞PrintToPDF_Advancedの戻り値、PDFの名前をそれぞれ設定します。

実際に出力したPDFはこちら

注意事項

・Client Action と Server Action の使い分けに注意。
PDF生成は基本的にサーバー側で行うため、誤って Client Action から呼び出すと正しく動作しない場合があります。

・FileName には必ずダブルクォーテーション（””）を付ける。
"Test.pdf" のように指定しないとエラーになります。

・画面の情報量が多いとタイムアウトしやすい。
テーブルや画像が多いと生成に時間がかかります。

まとめ

今回はUltimate PDFを使ってOutSystemsからPDFファイルを出力する方法をご紹介しました。
画像やグラフなども出力できますので帳票やレポート出力を行うアプリでぜひ活用してみてください。
チーム2ではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに！