Bài viết thử nghiệm 1

Bài viết thử nghiệm 2

Bài viết thử nghiệm 3

Bài viết thử nghiệm 4

HTML

JavaScript

Boostrap

JQuery

SASS

Taiwind

TypeScipt

VueJS

Angular

ReactJS

NextJS

JavaCore

<h1 id="62df7861-3300-4b22-9514-0c6fea5033c2">MapBroad</h1>
<h2 id="cfcdc9d3-44e1-44ea-90d3-646971a3e6b1"><a href="https://www.outsystems.com/training/paths/18/becoming-a-reactive-web-developer/">Becoming a Reactive Web Developer</a><br>
<a href="https://www.outsystems.com/training/paths/1/becoming-a-mobile-developer/">Becoming a Mobile Developer</a><br>
<a href="https://success.outsystems.com/Documentation/Best_Practices/Development/OutSystems_Platform_Best_Practices">Becoming a Reactive Web Developer</a><br>
<a href="https://www.outsystems.com/training/courses/69/validating-and-refactoring-applications/">Refactoring Applications</a></h2>
<h2 id="19f8af76-c6a4-45a8-8c52-c3407ad02b7c">Khái niệm</h2>
<p>Theo <code>outsystems</code> một <code>platform</code> cung cấp các giải pháp <code>low-code</code> <strong>toàn diện</strong><br>
<code>low-code</code> được hiểu là <em>lâu lâu mới code</em>, code ít hơn các nền tảng lập trình thuần tuý.</p>
<hr>
<h2 id="073e0717-7dfd-423b-901f-ecf9d0935f68">Tạo App</h2>
<p>Các loại <code>Applications</code> (3 loại)<br>
○ Web apps :: Viết Web application<br>
○ Mobile apps :: Viết application Mobile<br>
○ Service apps :: Viết API</p>
<hr>
<h2 id="338a226c-d5ce-4433-8ed1-171c5ccdf905">Modules trong App</h2>
<p><strong>Một App có thể có nhiều module</strong> (Nhưng phải có ít nhất một module):</p>
<p>Các loại <code>modules</code> (4 loại):<br>
○ Web Responsive (<strong>Traditional web - Khoá học này</strong>)<br>
○ Web Blank: <em>Thiếu Interface, xử lý nghiệp vụ</em> (Code chủ yếu phần <code>logic</code>)<br>
○ Service: <em>Để viết API</em><br>
○ Extension:: Muốn viết ra một <code>function</code> mà <code>OutSystem</code> không hỗ trợ được, nên viết <strong>C#</strong> để đưa ra server và sử dụng vào ứng dụng Extension.</p>
<hr>
<h2 id="94b94502-8e81-46f8-b206-3fa00679f1be">Chia tách modules</h2>
<p>Nâng cao tính hướng đối tượng, phân chia theo nhiệm vụ…<br>
Có thể chia nhỏ các <code>modules</code> ra theo chức năng, để dễ quản lý, mở rộng hơn:</p>
<ul>
<li>Create the data model</li>
<li>Define business logic</li>
<li>Build web pages</li>
</ul>
<hr>
<h2 id="bcdeae7a-18d6-4246-b03a-55496febd4fa">Khái niệm Producer &amp; Consumer</h2>
<p><code>Producer </code> là nơi public/chia sẻ những <strong>element(features/module)</strong> để các <code>Consumer</code> khác sử dụng.</p>
<p><code>Consumer </code>là những <code>module</code> sử dụng các <code>element/dependency</code> mà <code>Producer</code> cung cấp và chia sẻ ở chế độ <code>public</code>.</p>
<hr>
<h2 id="9e320ffb-a19a-4809-b29f-22caece4d82e">Button Pulish</h2>
<p>Button <code>Pulish</code> sẽ đẩy source code lên server của <code>OutSystem</code>.<br>
Trong quá trình <code>Pulish</code> nếu có xung đột về code giữa các lập trình viên thì sẽ có giao diện trực quan. Danh để giải quyết các lỗi liên quan đến version.</p>


# MapBroad

[Becoming a Reactive Web Developer](https://www.outsystems.com/training/paths/18/becoming-a-reactive-web-developer/)
[Becoming a Mobile Developer](https://www.outsystems.com/training/paths/1/becoming-a-mobile-developer/)
[Becoming a Reactive Web Developer](https://success.outsystems.com/Documentation/Best_Practices/Development/OutSystems_Platform_Best_Practices)
[Refactoring Applications](https://www.outsystems.com/training/courses/69/validating-and-refactoring-applications/)

---

## Khái niệm

Theo `outsystems` một `platform` cung cấp các giải pháp `low-code` **toàn diện**
`low-code` được hiểu là _lâu lâu mới code_, code ít hơn các nền tảng lập trình thuần tuý.

---

## Tạo App

Các loại `Applications` (3 loại)
○ Web apps :: Viết Web application
○ Mobile apps :: Viết application Mobile
○ Service apps :: Viết API

---

## Modules trong App

**Một App có thể có nhiều module** (Nhưng phải có ít nhất một module):

Các loại `modules` (4 loại):
○ Web Responsive (**Traditional web - Khoá học này**)
○ Web Blank: _Thiếu Interface, xử lý nghiệp vụ_ (Code chủ yếu phần `logic`)
○ Service: _Để viết API_
○ Extension:: Muốn viết ra một `function` mà `OutSystem` không hỗ trợ được, nên viết **C#** để đưa ra server và sử dụng vào ứng dụng Extension.

---

## Chia tách modules

Nâng cao tính hướng đối tượng, phân chia theo nhiệm vụ...
Có thể chia nhỏ các `modules` ra theo chức năng, để dễ quản lý, mở rộng hơn:

- Create the data model
- Define business logic
- Build web pages

---

## Khái niệm Producer & Consumer

`Producer ` là nơi public/chia sẻ những **element(features/module)** để các `Consumer` khác sử dụng.

`Consumer `là những `module` sử dụng các `element/dependency` mà `Producer` cung cấp và chia sẻ ở chế độ `public`.

---

## Button Pulish

Button `Pulish` sẽ đẩy source code lên server của `OutSystem`.
Trong quá trình `Pulish` nếu có xung đột về code giữa các lập trình viên thì sẽ có giao diện trực quan. Danh để giải quyết các lỗi liên quan đến version.


MapBroad

Becoming a Reactive Web Developer
Becoming a Mobile Developer
Becoming a Reactive Web Developer
Refactoring Applications

Khái niệm

Tạo App

Modules trong App

Chia tách modules

Khái niệm Producer & Consumer

Button Pulish

🎊 [#1] Tổng quan về OutSystem

<h1 id="5aadff13-f2aa-4b45-9857-8e1feaf381b9">Basic Data Types</h1>
<p><img src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667874153679-image.png?alt=media&amp;token=130c44af-6e1a-4c38-aef5-c66bd8dd99f3" alt="image.png"><br>
● Integer ← x, y, z, *Count, *Number<br>
● Date ← *Date<br>
e.g. BirthDate<br>
● DateTime ← *DateTime, *On, <em>Instant<br>
e.g. Datetime, CreatedOn<br>
● Time ← <em>Time<br>
● Boolean ← Is</em>, Has</em><br>
e.g. IsCompleted, HasDocument<br>
● Email ← *Email<br>
● PhoneNumber ← *Phone, *Mobile<br>
e.g. HomePhone, WorkMobile<br>
● Currency ← *Amount, *Price<br>
● User Identifier ← *By<br>
e.g. CreatedBy<br>
● Entity Identifier ← <entity>Id<br>
e.g. CustomerId<br>
● Entity Record ← <entity><br>
● Entity Record List ← <entity>s/ies<br>
When naming a new attribute (or variable), OutSystems tries to infer its type</entity></entity></entity></p>


# Basic Data Types

![image.png](https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667874153679-image.png?alt=media&token=130c44af-6e1a-4c38-aef5-c66bd8dd99f3)
● Integer ← x, y, z, *Count, *Number
● Date ← *Date
e.g. BirthDate
● DateTime ← *DateTime, *On, *Instant
e.g. Datetime, CreatedOn
● Time ← _Time
● Boolean ← Is_, Has*
e.g. IsCompleted, HasDocument
● Email ← *Email
● PhoneNumber ← *Phone, *Mobile
e.g. HomePhone, WorkMobile
● Currency ← *Amount, *Price
● User Identifier ← \*By
e.g. CreatedBy
● Entity Identifier ← <Entity>Id
e.g. CustomerId
● Entity Record ← <Entity>
● Entity Record List ← <Entity>s/ies
When naming a new attribute (or variable), OutSystems tries to infer its type


Basic Data Types

😎 [#2] Basic Data Types

<h1 id="ed4d4498-134a-422e-af58-1a3809117f77">Tổng quan</h1>
<blockquote>
<p><code>OutSystems</code> cho phép làm việc với 2 loại <code>Database table</code>:<br>
● <code>Entities</code><br>
● <code>Static Entities</code></p>
</blockquote>
<ul>
<li>Trong <code>OutSystems</code> thuộc tình trong <code>Entities</code> và <code>Static Entities</code> cụ thể là <code>Id</code> sẽ được tự động tạo và cần <strong>ít nhất</strong> một thuộc tính khác.</li>
</ul>
<hr>
<h1 id="3c7662c8-3b26-42e7-b938-e58f2780b498">Entities</h1>
<h6>Khái niệm chung</h6>
<ul>
<li>Những <code>Fields</code> trong <code>Entity</code> được gọi là <code>Attributes</code>.</li>
<li>Dữ liệu trong <code>Attribute</code> được gọi là <code>Entity data</code></li>
<li>Mỗi <code>value</code> trong <code>Entity </code> là một <code>Record</code></li>
<li>Mỗi <code>Entity</code> có 6 <code>Entity Actions</code></li>
<li>Mỗi <code>Entity</code> sẽ map với <code>Table</code> tương ứng trong <strong>DB</strong></li>
</ul>
<h6>Đặc điểm của Entity</h6>
<ul>
<li>Mỗi <code>Entities</code> sẽ có <code>Id</code> sẽ được tự động tăng (<code>auto number</code>) và cần <strong>ít nhất</strong> một <code>attribute</code> khác.</li>
<li>Mỗi <code>Entities</code> được tạo ra, sẽ tự động sinh ra một <code>data type</code> là <code>&lt;EntityName&gt; Identifier</code></li>
<li>Data của <code>Entities</code> có thể được <code>initialized</code>từ một <code>Excel spreadsheet</code>. Tiến trình này được gọi là <code>Bootstrapping</code>.</li>
</ul>
<h6>Đặc điểm của Attributes trong Entity</h6>
<ul>
<li>Mỗi <code>attribute</code> là một <strong>Column</strong> trong <code>table</code> tương ứng</li>
<li><code>Type</code> của nó phải là một <code>basic types</code></li>
</ul>
<h6>Đặc điểm của Record</h6>
<ul>
<li>Mỗi <code>Record</code> được tạo ra bởi <code>Id</code> tự động tăng (<code>auto-number</code>). Nó là <code>Primary key</code> trong <code>Database</code>, giúp tạo quan hệ (<em>relational</em>) với các <code>Entity</code> khác</li>
</ul>
<h6>Đặc điểm của Entity Actions</h6>
<ul>
<li><code>OutSystems</code> sẽ tự động tạo <code>Entity Actions</code> gồm có các chức năng CRUD (gồm 6 <code>Entity Actions</code>), cũng chính là các <code>data operations</code>.<br>
Ví dụ cho entity <strong>Customer</strong>:<br>
● <strong>C</strong>reate: CreateCustomer<br>
● <strong>R</strong>etrieve: GetCustomer<br>
● <strong>U</strong>pdate: UpdateCustomer<br>
● <strong>D</strong>elete: DeleteCustomer<br>
<img src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667875849546-image.png?alt=media&amp;token=2037ade6-3339-4c0f-9754-6c14b0af59d2" alt="image.png"></li>
</ul>
<hr>
<h2 id="83a3805d-dd97-4731-abca-602390e0b4fb">Entity’s Properties in Studio</h2>
<p><strong>Toàn bộ</strong> thuộc tính sẽ được trình bày như sau:</p>
<table>
<thead>
<tr>
<th>Tên thuộc tính</th>
<th>Mô tả</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Tên của <code>Entity</code>, sẽ được map với <code>CSDL</code></td>
</tr>
<tr>
<td>Description</td>
<td>Mô tả (nếu có) cho <code>Entity</code></td>
</tr>
<tr>
<td>Public</td>
<td>Yes/No:: có Export <code>Entity</code> này ra <code>outside</code> <code>module</code> ?</td>
</tr>
<tr>
<td>Expose Read Only</td>
<td>Yes/No:: Chỉ đọc, không cho phép chỉnh sửa (Yes)</td>
</tr>
<tr>
<td>Identifier Attribute (More)</td>
<td>Chỉ định PK cho <code>Entity</code></td>
</tr>
<tr>
<td>Update Behavior (More)</td>
<td></td>
</tr>
<tr>
<td>Is Multi-tenant (More)</td>
<td>Yes/No::</td>
</tr>
<tr>
<td>Label (More)</td>
<td>Sử dụng để mô tả <code>Entity</code> trong <code>UI</code></td>
</tr>
<tr>
<td>Label (plural) (More)</td>
<td>Sử dụng để mô tả <strong>số nhiêu</strong> <code>Entity</code> trong <code>UI</code></td>
</tr>
<tr>
<td>Order By Attribute (More)</td>
<td>Set thứ tự <strong>mặc định</strong> của các <code>Records</code>. <code>Attribute</code> này trở thành <code>Source</code> trong <code>table</code> khi tạo màn hình</td>
</tr>
<tr>
<td>Label Attribute (More)</td>
<td>Hiển thị tại <code>UI</code> khi tạo Combobox</td>
</tr>
<tr>
<td>Is Active Attribute (More)</td>
<td>xác định xem <code>record</code> có được <code>fetched</code> trong một <code>query</code>?</td>
</tr>
</tbody>
</table>
<hr>
<h2 id="5c536fef-fa92-42f3-aa56-38a7ab6ff350">Attribute’s Properties in Studio</h2>
<p><strong>Toàn bộ</strong> thuộc tính sẽ được trình bày như sau:</p>
<table>
<thead>
<tr>
<th>Tên thuộc tính</th>
<th>Mô tả</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Tên của <code>Attribute</code>, sẽ được map với tên colmn <code>CSDL</code></td>
</tr>
<tr>
<td>Description</td>
<td>Mô tả (nếu có) cho <code>Entity</code></td>
</tr>
<tr>
<td>Label</td>
<td>Nhãn rút ngắn, sẽ được <code>generating</code> tại <code>module UI</code></td>
</tr>
<tr>
<td>Data type</td>
<td>Kiểu dữ liệu của <code>Attribute</code></td>
</tr>
<tr>
<td>Length</td>
<td>Độ dài (Nếu <code>Data type</code> là <code>Text</code>)</td>
</tr>
<tr>
<td>Decimal</td>
<td>Làm tròn đến chữ số thứ <code>nth</code> (Nếu <code>Data type</code> là <code>Decimal </code>)</td>
</tr>
<tr>
<td>Is AutoNumber</td>
<td>Yes/No:: Có tự động tăng (Nếu <code>Data type</code> là <code>Integer</code>)</td>
</tr>
<tr>
<td>Is Mandatory</td>
<td>Yes/No:: Có bắt buộc hay không?</td>
</tr>
<tr>
<td>Default Value</td>
<td>Giá trị mặc định</td>
</tr>
</tbody>
</table>
<hr>
<h1 id="6e3ea7cf-95d3-4da7-8b14-f04aa5c7d427">Static Entities</h1>
<h6>Khái niệm chung</h6>
<p><code>Static Entities</code> là <code>Entities</code> có tập hợp các giá trị có thể được xác định <strong>trước</strong> runtime<br>
<em>Nghĩa là</em>:: Giá trị thuộc tính được xác định tại thời điểm <code>design</code>.</p>
<h6>Đặc điểm của Static Entities</h6>
<ul>
<li><code>Static Entities</code> KHÔNG thể <strong>created, updated, or deleted</strong>;</li>
<li>Chỉ <strong>retrieved</strong> (truy xuất)<br>
OutSystem đã hào phóng cung cấp 1 phương thức <code>Custom</code> là <code>Get&lt;StaticEntityName&gt;</code> giá trị trả về chỉ là một <code>Entity Action</code></li>
<li><code>Static Entities</code> được sử dụng như một <strong>enumerations</strong></li>
</ul>
<h6>Đặc điểm của Static Entity Records</h6>
<ul>
<li><code>Static Entities Records</code> sẽ có 4 <code>attributes</code> được tự động tạo ra thành <code>structed</code>: <em>Id , Label, Order, Is Active</em></li>
<li>Các <code>attributes</code> này có thể <strong>changed</strong> hoặc <strong>deleted và add</strong> mới</li>
</ul>
<p>Như đã nói, không thể <code>thêm, sửa, xoá</code> các <strong>record</strong> trong <code>Static Entities</code>. Nhưng chúng ta có thể <strong>new record</strong> bằng cách <strong>chuột phải::new record</strong>. Record tạo ra được lưu trong folder “<em>records</em>”. của <code>Static Entity</code>.<br>
Và <code>setting</code> các giá trị của chúng bằng <code>Service Studio</code> (<code>development time</code>)</p>
<h2 id="954fb796-a107-4b33-8ce6-78f7cbbd22a5">Cách sử dụng</h2>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667891517176-image.png?alt=media&amp;token=99ecd797-09a3-4ede-a6f0-98a39f029690">
<hr>
<h2 id="c92b3ced-7c07-421e-923b-4fe3ad30b93a">Ứng dụng thực tế</h2>
<hr>
<p>Hết.</p>


# Tổng quan

> `OutSystems` cho phép làm việc với 2 loại `Database table`:
> ● `Entities`
> ● `Static Entities`

- Trong `OutSystems` thuộc tình trong `Entities` và `Static Entities` cụ thể là `Id` sẽ được tự động tạo và cần **ít nhất** một thuộc tính khác.

---

# Entities

###### Khái niệm chung

- Những `Fields` trong `Entity` được gọi là `Attributes`.
- Dữ liệu trong `Attribute` được gọi là `Entity data`
- Mỗi `value` trong `Entity ` là một `Record`
- Mỗi `Entity` có 6 `Entity Actions`
- Mỗi `Entity` sẽ map với `Table` tương ứng trong **DB**

###### Đặc điểm của Entity

- Mỗi `Entities` sẽ có `Id` sẽ được tự động tăng (`auto number`) và cần **ít nhất** một `attribute` khác.
- Mỗi `Entities` được tạo ra, sẽ tự động sinh ra một `data type` là `<EntityName> Identifier`
- Data của `Entities` có thể được `initialized`từ một `Excel spreadsheet`. Tiến trình này được gọi là `Bootstrapping`.

###### Đặc điểm của Attributes trong Entity

- Mỗi `attribute` là một **Column** trong `table` tương ứng
- `Type` của nó phải là một `basic types`

###### Đặc điểm của Record

- Mỗi `Record` được tạo ra bởi `Id` tự động tăng (`auto-number`). Nó là `Primary key` trong `Database`, giúp tạo quan hệ (_relational_) với các `Entity` khác

###### Đặc điểm của Entity Actions

- `OutSystems` sẽ tự động tạo `Entity Actions` gồm có các chức năng CRUD (gồm 6 `Entity Actions`), cũng chính là các `data operations`.
  Ví dụ cho entity **Customer**:
  ● **C**reate: CreateCustomer
  ● **R**etrieve: GetCustomer
  ● **U**pdate: UpdateCustomer
  ● **D**elete: DeleteCustomer
  ![image.png](https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667875849546-image.png?alt=media&token=2037ade6-3339-4c0f-9754-6c14b0af59d2)

---

## Entity's Properties in Studio

**Toàn bộ** thuộc tính sẽ được trình bày như sau:

| Tên thuộc tính              | Mô tả                                                                                                        |
| --------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Name                        | Tên của `Entity`, sẽ được map với `CSDL`                                                                     |
| Description                 | Mô tả (nếu có) cho `Entity`                                                                                  |
| Public                      | Yes/No:: có Export `Entity` này ra `outside` `module` ?                                                      |
| Expose Read Only            | Yes/No:: Chỉ đọc, không cho phép chỉnh sửa (Yes)                                                             |
| Identifier Attribute (More) | Chỉ định PK cho `Entity`                                                                                     |
| Update Behavior (More)      |                                                                                                              |
| Is Multi-tenant (More)      | Yes/No::                                                                                                     |
| Label (More)                | Sử dụng để mô tả `Entity` trong `UI`                                                                         |
| Label (plural) (More)       | Sử dụng để mô tả **số nhiêu** `Entity` trong `UI`                                                            |
| Order By Attribute (More)   | Set thứ tự **mặc định** của các `Records`. `Attribute` này trở thành `Source` trong `table` khi tạo màn hình |
| Label Attribute (More)      | Hiển thị tại `UI` khi tạo Combobox                                                                           |
| Is Active Attribute (More)  | xác định xem `record` có được `fetched` trong một `query`?                                                   |

---

## Attribute's Properties in Studio

**Toàn bộ** thuộc tính sẽ được trình bày như sau:

| Tên thuộc tính | Mô tả                                                         |
| -------------- | ------------------------------------------------------------- |
| Name           | Tên của `Attribute`, sẽ được map với tên colmn `CSDL`         |
| Description    | Mô tả (nếu có) cho `Entity`                                   |
| Label          | Nhãn rút ngắn, sẽ được `generating` tại `module UI`           |
| Data type      | Kiểu dữ liệu của `Attribute`                                  |
| Length         | Độ dài (Nếu `Data type` là `Text`)                            |
| Decimal        | Làm tròn đến chữ số thứ `nth` (Nếu `Data type` là `Decimal `) |
| Is AutoNumber  | Yes/No:: Có tự động tăng (Nếu `Data type` là `Integer`)       |
| Is Mandatory   | Yes/No:: Có bắt buộc hay không?                               |
| Default Value  | Giá trị mặc định                                              |

---

# Static Entities

###### Khái niệm chung

`Static Entities` là `Entities` có tập hợp các giá trị có thể được xác định **trước** runtime
_Nghĩa là_:: Giá trị thuộc tính được xác định tại thời điểm `design`.

###### Đặc điểm của Static Entities

- `Static Entities` KHÔNG thể **created, updated, or deleted**;
- Chỉ **retrieved** (truy xuất)
  OutSystem đã hào phóng cung cấp 1 phương thức `Custom` là `Get<StaticEntityName>` giá trị trả về chỉ là một `Entity Action`
- `Static Entities` được sử dụng như một **enumerations**

###### Đặc điểm của Static Entity Records

- `Static Entities Records` sẽ có 4 `attributes` được tự động tạo ra thành `structed`: _Id , Label, Order, Is Active_
- Các `attributes` này có thể **changed** hoặc **deleted và add** mới

Như đã nói, không thể `thêm, sửa, xoá` các **record** trong `Static Entities`. Nhưng chúng ta có thể **new record** bằng cách **chuột phải::new record**. Record tạo ra được lưu trong folder "_records_". của `Static Entity`.
Và `setting` các giá trị của chúng bằng `Service Studio` (`development time`)

## Cách sử dụng

<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667891517176-image.png?alt=media&token=99ecd797-09a3-4ede-a6f0-98a39f029690">

---

## Ứng dụng thực tế

---

Hết.


Tổng quan

Entities

Entity’s Properties in Studio

Attribute’s Properties in Studio

Static Entities

Cách sử dụng

Ứng dụng thực tế

👻 [#3] Data Modeling (Entities, Static Entities)

<h1 id="da69933c-7b10-42f0-9ec5-ab659db4d9aa">Variables</h1>
<h3>Khái niệm</h3>
<p><code>Variables</code> được khởi tạo và tồn tại trong mộy phạm vi <code>scope</code> cụ thể<br>
● Trong phạm vi <code>scoped</code> đó, có thể truy cập hoặc sửa đổi <code>variable</code><br>
● Nếu việc thực thi ngoài phạm vi <code>scoped</code>, thì biến đó sẽ bị <code>destroyed</code></p>
<h2 id="713b7833-0dff-4148-9907-01ec4fe91b56">Input Parameter</h2>
<h3>Khái niệm</h3>
<p>Truyền một <code>value</code> từ bên ngoài <code>scoped</code> vào bên trong <code>parent's scoped</code><br>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667896097560-image.png?alt=media&amp;token=a634ee92-457d-47d5-bd70-17d84c45e798"></p>
<h3>Các lưu ý:</h3>
<ul>
<li>Thay đổi <code>Is Madatory</code> :: Bắt buộc truyền vào</li>
<li><code>Default value</code> sẽ có lựa chọn khi <code>Is Madatory</code> === “NO”</li>
</ul>
<h2 id="728ef4c3-f21b-48c0-93ea-df45c914e91e">Output Parameter</h2>
<h3>Khái niệm</h3>
<blockquote>
<p>Truyền một <code>value</code> từ bên trong (inside) <code>parent's scoped</code> ra bên ngoài (outside) <code>scoped</code><br>
Hoặc có thể hiểu::<br>
Một <code>value</code> phải được <strong>gán</strong> cho <code>Output Parameter</code> trong <code>inside</code> và được <strong>return</strong> ra <code>outside</code></p>
</blockquote>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667896918001-image.png?alt=media&amp;token=c1cff974-831c-41f9-8d46-a801ca7258a5">
<h3>Các lưu ý:</h3>
<ul>
<li><code>Output Parameter</code> <strong>bắt buộc</strong> phải được gán (assigned) <code>value</code> nào đó</li>
<li><code>The variable</code> sẽ tiếp tục <strong>tồn tại</strong> ở outside <code>scoped</code></li>
</ul>
<h2 id="408be579-f616-4f13-a11b-5f6557f99319">Local Variable</h2>
<h3>Khái niệm</h3>
<ul>
<li>Chỉ tồn tại trong (inside) <code>parent's scoped</code></li>
<li>Được <strong>gán</strong> và <strong>sử dụng</strong> bên trong <code>scoped này</code></li>
<li><code>The variable</code> sẽ bị <code>detroyed</code> khi rời khởi <code>scoped này</code><br>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667897454090-image.png?alt=media&amp;token=b2518380-1eb3-4c02-803c-946f42051fae"></li>
</ul>
<hr>
<h1 id="8aa674f7-e506-450a-980b-8809433bf06e">Data Types</h1>
<p>Trong <code>OutSystem</code> hỗ trợ <code>Basic Types</code> và <code>Compound Types</code>(Entities, Static Entities, Structures) và <code>Lists</code></p>
<h2 id="281ac5a9-7d9e-4cf7-8815-9d12577e326f">Structures</h2>
<h3>Khái niệm</h3>
<p><code>Structures</code> là một <code>compound data types</code> (Kiểu dữ liệu phức hợp) tuỳ chỉnh.</p>
<ul>
<li><code>Structure</code> định nghĩa cho một <code>data type</code></li>
<li><code>Structure</code> không giữ bất cứ giá trị nào.</li>
</ul>
<h3>Các lưu ý:</h3>
<ul>
<li><code>Add Structure</code> có thể set <code>Name</code> và <code>public</code></li>
<li><code>Add Structure Attributes</code> có thể set <code>Name</code> và <code>Data Type</code>
<ul>
<li>Mandatory : Bắt buộc hay không?</li>
<li>Có thể set <code>default value</code></li>
</ul>
</li>
</ul>
<h3>Creating Structures</h3>
<p><img src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667899034596-image.png?alt=media&amp;token=af30cd16-6010-4efa-8d49-6eae8ebdb05f" alt="image.png"></p>
<h2 id="33194db1-2542-4e15-b06d-09e6c5ec7827">Lists</h2>
<p>A List is a collection of elements of the same data type (e.g. List of Integers)<br>
<code>List</code> là một tập hợp các <code>element</code> của cùng một <code>data type</code> (List of interger)<br>
Elements of <code>OutSystems Lists</code> có thể là:</p>
<ul>
<li>
<p>Basic types (<code>Integer</code>…)</p>
</li>
<li>
<p>Compound types (<code>Entities</code> or <code>Structure</code>)</p>
</li>
<li>
<p>một union(kết hợp) giữa các <code>data type</code></p>
<ul>
<li>Integer + Text</li>
<li>Booking + GuestName</li>
</ul>
</li>
</ul>
<hr>
<p>HẾT.</p>


# Variables

### Khái niệm

`Variables` được khởi tạo và tồn tại trong mộy phạm vi `scope` cụ thể
● Trong phạm vi `scoped` đó, có thể truy cập hoặc sửa đổi `variable`
● Nếu việc thực thi ngoài phạm vi `scoped`, thì biến đó sẽ bị `destroyed`

## Input Parameter

### Khái niệm

Truyền một `value` từ bên ngoài `scoped` vào bên trong `parent's scoped`
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667896097560-image.png?alt=media&token=a634ee92-457d-47d5-bd70-17d84c45e798">

### Các lưu ý:

- Thay đổi `Is Madatory` :: Bắt buộc truyền vào
- `Default value` sẽ có lựa chọn khi `Is Madatory` === "NO"

## Output Parameter

### Khái niệm

> Truyền một `value` từ bên trong (inside) `parent's scoped` ra bên ngoài (outside) `scoped`
> Hoặc có thể hiểu::
> Một `value` phải được **gán** cho `Output Parameter` trong `inside` và được **return** ra `outside`

<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667896918001-image.png?alt=media&token=c1cff974-831c-41f9-8d46-a801ca7258a5">

### Các lưu ý:

- `Output Parameter` **bắt buộc** phải được gán (assigned) `value` nào đó
- `The variable` sẽ tiếp tục **tồn tại** ở outside `scoped`

## Local Variable

### Khái niệm

- Chỉ tồn tại trong (inside) `parent's scoped`
- Được **gán** và **sử dụng** bên trong `scoped này`
- `The variable` sẽ bị `detroyed` khi rời khởi `scoped này`
  <img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667897454090-image.png?alt=media&token=b2518380-1eb3-4c02-803c-946f42051fae">

---

# Data Types

Trong `OutSystem` hỗ trợ `Basic Types` và `Compound Types`(Entities, Static Entities, Structures) và `Lists`

## Structures

### Khái niệm

`Structures` là một `compound data types` (Kiểu dữ liệu phức hợp) tuỳ chỉnh.

- `Structure` định nghĩa cho một `data type`
- `Structure` không giữ bất cứ giá trị nào.

### Các lưu ý:

- `Add Structure` có thể set `Name` và `public`
- `Add Structure Attributes` có thể set `Name` và `Data Type`
  - Mandatory : Bắt buộc hay không?
  - Có thể set `default value`

### Creating Structures

![image.png](https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667899034596-image.png?alt=media&token=af30cd16-6010-4efa-8d49-6eae8ebdb05f)

## Lists

A List is a collection of elements of the same data type (e.g. List of Integers)
`List` là một tập hợp các `element` của cùng một `data type` (List of interger)
Elements of `OutSystems Lists` có thể là:

- Basic types (`Integer`...)
- Compound types (`Entities` or `Structure`)
- một union(kết hợp) giữa các `data type`

  - Integer + Text
  - Booking + GuestName

---

HẾT.


Variables

Input Parameter

Output Parameter

Local Variable

Data Types

Structures

Lists

🦔 [#4] Variables

<h1 id="192d4754-f172-4637-8109-8bb689b4f391">Basic Screen Development</h1>
<p>Có 02 loại <code>Screen</code> trong OutSytem: <em>Empty</em>, <em>Existing Template</em></p>
<p><code>Screen</code> được định nghĩa từ nhiều <code>Various elements</code> theo mô hình phân cấp (<code>Widget Tree</code>)</p>
<hr>
<h2 id="ef2806ad-2564-4aaa-b185-568e11b2c7be">🎨Screen Variables</h2>
<h6>Screens Input Variables</h6>
<ul>
<li><code>Parameters</code> được truyền thông qua <code>request</code> đến <code>Screen</code></li>
<li>Bắt buộc <code>input variables</code> phải được <code>assigned</code> giá trị</li>
</ul>
<h6>Screens Local Variables</h6>
<ul>
<li>Được <code>Initialized</code> trong phạm vi của <code>Screen</code></li>
<li>Những <code>variables</code> tồn tại trong phạm vi của <code>Screen</code></li>
<li>Bị <code>Detroyed</code> khi rời khỏi <code>scoped</code> của <code>Screen</code></li>
</ul>
<h6>KHÔNG CÓ <code>Output Variables</code></h6>
<hr>
<h2 id="375a1d61-eb90-4d7b-8907-0797d42d3769">🎃Fetching Data với Preparation</h2>
<h6>Giới thiệu Preparation</h6>
<ul>
<li><code>Screens</code> có thể cần hiển thị <code>data</code> bên ngoài . <code>Preparation</code> là một <code>special Screen Action</code></li>
<li><code>Data</code> cần thiết để giúp đỡ <code>render</code> cho <code>Screen</code> nên được truy xuất trong <code>Preparation</code></li>
</ul>
<h6>Đặc điểm của Preparation</h6>
<ul>
<li><code>Preparation</code> Có quyền truy cập vào <code>Input Variables</code></li>
<li><code>Preparation</code> Có quyền truy cập vào <code>Local Variables</code></li>
<li><code>Preparation</code> Có quyền truy cập vào <code>data</code> khác</li>
</ul>
<p>Data có thể truy xuất từ nhiều <code>sources</code></p>
<ul>
<li>Databases: Aggregates &amp; SQL</li>
<li>Integrations: Web Services, REST, …<br>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667937101152-image.png?alt=media&amp;token=6757627e-c540-45f4-8141-db263f47cf93"></li>
</ul>
<p>Chú ý: Sau khi <code>Fetching Data</code> hoàn thành, Các <code>Data</code> này sẽ có sẵn trong <code>Screen</code>, chỉ việc sử dụng</p>
<hr>
<h1 id="6828001e-7837-4427-a66c-45df6184243c">Screen Lifecycle</h1>
<p>Khi truy cập một <code>Screen</code> (Một <code>request</code> từ <code>browser</code>) <code>Screen Lifecycle</code> sẽ xảy ra</p>
<h6>Bao gồm 4 giai đoạn:</h6>
<ul>
<li><strong>Bắt buộc</strong> <code>Input Parameters</code> phải được gửi cùng <code>request</code></li>
<li>Nếu <strong>bắt buộc</strong> <code>Input Parameters</code> và <code>Local Variables</code> chúng sẽ <code>default values</code></li>
<li><code>Preparation</code> sẽ chạy tiếp theo</li>
<li><code>Screen</code> sẽ được <code>built</code> (rendered) từ đầu đến cuối <code>HTML code</code><br>
<img class="border mt-2" style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667937204432-image.png?alt=media&amp;token=094fdc46-5c9d-405a-9dc6-ace7203874b2"><br>
Khi <code>response</code> trả về cho <code>browser</code>, nó được hiển thị cho user</li>
</ul>
<hr>
<p>Hết.</p>


# Basic Screen Development

Có 02 loại `Screen` trong OutSytem: _Empty_, _Existing Template_

`Screen` được định nghĩa từ nhiều `Various elements` theo mô hình phân cấp (`Widget Tree`)

---

## 🎨Screen Variables

###### Screens Input Variables

- `Parameters` được truyền thông qua `request` đến `Screen`
- Bắt buộc `input variables` phải được `assigned` giá trị

###### Screens Local Variables

- Được `Initialized` trong phạm vi của `Screen`
- Những `variables` tồn tại trong phạm vi của `Screen`
- Bị `Detroyed` khi rời khỏi `scoped` của `Screen`

###### KHÔNG CÓ `Output Variables`

---

## 🎃Fetching Data với Preparation

###### Giới thiệu Preparation

- `Screens` có thể cần hiển thị `data` bên ngoài . `Preparation` là một `special Screen Action`
- `Data` cần thiết để giúp đỡ `render` cho `Screen` nên được truy xuất trong `Preparation`

###### Đặc điểm của Preparation

- `Preparation` Có quyền truy cập vào `Input Variables`
- `Preparation` Có quyền truy cập vào `Local Variables`
- `Preparation` Có quyền truy cập vào `data` khác

Data có thể truy xuất từ nhiều `sources`

- Databases: Aggregates & SQL
- Integrations: Web Services, REST, ...
  <img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667937101152-image.png?alt=media&token=6757627e-c540-45f4-8141-db263f47cf93">

Chú ý: Sau khi `Fetching Data` hoàn thành, Các `Data` này sẽ có sẵn trong `Screen`, chỉ việc sử dụng

---

# Screen Lifecycle

Khi truy cập một `Screen` (Một `request` từ `browser`) `Screen Lifecycle` sẽ xảy ra

###### Bao gồm 4 giai đoạn:

- **Bắt buộc** `Input Parameters` phải được gửi cùng `request`
- Nếu **bắt buộc** `Input Parameters` và `Local Variables` chúng sẽ `default values`
- `Preparation` sẽ chạy tiếp theo
- `Screen` sẽ được `built` (rendered) từ đầu đến cuối `HTML code`
  <img class="border mt-2" style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667937204432-image.png?alt=media&token=094fdc46-5c9d-405a-9dc6-ace7203874b2">
  Khi `response` trả về cho `browser`, nó được hiển thị cho user

---

Hết.


Basic Screen Development

🎨Screen Variables

🎃Fetching Data với Preparation

Screen Lifecycle

🎯 [#5] Screen Development 1 (Variables, Fetching Data với Preparation, Lifecycle)

<h1 id="a776416e-dc2c-49cd-b690-d4d9af35e9a8">Aggregates Overview</h1>
<p>Phần lớn <code>web applications</code> cần phải <code>fetch data</code> từ <code>database</code><br>
<code>Aggregates</code> Cho phép chúng ta định nghĩa <code>database queries</code> bằng nhiều cách:</p>
<ul>
<li>Add Sources</li>
<li>Create filters</li>
<li>Define sorting</li>
</ul>
<img style="display: block;margin:0 auto; width:600px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667940781821-image.png?alt=media&amp;token=29103db2-b2af-42c4-9399-943c6ab45d4d">
<p><code>Aggregates</code> dễ dàng để <code>create</code> và <code>maintain</code></p>
<ul>
<li>Excel-like hiển thì <code>real data</code></li>
<li>SQL knowledge là <strong>KHÔNG</strong> bắt buộc</li>
</ul>
<hr>
<h5>Tạo Aggregates</h5>
<img style="display: block;margin:0 auto; width:600px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667940742971-image.png?alt=media&amp;token=6e7276f1-0372-4ca8-b38b-3a777e8aad41">
<ul>
<li>Trong action <code>Preparation</code> cuar <code>Screen</code> kéo một <code>Aggregate</code> từ <code>Toolbox</code> vào <code>Action flow</code></li>
<li>Kéo <code>Entity</code>cần fetch data vào <code>Action Flow</code> tại <code>Aggregate</code> vừa tạo trước đó (<code>accelerator</code>)</li>
</ul>
<hr>
<h1 id="57a4f138-9775-42cf-998d-491852feaf5e">Aggregates</h1>
<h2 id="dc2aab71-3b2c-4478-aae1-94d0a9dedd22">🧨Sources</h2>
<ul>
<li><code>Aggregates</code> hỗ trợ một hoặc nhiều <code>source Entities</code></li>
<li><code>sources</code> có kiều là <code>Aggregate’s Output List</code> (Customer List…)</li>
</ul>
<h2 id="23202128-7250-4130-a7a1-dbebf0a30bfe">✨Filters</h2>
<p>Tương ứng với mệnh đề <code>WHERE</code> trong SQL</p>
<ul>
<li>Có thể có <strong>một hoặc nhiều</strong> <code>conditions</code> cho câu <code>query</code> để <strong>filter</strong> các <strong>output records</strong></li>
</ul>
<h2 id="4d451bae-bae0-467c-955f-bc4bb0d4a179">🧶Sorting</h2>
<p>Tương ứng với mệnh đề <code>ORDER BY</code> trong SQL</p>
<ul>
<li>Định nghĩa <code>Entity’s attribute</code> để <strong>order by</strong> và (Ascending, Ascending)</li>
<li>Khi định nghĩa nhiều <code>sorts</code> thứ tự sẽ ưu tiên từ trên xuống dưới</li>
</ul>
<h2 id="6167f395-2414-4e98-b745-46966950f225">🎪Testing</h2>
<ul>
<li>Cho phép chỉ định các giá trị <code>external variables</code> được sử dụng để <strong>filter</strong> or <strong>sort conditions</strong></li>
<li>Có thể có nhiều giá trị <code>external variables</code> để xem <strong>preview</strong> phục vụ cho <strong>test</strong>, không ảnh hưởng đến <strong>real result</strong></li>
</ul>
<h2 id="1fc76d6f-3753-425a-ab84-fd16a05dd5ee">💨Output [Output paramater]</h2>
<p>Các properties:</p>
<ul>
<li>Length - Số lượng kết quả return</li>
<li>Empty - True if Không có hồ sơ nào được return</li>
<li>EOF, BOF, CurrentRowNumber - điền trong khi <code>iterating List</code><br>
Aggregate Get<entity> chứa một <strong>“List.Current”</strong><br>
EOF :: End of file, BOF: Begin of file</entity></li>
<li>Type <code>matches</code> định nghĩa của câu <code>query</code></li>
<li>“Current” là <strong>cursor</strong> di chuyển qua <strong>List</strong> khi <strong>iterating</strong></li>
<li>Điền trong <code>default values</code> if returned <code>Empty List</code></li>
</ul>
<h2 id="166001af-b647-4b76-a06d-4ee2f9debad5">💦Properties</h2>
<ul>
<li><strong>Max.Records</strong>: Giới hạn kết quả return, không ảnh hưởng đến Count output</li>
<li><strong>Executed SQL</strong>: Hiển thị câu lệnh SQL sẽ được thực hiện, <strong>không sửa ở đây được</strong></li>
</ul>
<hr>
<p>HẾT.</p>


# Aggregates Overview

Phần lớn `web applications` cần phải `fetch data` từ `database`
`Aggregates` Cho phép chúng ta định nghĩa `database queries` bằng nhiều cách:

- Add Sources
- Create filters
- Define sorting

<img style="display: block;margin:0 auto; width:600px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667940781821-image.png?alt=media&token=29103db2-b2af-42c4-9399-943c6ab45d4d">

`Aggregates` dễ dàng để `create` và `maintain`

- Excel-like hiển thì `real data`
- SQL knowledge là **KHÔNG** bắt buộc

---

##### Tạo Aggregates

<img style="display: block;margin:0 auto; width:600px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667940742971-image.png?alt=media&token=6e7276f1-0372-4ca8-b38b-3a777e8aad41">

- Trong action `Preparation` cuar `Screen` kéo một `Aggregate` từ `Toolbox` vào `Action flow`
- Kéo `Entity`cần fetch data vào `Action Flow` tại `Aggregate` vừa tạo trước đó (`accelerator`)

---

# Aggregates

## 🧨Sources

- `Aggregates` hỗ trợ một hoặc nhiều `source Entities`
- `sources` có kiều là `Aggregate’s Output List` (Customer List...)

## ✨Filters

Tương ứng với mệnh đề `WHERE` trong SQL

- Có thể có **một hoặc nhiều** `conditions` cho câu `query` để **filter** các **output records**

## 🧶Sorting

Tương ứng với mệnh đề `ORDER BY` trong SQL

- Định nghĩa `Entity’s attribute` để **order by** và (Ascending, Ascending)
- Khi định nghĩa nhiều `sorts` thứ tự sẽ ưu tiên từ trên xuống dưới

## 🎪Testing

- Cho phép chỉ định các giá trị `external variables` được sử dụng để **filter** or **sort conditions**
- Có thể có nhiều giá trị `external variables` để xem **preview** phục vụ cho **test**, không ảnh hưởng đến **real result**

## 💨Output [Output paramater]

Các properties:

- Length - Số lượng kết quả return
- Empty - True if Không có hồ sơ nào được return
- EOF, BOF, CurrentRowNumber - điền trong khi `iterating List`
  Aggregate Get<Entity> chứa một **"List.Current"**
  EOF :: End of file, BOF: Begin of file
- Type `matches` định nghĩa của câu `query`
- "Current" là **cursor** di chuyển qua **List** khi **iterating**
- Điền trong `default values` if returned `Empty List`

## 💦Properties

- **Max.Records**: Giới hạn kết quả return, không ảnh hưởng đến Count output
- **Executed SQL**: Hiển thị câu lệnh SQL sẽ được thực hiện, **không sửa ở đây được**

---

HẾT.


Aggregates Overview

Aggregates

🧨Sources

✨Filters

🧶Sorting

🎪Testing

💨Output [Output paramater]

💦Properties

🎰 [#6] Data Queries 

<h1 id="e3f7155e-79bc-4c66-a5da-167a173e8c8f">Widgets</h1>
<p><code>Widgets</code> là <code>visual elements</code> mà trang điểm (Make up) cho các <code>Screens</code></p>
<h6>Các Properties !important (ít nhất một)</h6>
<ul>
<li>Source data</li>
<li>Behavior</li>
<li>Styles</li>
</ul>
<hr>
<h2 id="4e0c96a7-f407-4208-b570-7c5ad3c69b65">Text Widget</h2>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667979980695-image.png?alt=media&amp;token=8223cc7f-c0b5-4dcb-8fe0-0bbf2ff996e0">
<ul>
<li><code>Text Widget</code> :: Hiển thị text</li>
<li><code>Text</code> property Xác định những gì xuất hiện trên <code>Screen</code></li>
<li>Hiển thị các giá trị cố định, không thay đổi dựa trên DB</li>
</ul>
<hr>
<h2 id="2e2a898c-949a-409c-a505-96f7cb7abd95">Expression Widget</h2>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667979936895-image.png?alt=media&amp;token=d2949f5e-1557-43b2-bbf5-b72e3a1c1cdf">
<ul>
<li>
<p><code>Expression Widget</code> :: Hiển thị giá trị <strong>tính toán</strong>, tính trong <code>Runtime</code></p>
</li>
<li>
<p>Hiển thị các giá trị động từ <code>DB</code> lên</p>
</li>
</ul>
<h2 id="6f7227c1-19cd-42c5-b56d-333bbaad2517">Image Widget</h2>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667979854424-image.png?alt=media&amp;token=cbabef6f-afef-41cc-b6a0-5b0e80bd6489">
<p><code>Image Widget</code>:: Hiển thị một <code>Image</code> nằm trên <code>Screen</code>, <code>source</code> của <code>image</code> được định nghĩa tại <code>Type property</code></p>
<ul>
<li>Type = “Local Image” :: <code>Image</code> phải được đưa vào <code>module</code> như một <code>resource</code>(Tại Tab <strong>DATA</strong>)</li>
<li>Type = “External” :: Cho phép truy cập thông qua <strong>URL</strong></li>
<li>Type = “Database” :: <code>Binary Data</code> Entity attribute, liên kết đến thuộc tính có Type là <code>Binary Data</code> của <code>Entity</code></li>
</ul>
<hr>
<h2 id="612fd26e-2ba7-4848-84fc-0e5643d8949c">Table Records Widget</h2>
<p><code>Table Records Widget</code>::<br>
Hiển thị <code>multiple records</code> trong một <code>Table layout</code></p>
<ul>
<li>Một <code>record</code> tương ứng với một <code>row</code></li>
<li>Mỗi <code>cell</code> chứa các <code>widgets</code> khác…</li>
<li>Bị ràng buộc (Bound) <code>Source Record List</code>: Source dữ liệu sẽ được hiển thị</li>
<li>Chứa một bản <code>copy</code> của <code>Source Record List</code>: <code>Copy</code> là iterated để hiển thị dữ liệu trên <code>Screen</code><br>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980030817-image.png?alt=media&amp;token=ea380775-c72a-4a24-96e0-a2720dd5244c"></li>
</ul>
<h2 id="7fe26388-9264-4a6b-8e53-815f20f6e19a">Đặc điểm Table Records Widget</h2>
<ul>
<li>Hiển thị tương ứng với các thẻ ‘table’, chậm hơn <code>div</code> vì phải tính toán vị trí hiển thị các cột, hàng …</li>
<li><code>Accelerators</code> tạo một <code>column</code> cho mỗi <code>attribute</code> của <code>Entity</code></li>
<li><code>Initial columns</code> có thể <strong>THAY ĐỔI</strong><br>
<code>Table toolbar</code> Cho phép chỉnh sửa <code>Table</code>
<ul>
<li>Add new column</li>
<li>Delete columns</li>
<li>Move columns</li>
</ul>
</li>
<li><code>Widgets</code> có thể kéo thả giữa các <code>columns</code></li>
<li><code>Styles</code> cũng có thể <strong>ĐIỀU CHỈNH</strong></li>
</ul>
<hr>
<h2 id="59cde79d-dfcf-4f45-b01d-af62d1f46fad">List Records Widget</h2>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980116153-image.png?alt=media&amp;token=fb15e320-dcf1-46cd-a16e-90ac766fbaf6">
- Hiển thị tương ứng với các thẻ 'div'
- Hiển thị nhiều `records` trong một `free-form layout`.
- `Records` sẽ được tách bởi `Line Separator` (Bộ tách dòng)
- Bị ràng buộc (Bound) `Source Record List`: `Source` dữ liệu sẽ được hiển thị
- Chứa một bản `copy` của `Source Record List`: Bản `copy` là iterated để hiển thị dữ liệu trên `Screen`
<h2 id="32145046-bf9f-4b77-8222-a9921dbbc9aa">Label and Input Widgets</h2>
<p><strong>Label:</strong><br>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980279902-image.png?alt=media&amp;token=06d6e318-15bc-40d5-b283-a2d7cab1925d"></p>
<ul>
<li><code>Label</code> :: sẽ hiển thị bên cạnh <code>Input Widget</code>. Tính toán <code>Value property</code> và hiển thị <code>result</code>.<br>
Có thể bị ràng buộc với một <code>Input Widget</code>: <code>Mandatory</code> các <code>Inputs</code> gợi ý trực quan trên <code>Label</code> tại thời điểm <code>runtime</code></li>
</ul>
<p><strong>Input:</strong></p>
<ul>
<li>Cho phép <code>end-user</code> <code>submit data</code> bằng cách nhập thông tin lên nó</li>
<li>Ràng buộc đến một <code>variable</code> sẽ giữ dữ liệu được nhập bởi <code>user</code></li>
<li>Có thể set <code>mandatory</code></li>
</ul>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980202792-image.png?alt=media&amp;token=f99a55d1-5dff-4082-8482-1ab0bf98aef1">
<p><strong>Input Widgets:</strong></p>
<ul>
<li>Giống <code>Input</code>, nhưng với nội dung được nhập vào bị <code>masked</code> (Che dấu)</li>
<li>Có thể set là: <strong>text</strong> or <strong>numeric values</strong></li>
</ul>
<h2 id="e969797a-f922-446d-963f-1d3402c6aa1a">Form Widget</h2>
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980367333-image.png?alt=media&amp;token=d3d737ae-cec8-4d9f-ac96-099597f5cf56"> 
Đại diện `single record` cho `display` hoặc `editing`
<ul>
<li>No layout constraints: Bound to a Source Record</li>
<li><code>Source</code> để <code>display</code> hoặc <code>editing</code>: Chứa một bản copy của <code>Source Record</code></li>
<li>Hiển thị <code>the copy</code> if có <code>data</code>, Otherwise appears empty</li>
</ul>
<hr>
<p>HẾT…</p>


# Widgets

`Widgets` là `visual elements` mà trang điểm (Make up) cho các `Screens`

###### Các Properties !important (ít nhất một)

- Source data
- Behavior
- Styles

---

## Text Widget

<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667979980695-image.png?alt=media&token=8223cc7f-c0b5-4dcb-8fe0-0bbf2ff996e0">

- `Text Widget` :: Hiển thị text
- `Text` property Xác định những gì xuất hiện trên `Screen`
- Hiển thị các giá trị cố định, không thay đổi dựa trên DB

---

## Expression Widget

<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667979936895-image.png?alt=media&token=d2949f5e-1557-43b2-bbf5-b72e3a1c1cdf">

- `Expression Widget` :: Hiển thị giá trị **tính toán**, tính trong `Runtime`

- Hiển thị các giá trị động từ `DB` lên

## Image Widget

<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667979854424-image.png?alt=media&token=cbabef6f-afef-41cc-b6a0-5b0e80bd6489">

`Image Widget`:: Hiển thị một `Image` nằm trên `Screen`, `source` của `image` được định nghĩa tại `Type property`

- Type = "Local Image" :: `Image` phải được đưa vào `module` như một `resource`(Tại Tab **DATA**)
- Type = "External" :: Cho phép truy cập thông qua **URL**
- Type = "Database" :: `Binary Data` Entity attribute, liên kết đến thuộc tính có Type là `Binary Data` của `Entity`

---

## Table Records Widget

`Table Records Widget`::
Hiển thị `multiple records` trong một `Table layout`

- Một `record` tương ứng với một `row`
- Mỗi `cell` chứa các `widgets` khác...
- Bị ràng buộc (Bound) `Source Record List`: Source dữ liệu sẽ được hiển thị
- Chứa một bản `copy` của `Source Record List`: `Copy` là iterated để hiển thị dữ liệu trên `Screen`
  <img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980030817-image.png?alt=media&token=ea380775-c72a-4a24-96e0-a2720dd5244c">

## Đặc điểm Table Records Widget

- Hiển thị tương ứng với các thẻ 'table', chậm hơn `div` vì phải tính toán vị trí hiển thị các cột, hàng ....
- `Accelerators` tạo một `column` cho mỗi `attribute` của `Entity`
- `Initial columns` có thể **THAY ĐỔI**
  `Table toolbar` Cho phép chỉnh sửa `Table`
  - Add new column
  - Delete columns
  - Move columns
- `Widgets` có thể kéo thả giữa các `columns`
- `Styles` cũng có thể **ĐIỀU CHỈNH**

---

## List Records Widget

<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980116153-image.png?alt=media&token=fb15e320-dcf1-46cd-a16e-90ac766fbaf6">
- Hiển thị tương ứng với các thẻ 'div'
- Hiển thị nhiều `records` trong một `free-form layout`.
- `Records` sẽ được tách bởi `Line Separator` (Bộ tách dòng)
- Bị ràng buộc (Bound) `Source Record List`: `Source` dữ liệu sẽ được hiển thị
- Chứa một bản `copy` của `Source Record List`: Bản `copy` là iterated để hiển thị dữ liệu trên `Screen`

## Label and Input Widgets

**Label:**
<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980279902-image.png?alt=media&token=06d6e318-15bc-40d5-b283-a2d7cab1925d">

- `Label` :: sẽ hiển thị bên cạnh `Input Widget`. Tính toán `Value property` và hiển thị `result`.
  Có thể bị ràng buộc với một `Input Widget`: `Mandatory` các `Inputs` gợi ý trực quan trên `Label` tại thời điểm `runtime`

**Input:**

- Cho phép `end-user` `submit data` bằng cách nhập thông tin lên nó
- Ràng buộc đến một `variable` sẽ giữ dữ liệu được nhập bởi `user`
- Có thể set `mandatory`

<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980202792-image.png?alt=media&token=f99a55d1-5dff-4082-8482-1ab0bf98aef1">
  
**Input Widgets:**

- Giống `Input`, nhưng với nội dung được nhập vào bị `masked` (Che dấu)
- Có thể set là: **text** or **numeric values**

## Form Widget

<img style="display: block;margin:0 auto; width:800px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1667980367333-image.png?alt=media&token=d3d737ae-cec8-4d9f-ac96-099597f5cf56"> 
Đại diện `single record` cho `display` hoặc `editing`

- No layout constraints: Bound to a Source Record
- `Source` để `display` hoặc `editing`: Chứa một bản copy của `Source Record`
- Hiển thị `the copy` if có `data`, Otherwise appears empty

---

HẾT..


Widgets

Text Widget

Expression Widget

Image Widget

Table Records Widget

Đặc điểm Table Records Widget

List Records Widget

Label and Input Widgets

Form Widget

💤 [#7] Widgets in Screen 1

<h1 id="1832027f-3fcd-4391-b968-e9ec57e27966">PK và FK</h1>
<p><code>Relationships</code> có thể được xem là <code>important</code> như chính <code>data itself</code></p>
<h2 id="bd652040-e728-48bc-baa3-8210ce3e603f">⭕Entity Identifier (PK)</h2>
<ul>
<li>Mỗi <code>Entity</code> <strong>PHẢI</strong> có một <code>Identifier</code> để định danh cho chính nó và cho phép kết nối relationships.</li>
<li><code>Identifier</code> là Primary key của Table tương ứng trong DB</li>
</ul>
<h3>Đặc điểm của Identifier</h3>
<ul>
<li><code>Id</code> là kiểu <code>long integer</code> và tự động tăng (Auto number)</li>
<li><code>Id</code> là <strong>BẮT BUỘC</strong> (Mandatory)</li>
<li>Có thể <em>name</em> của <code>Id</code> thành một <em>name</em></li>
<li>Các <code>Type</code> có thể làm <code>Id</code>:
<ul>
<li>Text</li>
<li>Integer / Long Integer</li>
<li>Entity Identifier (Đang nói tới FK)</li>
</ul>
</li>
</ul>
<p>Lưu ý rằng:</p>
<ul>
<li>OutSystems chỉ hỗ trợ <code>Simple Primary Key</code></li>
<li><strong>KHÔNG HỖ TRỢ</strong> khoá tổ hợp</li>
</ul>
<hr>
<h2 id="add99f5e-ab92-4c3c-a7e8-3c4c11708051">🛑Referencing Data (FK)</h2>
<h3>Mô tả quan hệ 1-to-Many giữa A và B</h3>
<p>Trong trường hợp <strong>1(A)-to-Many(B)</strong></p>
<p><code>Entities A</code> có thể <code>referenced</code> với <code>Entities B</code> thông qua <code>Entity identifier</code> của <code>B</code>. Lúc này <code>Entities A</code> sẽ có khoá ngoại <code>FK</code> chính là <code>PK</code> của <code>Entities B</code></p>
<ul>
<li>Tạo một <code>atribute A</code> trong <code>Entities A</code> cái mà muốn đặt là <code>FK</code>, nó <strong>BẮT BUỘC</strong> có kiểu là <code>Entity Identifier</code> của <code>Entities B</code></li>
<li>Thuộc tính <code>mandatory</code> của <code>atribute A</code>có thể là: YES/NO</li>
<li><code>Static Entities</code> chỉ có thể <code>reference</code> với các <code>Static Entities</code> khác</li>
</ul>
<h3>Giá trị mặc định</h3>
<p><code>NullIdentifier()</code> là giá trị mặc định cho <code>reference attributes</code></p>
<hr>
<h1 id="ed492a78-cc7a-402f-acde-2096fa74c0f9">Tất cả Relationships</h1>
<h2 id="c307f144-a940-4515-a689-7ebf700acad7">1️⃣ to 1️⃣</h2>
<h3>Mô tả quan hệ 1 to 1</h3>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668014566948-image.png?alt=media&amp;token=55315aa1-02bf-46de-aae4-8ec905bfcb93">
<p>Có 2 đối tượng: <strong>Receipt</strong> (Biên nhân) và <strong>Order</strong> (Đơn hàng)</p>
<ul>
<li>Mỗi <code>Receipt</code> thuộc về một <code>Order</code></li>
<li>Mỗi <code>Order</code> có nhiều nhất một <code>Receipt</code></li>
</ul>
<p>Lúc này chúng ta gọi đây là quan hệ <code>1-to-1</code></p>
<ul>
<li>
<p>Tạo ra Entity <code>OrderReceipt</code> Là một <code>extension</code> (Phần mở rộng) của <code>Order</code></p>
</li>
<li>
<p><code>OrderReceipt</code> có một <code>reference</code> là <code>Id</code> có kiểu là <code>Order Indentity</code> <strong>vừa là PK vừa là PK</strong></p>
</li>
</ul>
<h3>Lưu ý:</h3>
<ul>
<li><code>Order Identifier</code> phải setting <code>Mandatory</code> là <strong>YES</strong></li>
<li>Có thể <code>gộp</code> thành 1 <code>Entity duy nhất</code>, nhưng có một số trường hợp phải tách ra.</li>
</ul>
<hr>
<h2 id="072ec8db-2c87-44ea-8d04-397d98ea26a8">1️⃣ to Many</h2>
<h3>Mô tả quan hệ 1 to many</h3>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668014679018-image.png?alt=media&amp;token=b616fbc7-bdd0-4751-8565-5e5ab5a09d61">
<ul>
<li>Một <code>Order</code> được yêu cầu bởi một <code>Customer</code></li>
<li>Một <code>Customer</code> có thể đặt nhiều <code>Orders</code></li>
</ul>
<p>Lúc này chúng ta gọi đây là quan hệ <code>1-to-Many</code>, trong đó 1 là <code>Customer</code>, Many là <code>Orders</code></p>
<h3>Cách triển khai trong OutSystem</h3>
<ul>
<li><code>Order Entity</code> có một <code>reference</code> đến thuộc tính có kiểu <code>Customer Identifier</code> (<strong>RequestedBy</strong>)</li>
<li><code>mandatory</code> của <code>Reference attribute</code> có thể YES hoặc NO.</li>
<li>If <code>mandatory</code> là NO, một vài <code>Orders</code> sẽ không có <code>Customer</code> (<strong>RequestedBy</strong>)</li>
</ul>
<hr>
<h2 id="37f40ba7-00d9-4e0d-b0eb-51632b2ab4b8">Many to Many</h2>
<h3>Mô tả quan hệ Many to Many</h3>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668015021990-image.png?alt=media&amp;token=7d10ed13-c7df-42ae-a1e2-23c2fc2271e0">
<ul>
<li>Mỗi <code>Product</code> có thể nằm trong nhiều <code>Orders</code></li>
<li>Mỗi <code>Order</code> có thể có nhiều <code>Products</code></li>
</ul>
<p>Lúc này chúng ta gọi đây là quan hệ <code>Many-to-Many</code><br>
Nên <strong>BẮT BUỘC</strong> phải tạo ra <code>OrderProduct</code> (gọi là <code>Junction Entity</code>) làm trung gian để lưu trữ thông tin <strong>Đặt hàng</strong></p>
<h3>Cách triển khai trong OutSystem</h3>
<ul>
<li>Cần Reference <code>OrderId</code> trong <code>OrderProduct</code> có <code>Type</code> là <code>Order Identifier</code></li>
<li>Cần Reference <code>ProductId</code> trong <code>OrderProduct</code> có <code>Type</code> là <code>Product Identifier</code></li>
</ul>
<hr>
<h2 id="62571499-c010-4b1f-8102-c041fa74f856">Master/Detail Entities (Cách gọi tên)</h2>
<ul>
<li><code>Detail Entity</code> <strong>references</strong> <code>Master Entity</code></li>
<li>Hay có thể nói <code>Detail Entity</code> có một <strong>reference</strong> đến <code>attribute</code> có type là <code>MasterEntity Identifier</code></li>
<li>Một <code>Entity</code> có khả năng có nhiều <code>reference attributes</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668014679018-image.png?alt=media&amp;token=b616fbc7-bdd0-4751-8565-5e5ab5a09d61">
<p><code>Customers</code> là nhiều =&gt; <code> Master Entity</code><br>
<code>Orders </code> là một =&gt; <code>Detail Entity</code></p>
<hr>
<h2 id="442ea318-23cb-41b4-8cf2-cb9d2d3608d7">TIPS Tránh trùng lặp</h2>
<p>● Định nghĩa <code>Reference</code> là <code>Unique</code><br>
● Kết hợp một hoặc nhiều <code>Reference</code></p>
<h2 id="f8d7db12-46bc-4521-a9a8-d7eab4411c44">Extension Entity (1 to 1)</h2>
<ul>
<li><code>Entity A</code> Chia sẻ <code>EntityA identifier</code> của nó trên cơ sở chính nó phải là <code>Entity</code>.</li>
<li><code>Entity B</code> có <code>atribute reference</code> đến <code>EntityA identifier</code>, và sử dụng chính <code>atribute reference</code> đó làm khoá chính (PK)</li>
</ul>
<p>Hai <code>Entities</code> có thể được hợp nhất<br>
Thường tách ra vì lý do:</p>
<ul>
<li>Các vấn đề <strong>Performance</strong></li>
<li><code>Base Entity</code> là read only (<code>Static Entity</code>)</li>
</ul>
<hr>
<h2 id="2e8cfad8-3c6c-4410-8125-a90bf0ee5a56">Junction Entity (Many-to-Many)</h2>
<p><strong>PHẢI</strong> có ít nhất các attributes: 1 <code>identifier</code> (PK) và FK cho mỗi <code>Master Entity</code> (parent entity)</p>
<ul>
<li>Unique Index với cả hai <code>reference attributes</code> có thể <code>hữu ích</code></li>
</ul>
<hr>
<h2 id="75676400-9758-4722-970a-1b16ef1301b2">! Referential Integrity (Delete rule)</h2>
<ul>
<li>Là tính toàn vẹn của tham chiếu</li>
<li><code>Delete Rule</code> là thuộc tính của <code>reference attribute</code></li>
<li>Khi <strong>delete</strong> <code>record</code> trong <code>Master Entity</code>, thì <code>record</code> trong <code>Detail Entity</code> thay đổi như thế nào?</li>
</ul>
<p><strong>LƯU Ý:</strong> <code>Static Entity</code> không có <code>Delete rule</code><br>
<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668016069210-image.png?alt=media&amp;token=81fed0a7-5cf4-48be-a056-1f21bc662a27"></p>
<h3>Ví dụ : Entity (Customer)</h3>
<ul>
<li><strong>Protect</strong> :: không cho phép <strong>delete</strong> <code>record</code><br>
<strong>Khi delete Customer:</strong> Customer có ít nhất 1 Orders <code>reference</code> đến nó thì <strong>KHÔNG ĐƯỢC PHÉP</strong> <code>deleted</code></li>
<li><strong>Delete</strong> :: deletes record và cascades delete all records mà reference đến nó đều bị <code>delete</code><br>
<strong>Khi delete Customer:</strong> Customer và all Orders <code>reference</code> customer đều bị deleted</li>
<li><strong>Ignore</strong> :: Không đảm báo tính toàn vẹn của tham chiếu<br>
<strong>Khi delete Customer:</strong> Customer bị deleted. Orders are kept</li>
</ul>
<hr>
<h1 id="19d52400-bc46-4c89-858b-89a544f8f1d1">! Indexes</h1>
<p>Tăng tốc độ truy xuất data trên một số <code>attributes</code>chỉ định<br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668016017134-image.png?alt=media&amp;token=5517d7c0-c39f-43f1-85c4-0b35c0254729"></p>
<ul>
<li><code>Id</code> đã được tự động đánh <code>index</code></li>
<li>Tốc độ write <strong>GIẢM</strong>, do phải làm thêm 1 công việc là đánh <code>index</code></li>
<li>Các attribute được đánh <code>index</code>, để <strong>TĂNG</strong> tốc độ <strong>truy xuất</strong></li>
</ul>
<p><strong>Ngoài ra:</strong><br>
Muốn <code>Unique</code> cho trường hợp thì <strong>BẮT BUỘC CHỈ CÓ MỘT CÁCH</strong> Đánh Indexs</p>
<hr>
<h1 id="dbc35f48-8b86-4b74-a4b9-6c3b92e982a8">Entity Diagrams</h1>
<p><img src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668016148066-image.png?alt=media&amp;token=724ae4b0-1e2b-456d-b0d7-866920a29f7f" alt="image.png"><br>
<strong>Entity Diagram</strong> thể hiện được:</p>
<ul>
<li>Entities</li>
<li>Relationships</li>
<li>Delete Rules :: Protect[Black], Delete[Delete], Ignore[Opacity]</li>
</ul>
<hr>
<p>HẾT.</p>


# PK và FK

`Relationships` có thể được xem là `important` như chính `data itself`

## ⭕Entity Identifier (PK)

- Mỗi `Entity` **PHẢI** có một `Identifier` để định danh cho chính nó và cho phép kết nối relationships.
- `Identifier` là Primary key của Table tương ứng trong DB

### Đặc điểm của Identifier

- `Id` là kiểu `long integer` và tự động tăng (Auto number)
- `Id` là **BẮT BUỘC** (Mandatory)
- Có thể _name_ của `Id` thành một _name_
- Các `Type` có thể làm `Id`:
  - Text
  - Integer / Long Integer
  - Entity Identifier (Đang nói tới FK)

Lưu ý rằng:

- OutSystems chỉ hỗ trợ `Simple Primary Key`
- **KHÔNG HỖ TRỢ** khoá tổ hợp

---

## 🛑Referencing Data (FK)

### Mô tả quan hệ 1-to-Many giữa A và B

Trong trường hợp **1(A)-to-Many(B)**

`Entities A` có thể `referenced` với `Entities B` thông qua `Entity identifier` của `B`. Lúc này `Entities A` sẽ có khoá ngoại `FK` chính là `PK` của `Entities B`

- Tạo một `atribute A` trong `Entities A` cái mà muốn đặt là `FK`, nó **BẮT BUỘC** có kiểu là `Entity Identifier` của `Entities B`
- Thuộc tính `mandatory` của `atribute A`có thể là: YES/NO
- `Static Entities` chỉ có thể `reference` với các `Static Entities` khác

### Giá trị mặc định

`NullIdentifier()` là giá trị mặc định cho `reference attributes`

---

# Tất cả Relationships

## 1️⃣ to 1️⃣

### Mô tả quan hệ 1 to 1

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668014566948-image.png?alt=media&token=55315aa1-02bf-46de-aae4-8ec905bfcb93">

Có 2 đối tượng: **Receipt** (Biên nhân) và **Order** (Đơn hàng)

- Mỗi `Receipt` thuộc về một `Order`
- Mỗi `Order` có nhiều nhất một `Receipt`

Lúc này chúng ta gọi đây là quan hệ `1-to-1`

- Tạo ra Entity `OrderReceipt` Là một `extension` (Phần mở rộng) của `Order`

- `OrderReceipt` có một `reference` là `Id` có kiểu là `Order Indentity` **vừa là PK vừa là PK**

### Lưu ý:

- `Order Identifier` phải setting `Mandatory` là **YES**
- Có thể `gộp` thành 1 `Entity duy nhất`, nhưng có một số trường hợp phải tách ra.

---

## 1️⃣ to Many

### Mô tả quan hệ 1 to many

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668014679018-image.png?alt=media&token=b616fbc7-bdd0-4751-8565-5e5ab5a09d61">

- Một `Order` được yêu cầu bởi một `Customer`
- Một `Customer` có thể đặt nhiều `Orders`

Lúc này chúng ta gọi đây là quan hệ `1-to-Many`, trong đó 1 là `Customer`, Many là `Orders`

### Cách triển khai trong OutSystem

- `Order Entity` có một `reference` đến thuộc tính có kiểu `Customer Identifier` (**RequestedBy**)
- `mandatory` của `Reference attribute` có thể YES hoặc NO.
- If `mandatory` là NO, một vài `Orders` sẽ không có `Customer` (**RequestedBy**)

---

## Many to Many

### Mô tả quan hệ Many to Many

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668015021990-image.png?alt=media&token=7d10ed13-c7df-42ae-a1e2-23c2fc2271e0">

- Mỗi `Product` có thể nằm trong nhiều `Orders`
- Mỗi `Order` có thể có nhiều `Products`

Lúc này chúng ta gọi đây là quan hệ `Many-to-Many`
Nên **BẮT BUỘC** phải tạo ra `OrderProduct` (gọi là `Junction Entity`) làm trung gian để lưu trữ thông tin **Đặt hàng**

### Cách triển khai trong OutSystem

- Cần Reference `OrderId` trong `OrderProduct` có `Type` là `Order Identifier`
- Cần Reference `ProductId` trong `OrderProduct` có `Type` là `Product Identifier`

---

## Master/Detail Entities (Cách gọi tên)

- `Detail Entity` **references** `Master Entity`
- Hay có thể nói `Detail Entity` có một **reference** đến `attribute` có type là `MasterEntity Identifier`
- Một `Entity` có khả năng có nhiều `reference attributes`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668014679018-image.png?alt=media&token=b616fbc7-bdd0-4751-8565-5e5ab5a09d61">

`Customers` là nhiều => ` Master Entity`
`Orders ` là một => `Detail Entity`

---

## TIPS Tránh trùng lặp

● Định nghĩa `Reference` là `Unique`
● Kết hợp một hoặc nhiều `Reference`

## Extension Entity (1 to 1)

- `Entity A` Chia sẻ `EntityA identifier` của nó trên cơ sở chính nó phải là `Entity`.
- `Entity B` có `atribute reference` đến `EntityA identifier`, và sử dụng chính `atribute reference` đó làm khoá chính (PK)

Hai `Entities` có thể được hợp nhất
Thường tách ra vì lý do:

- Các vấn đề **Performance**
- `Base Entity` là read only (`Static Entity`)

---

## Junction Entity (Many-to-Many)

**PHẢI** có ít nhất các attributes: 1 `identifier` (PK) và FK cho mỗi `Master Entity` (parent entity)

- Unique Index với cả hai `reference attributes` có thể `hữu ích`

---

## ! Referential Integrity (Delete rule)

- Là tính toàn vẹn của tham chiếu
- `Delete Rule` là thuộc tính của `reference attribute`
- Khi **delete** `record` trong `Master Entity`, thì `record` trong `Detail Entity` thay đổi như thế nào?

**LƯU Ý:** `Static Entity` không có `Delete rule`
<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668016069210-image.png?alt=media&token=81fed0a7-5cf4-48be-a056-1f21bc662a27">

### Ví dụ : Entity (Customer)

- **Protect** :: không cho phép **delete** `record`
  **Khi delete Customer:** Customer có ít nhất 1 Orders `reference` đến nó thì **KHÔNG ĐƯỢC PHÉP** `deleted`
- **Delete** :: deletes record và cascades delete all records mà reference đến nó đều bị `delete`
  **Khi delete Customer:** Customer và all Orders `reference` customer đều bị deleted
- **Ignore** :: Không đảm báo tính toàn vẹn của tham chiếu
  **Khi delete Customer:** Customer bị deleted. Orders are kept

---

# ! Indexes

Tăng tốc độ truy xuất data trên một số `attributes`chỉ định
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668016017134-image.png?alt=media&token=5517d7c0-c39f-43f1-85c4-0b35c0254729">

- `Id` đã được tự động đánh `index`
- Tốc độ write **GIẢM**, do phải làm thêm 1 công việc là đánh `index`
- Các attribute được đánh `index`, để **TĂNG** tốc độ **truy xuất**

**Ngoài ra:**
Muốn `Unique` cho trường hợp thì **BẮT BUỘC CHỈ CÓ MỘT CÁCH** Đánh Indexs

---

# Entity Diagrams

![image.png](https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668016148066-image.png?alt=media&token=724ae4b0-1e2b-456d-b0d7-866920a29f7f)
**Entity Diagram** thể hiện được:

- Entities
- Relationships
- Delete Rules :: Protect[Black], Delete[Delete], Ignore[Opacity]

---

HẾT.


PK và FK

⭕Entity Identifier (PK)

🛑Referencing Data (FK)

Tất cả Relationships

1️⃣ to 1️⃣

1️⃣ to Many

Many to Many

Master/Detail Entities (Cách gọi tên)

TIPS Tránh trùng lặp

Extension Entity (1 to 1)

Junction Entity (Many-to-Many)

! Referential Integrity (Delete rule)

! Indexes

Entity Diagrams

⚜ [#8] Modeling Data Relationships

<h1 id="bc7a20b6-a144-413b-91ab-81af0fe7a8ca">Interacting with the app</h1>
<ul>
<li>When using web applications, end-users don’t just type URLs and wait for the result</li>
<li>It is very common to have other forms of interactions
<ul>
<li>Following links</li>
<li>Filling in forms</li>
<li>Clicking buttons<br>
Each time the user navigates to a new page, or submits data do the server, a new request / response cycle starts</li>
</ul>
</li>
</ul>
<hr>
<h2 id="914b544b-cbfa-4959-9313-b70a01d80a79">Link Widget</h2>
<ul>
<li>Links and Buttons have similar behaviors</li>
<li>Links can enclose other widgets</li>
<li>Visually more flexible than Buttons</li>
</ul>
<p>On Click: Either submits a request to call an Action or navigates to a Screen Method property determines how data is submitted to the Server<br>
Destination property can be set to a:</p>
<ul>
<li>Screen Action</li>
<li>Destination</li>
</ul>
<hr>
<h2 id="b6dcecaa-e33a-4af2-a623-c0755ae0003b">Button Widget</h2>
<h1 id="df885747-bbc9-499b-a074-d54da2cd6b4e">Navigate Screen Lifecycle</h1>
<p>Uses HTTP GET Method</p>
<ul>
<li>Requests a specific resource</li>
<li>Does not submit data to the server
<ul>
<li>Parameters are sent and displayed in the URL</li>
<li>Form Input values are not sent in the request<br>
Browser displays the Destination URL<br>
Link / Button Destination can be:</li>
</ul>
</li>
<li>Target Screen</li>
<li>External URL</li>
</ul>
<hr>
<h1 id="01fdde40-13c7-41e1-abe8-31a716adddeb">Submit Screen Lifecycle</h1>
<p>Uses HTTP POST Method<br>
Submits data to the server in the request</p>
<ul>
<li>Upload a file</li>
<li>Send Form Input fields data</li>
</ul>
<p>Browser shows URL of the Screen that handles the submit request<br>
Link / Button Destination can be:</p>
<ul>
<li>Screen Action (submits to current Screen)</li>
<li>Target Screen</li>
<li>External URL</li>
</ul>
<p>With the Submit Method, the Destination can be a Screen Action<br>
● Runs when the Button / Link is clicked<br>
A Screen Action has a flow of statements that are executed in order<br>
● Has access to all elements in the Screen scope<br>
○ Widgets<br>
○ Preparation elements<br>
○ Screen Variables<br>
● The last node of the Action has impact on the Screen lifecycle</p>
<hr>
<h3>Finishing the Screen Action</h3>
<p>The last widget of a Screen Action flow greatly influences the lifecycle<br>
There are several possibilities<br>
● Stay on the same Screen<br>
○ End, Download (of a file)<br>
● Navigate to a Screen<br>
○ Destination, Current Screen, External URL<br>
● Raise an Exception</p>
<hr>
<h2 id="6cb9bc38-170c-494f-a4b6-73c41ceaf897">Submit to the current Screen</h2>
<p>The application stays in the same Screen in both cases:</p>
<ul>
<li>Preparation of the Screen runs</li>
<li>Entire Screen will be rebuilt<br>
What’s the difference?</li>
<li>End Node :: Values of Screen Variables and Widgets are preserved</li>
<li>Destination (Current Screen) (Chuyển hướng trang 203)<br>
○ Values of Screen Variables and Widgets are reset to their default values</li>
</ul>
<h1 id="6458536d-cccd-4522-a2d5-1fc03bc3c6ed">Download Widget</h1>
<p>Allows the end-user to download a file</p>
<ul>
<li>Can be saved<br>
Download widget properties</li>
<li>File Content: Expect binary data</li>
<li>File Name: Text of the file name</li>
<li>Save to Disk: Or just display the file<br>
Ends the Action Flow</li>
<li>There can be no other statements after it</li>
<li>Preparation does not run again</li>
</ul>
<hr>
<p>HẾT.</p>


# Interacting with the app

- When using web applications, end-users don’t just type URLs and wait for the result
- It is very common to have other forms of interactions
  - Following links
  - Filling in forms
  - Clicking buttons
    Each time the user navigates to a new page, or submits data do the server, a new request / response cycle starts

---

## Link Widget

- Links and Buttons have similar behaviors
- Links can enclose other widgets
- Visually more flexible than Buttons

On Click: Either submits a request to call an Action or navigates to a Screen Method property determines how data is submitted to the Server
Destination property can be set to a:

- Screen Action
- Destination

---

## Button Widget

# Navigate Screen Lifecycle

Uses HTTP GET Method

- Requests a specific resource
- Does not submit data to the server
  - Parameters are sent and displayed in the URL
  - Form Input values are not sent in the request
    Browser displays the Destination URL
    Link / Button Destination can be:
- Target Screen
- External URL

---

# Submit Screen Lifecycle

Uses HTTP POST Method
Submits data to the server in the request

- Upload a file
- Send Form Input fields data

Browser shows URL of the Screen that handles the submit request
Link / Button Destination can be:

- Screen Action (submits to current Screen)
- Target Screen
- External URL

With the Submit Method, the Destination can be a Screen Action
● Runs when the Button / Link is clicked
A Screen Action has a flow of statements that are executed in order
● Has access to all elements in the Screen scope
○ Widgets
○ Preparation elements
○ Screen Variables
● The last node of the Action has impact on the Screen lifecycle

---

### Finishing the Screen Action

The last widget of a Screen Action flow greatly influences the lifecycle
There are several possibilities
● Stay on the same Screen
○ End, Download (of a file)
● Navigate to a Screen
○ Destination, Current Screen, External URL
● Raise an Exception

---

## Submit to the current Screen

The application stays in the same Screen in both cases:

- Preparation of the Screen runs
- Entire Screen will be rebuilt
  What’s the difference?
- End Node :: Values of Screen Variables and Widgets are preserved
- Destination (Current Screen) (Chuyển hướng trang 203)
  ○ Values of Screen Variables and Widgets are reset to their default values

# Download Widget

Allows the end-user to download a file

- Can be saved
  Download widget properties
- File Content: Expect binary data
- File Name: Text of the file name
- Save to Disk: Or just display the file
  Ends the Action Flow
- There can be no other statements after it
- Preparation does not run again

---

HẾT.


Interacting with the app

Link Widget

Button Widget

Navigate Screen Lifecycle

Submit Screen Lifecycle

Submit to the current Screen

Download Widget

💛 [#9] Screen Interactions (Navigate, Submit, lifecycle)

<h1 id="f14f8cf7-c207-48a4-9ccf-eb8424e7c595">Advanced Queries</h1>
<p>Lấy dữ liệu chính xác từ cơ sở dữ liệu thường có thể rất phức tạp. Không thể dùng các <code>Action</code> bình thường được.<br>
Có nhiều tùy chọn nâng cao có sẵn trong <code>Aggregates</code>:</p>
<ul>
<li>Multiple Sources</li>
<li>Calculated attributes</li>
<li>Aggregated functions<br>
Cũng có thể viết <code>SQL statements</code>: có <code>SQL Tool</code></li>
</ul>
<h1 id="48ff50d7-2b46-42a4-8253-da843cd8efd3">Aggregates</h1>
<h3>Multiple Sources</h3>
<ul>
<li>Có thể có nhiều <code>Sources</code> trong một <code>Aggregates</code><br>
Khi <code>Entities</code> có <code>relationships</code>, <strong>OutSystems</strong> tự động tạo ra <code>Joins</code></li>
</ul>
<h3>Joins</h3>
<p><code>Aggregates</code> Hỗ trợ ba loại Joins</p>
<ul>
<li>Only With :: (SQL INNER JOIN)</li>
<li>With or Without :: (SQL LEFT JOIN)</li>
<li>With :: (SQL FULL OUTER JOIN)</li>
</ul>
<h2 id="9308732d-fc0b-40ee-b874-8fae8ab84630">Calculated Attributes</h2>
<ul>
<li>Custom <code>attributes</code> tính toán từ <code>attributes</code>khác :: trong cùng một truy vấn (<code>Aggregates</code>)</li>
<li>Trở thành một phần đầu ra của truy vấn</li>
</ul>
<h3>Hiding Columns</h3>
<ul>
<li>Ẩn được các phần tử của câu truy vấn, Không làm ảnh hưởng đến kết quả đầu ra</li>
<li>Vẫn là một phần của <code>output</code>, tuy nhiện bị ẩn đi khi ra giao diện</li>
</ul>
<h2 id="ac06d55e-b092-469a-acb8-abe79c324c36">Aggregating Records (Group by)</h2>
<p>Group multiple rows together (Group by Orders to find # of Products per Order)</p>
<ul>
<li><code>Right click</code> =&gt; Group by …</li>
<li>Hỗ trợ <code>Filter Group</code> (<strong>HAVING trong SQL</strong>)</li>
<li>Hỗ trợ các <code>functions</code>: Sum, Average, Min, Max, Count</li>
</ul>
<hr>
<h1 id="4e3ad7ff-6fca-4b67-9d54-a130f91ba6ed">SQL Tool</h1>
<h2 id="4e2a190b-5dde-4c55-ae04-b2ca1b0ae9b5">Overview</h2>
<p>Cho phép viết <code>SQL statements</code></p>
<ul>
<li>Inputs và outputs được chỉ định một các trực quan</li>
<li>Câu lệnh <code>SQL</code> được viết bằng tay:
<ul>
<li>SQL syntax checking</li>
<li>Color highlighting</li>
<li>SQL is DBMS-specific</li>
</ul>
</li>
<li>Sử dụng <code>abstract names</code> vì <code>Entities</code> và <code>Attributes</code>
<ul>
<li>Gọi <code>Entity</code> bằng cách {Entity}</li>
<li>Gọi <code>Attribute</code> bằng cách {Entity}.[Attribute]</li>
<li>Gọi <code>Variable</code> bằng cách @NameVariable</li>
</ul>
</li>
</ul>
<h2 id="6d2485a9-609e-41f8-a774-67cb3e4754cd">Input / Outputs</h2>
<ul>
<li>Thông qua <code>Parameters</code> truyền thông tin cho <code>Query SQL</code></li>
</ul>
<h3>Outputs</h3>
<ul>
<li><code>Output Entities / Structures</code> là đầu ra của <code>Excuted SQL</code></li>
<li><code>Mandatory</code> phải có ít nhất <strong>một</strong>
<ul>
<li>Cần phải <code>map</code> vowis <code>columns</code> bên trong <code>SELECT clause</code></li>
<li>Co thể sử dụng <code>Structures</code>(gọi là dummy output) và <code>Entities</code> (Cần tự định nghĩa tại Tab <code>Data</code>)</li>
<li><code>Output</code> giống như một <code>Aggregates</code> =&gt; (List, Count)</li>
</ul>
</li>
</ul>
<h2 id="7289d3bc-71e7-49f5-b360-9214e7084b4e">Testing Queries</h2>
<ul>
<li>Chỉ để <code>test</code> không ảnh hưởng đến kết quả <code>Output</code></li>
<li>Truyền các <code>Input paramater</code> để thực hiện <code>test</code> mà không cần <code>Publish</code> (<strong>NGON😂</strong>)</li>
</ul>
<h2 id="5235f7b1-3f0c-4d1a-b97e-fb570ebf8f1b">Non-Select Queries</h2>
<p><code>SQL Tools</code> cũng có thể được sử dụng cho <code>non-SELECT</code> các câu lệnh:</p>
<ul>
<li>Delete</li>
<li>Insert</li>
<li>Update</li>
</ul>
<p>Cần chọn <code>Output</code>, và việc này không có ý nghĩa. Bởi vì nó sẽ chẳng <strong>Return</strong> về 1 <code>Output</code> nào cả. Chọn cho vui, và nó được gọi là <strong>“dummy”</strong></p>
<hr>
<p>HẾT.</p>


# Advanced Queries

Lấy dữ liệu chính xác từ cơ sở dữ liệu thường có thể rất phức tạp. Không thể dùng các `Action` bình thường được.
Có nhiều tùy chọn nâng cao có sẵn trong `Aggregates`:

- Multiple Sources
- Calculated attributes
- Aggregated functions
  Cũng có thể viết `SQL statements`: có `SQL Tool`

# Aggregates

### Multiple Sources

- Có thể có nhiều `Sources` trong một `Aggregates`
  Khi `Entities` có `relationships`, **OutSystems** tự động tạo ra `Joins`

### Joins

`Aggregates` Hỗ trợ ba loại Joins

- Only With :: (SQL INNER JOIN)
- With or Without :: (SQL LEFT JOIN)
- With :: (SQL FULL OUTER JOIN)

## Calculated Attributes

- Custom `attributes` tính toán từ `attributes`khác :: trong cùng một truy vấn (`Aggregates`)
- Trở thành một phần đầu ra của truy vấn

### Hiding Columns

- Ẩn được các phần tử của câu truy vấn, Không làm ảnh hưởng đến kết quả đầu ra
- Vẫn là một phần của `output`, tuy nhiện bị ẩn đi khi ra giao diện

## Aggregating Records (Group by)

Group multiple rows together (Group by Orders to find # of Products per Order)

- `Right click` => Group by ...
- Hỗ trợ `Filter Group` (**HAVING trong SQL**)
- Hỗ trợ các `functions`: Sum, Average, Min, Max, Count

---

# SQL Tool

## Overview

Cho phép viết `SQL statements`

- Inputs và outputs được chỉ định một các trực quan
- Câu lệnh `SQL` được viết bằng tay:
  - SQL syntax checking
  - Color highlighting
  - SQL is DBMS-specific
- Sử dụng `abstract names` vì `Entities` và `Attributes`
  - Gọi `Entity` bằng cách {Entity}
  - Gọi `Attribute` bằng cách {Entity}.[Attribute]
  - Gọi `Variable` bằng cách @NameVariable

## Input / Outputs

- Thông qua `Parameters` truyền thông tin cho `Query SQL`

### Outputs

- `Output Entities / Structures` là đầu ra của `Excuted SQL`
- `Mandatory` phải có ít nhất **một**
  - Cần phải `map` vowis `columns` bên trong `SELECT clause`
  - Co thể sử dụng `Structures`(gọi là dummy output) và `Entities` (Cần tự định nghĩa tại Tab `Data`)
  - `Output` giống như một `Aggregates` => (List, Count)

## Testing Queries

- Chỉ để `test` không ảnh hưởng đến kết quả `Output`
- Truyền các `Input paramater` để thực hiện `test` mà không cần `Publish` (**NGON😂**)

## Non-Select Queries

`SQL Tools` cũng có thể được sử dụng cho `non-SELECT` các câu lệnh:

- Delete
- Insert
- Update

Cần chọn `Output`, và việc này không có ý nghĩa. Bởi vì nó sẽ chẳng **Return** về 1 `Output` nào cả. Chọn cho vui, và nó được gọi là **"dummy"**

---

HẾT.


Advanced Queries

Calculated Attributes

Aggregating Records (Group by)

SQL Tool

Overview

Input / Outputs

Testing Queries

Non-Select Queries

🔞 [#10] Advanced Data Queries

<h1 id="583d2d13-ad24-4f11-a2d9-dc1f32d66d8b">Widgets</h1>
<p><code>Widgets</code> là <code>visual elements</code> mà trang điểm (Make up) cho các <code>Screens</code></p>
<h2 id="83f65dbd-678b-49f4-8793-cd1eb88466c4">Container Widget</h2>
<ul>
<li>Tạo ra nhóm và áp dụng một <code>style</code> cho <code>widgets</code></li>
<li>Height dựa trên nội dung</li>
</ul>
<p><strong>Tác dụng chính:</strong> Giúp tổ chức <code>layout</code> của <code>Screen</code>, tương đương với thẻ <code>div</code> trong <code>HTML</code></p>
<h2 id="706978ed-c738-41e6-96ab-061eeb64a0aa">If Widget</h2>
<p>Hiển thị <code>content</code> dựa trên một <code>boolean condition</code> (true hoặc false)<br>
Có hai nhánh: <code>True Branch</code> và <code>False Branch</code></p>
<ul>
<li><code>True Branch</code> sẽ được hiển thị, nếu <code>boolean condition</code> == <code>true</code></li>
<li><code>False Branch</code> sẽ được hiển thị, nếu <code>boolean condition</code> == <code>false</code></li>
</ul>
<h2 id="92104226-66e1-4669-8ea3-4f41adec2af3">Check Box Widget</h2>
<ul>
<li>Trường có thể <code>checked</code> or <code>unchecked</code></li>
<li><code>Variable</code> <strong>PHẢI</strong> có <code>Data type</code> == <code>Boolean</code></li>
</ul>
<h2 id="eb5829b1-b7f1-4bc2-a82a-caa0d0d4bd30">Radio Button Widget</h2>
<ul>
<li>Nhiều <code>Radio Button</code> hoạt động cùng nhau cần cung cấp options (group)</li>
<li>Những <code>Radio Buttons</code> giống nhau về <code>variable</code>, mang ý nghĩa là sẽ định nghĩa một <code>group</code></li>
<li><code>Value</code> của <code>Radio Button</code> <strong>BẮT BUỘC PHẢI</strong> được gán giá trị</li>
</ul>
<p>Lưu ý:</p>
<ul>
<li><code>variable</code> là tên bến để truyền đi</li>
<li><code>value</code> là giá trị checked/uncheck (True/False)</li>
</ul>
<h2 id="b4d2cd09-b74a-45dd-a0be-fffce95685ce">Check Box Widget</h2>
<p>Trường có thể <code>checked</code> or <code>unchecked</code><br>
<code>Variable</code> <strong>PHẢI</strong> có <code>Data type</code> == <code>Boolean</code></p>
<h2 id="07b8ab6b-7387-42d1-912c-3941cde1895c">Combo Box Widget</h2>
<p><code>List</code> các <code>values</code> có thể đến từ các nguồn:</p>
<ul>
<li>Một <code>Entity</code> hoặc <code>Static Entity</code></li>
<li>Một <code>Source Record List</code></li>
<li>Một <code>Special List</code></li>
</ul>
<h3>Dùng với Entity or Static Entity</h3>
<ul>
<li><code>Variable</code> :: Cần khai báo <code>Local Variable</code> là <code>Entity identifier</code>(Giữ giá trị đang chọn)</li>
<li><code>Source Entity</code> :: <code>Static Entity</code></li>
<li>Giá trị hiển thị của <code>Combobox</code> được định nghĩa bởi:
<ul>
<li><code>Label</code> của <code>Entity</code></li>
<li><code>Source Attribute</code> property</li>
</ul>
</li>
</ul>
<h3>Dùng với Source Record List</h3>
<ul>
<li><code>Variable</code> :: Cần khai báo <code>Local Variable</code> là <code>Entity identifier</code>(Giữ giá trị đang chọn)</li>
<li><code>Source Record List </code> :: <code>GetEntity.List</code></li>
<li>Giá trị hiển thị của <code>Combobox</code> được định nghĩa bởi <code>Source Attribute</code> property<br>
Các thuộc tính được tính toán từ các <code>attribute</code> khác</li>
</ul>
<h3>Dùng với Special List</h3>
<ul>
<li><code>Special Variable</code> :: Cần khai báo <code>Local Variable</code> (Giữ giá trị đang chọn)</li>
<li><code>Special List</code> : chứa cặp <code>Value - Option</code>,</li>
</ul>
<p>Trong đó:</p>
<ul>
<li><code>Value</code> là giá trị thực sự của nó</li>
<li><code>Option</code> là <code>label</code> hiển thị ra màn hình</li>
</ul>
<h3>! Sử dụng kết hợp</h3>
<ul>
<li><code>Entity or Static Entity</code> hoặc a <code>Source Record List</code> có thể được kết hợp với các giá trị khác trong <code>Special List</code>.</li>
<li><strong>KHÔNG THỂ</strong> kết hợp cả ba cách cùng một lúc
<ul>
<li><code>Entity or Static Entity</code> và <code>Special List</code></li>
<li><code>Source Record List</code> và <code>Special List</code></li>
</ul>
</li>
</ul>
<hr>
<p>HẾT…</p>


# Widgets

`Widgets` là `visual elements` mà trang điểm (Make up) cho các `Screens`

## Container Widget

- Tạo ra nhóm và áp dụng một `style` cho `widgets`
- Height dựa trên nội dung

**Tác dụng chính:** Giúp tổ chức `layout` của `Screen`, tương đương với thẻ `div` trong `HTML`

## If Widget

Hiển thị `content` dựa trên một `boolean condition` (true hoặc false)
Có hai nhánh: `True Branch` và `False Branch`

- `True Branch` sẽ được hiển thị, nếu `boolean condition` == `true`
- `False Branch` sẽ được hiển thị, nếu `boolean condition` == `false`

## Check Box Widget

- Trường có thể `checked` or `unchecked`
- `Variable` **PHẢI** có `Data type` == `Boolean`

## Radio Button Widget

- Nhiều `Radio Button` hoạt động cùng nhau cần cung cấp options (group)
- Những `Radio Buttons` giống nhau về `variable`, mang ý nghĩa là sẽ định nghĩa một `group`
- `Value` của `Radio Button` **BẮT BUỘC PHẢI** được gán giá trị

Lưu ý:

- `variable` là tên bến để truyền đi
- `value` là giá trị checked/uncheck (True/False)

## Check Box Widget

Trường có thể `checked` or `unchecked`
`Variable` **PHẢI** có `Data type` == `Boolean`

## Combo Box Widget

`List` các `values` có thể đến từ các nguồn:

- Một `Entity` hoặc `Static Entity`
- Một `Source Record List`
- Một `Special List`

### Dùng với Entity or Static Entity

- `Variable` :: Cần khai báo `Local Variable` là `Entity identifier`(Giữ giá trị đang chọn)
- `Source Entity` :: `Static Entity`
- Giá trị hiển thị của `Combobox` được định nghĩa bởi:
  - `Label` của `Entity`
  - `Source Attribute` property

### Dùng với Source Record List

- `Variable` :: Cần khai báo `Local Variable` là `Entity identifier`(Giữ giá trị đang chọn)
- `Source Record List ` :: `GetEntity.List`
- Giá trị hiển thị của `Combobox` được định nghĩa bởi `Source Attribute` property
  Các thuộc tính được tính toán từ các `attribute` khác

### Dùng với Special List

- `Special Variable` :: Cần khai báo `Local Variable` (Giữ giá trị đang chọn)
- `Special List` : chứa cặp `Value - Option`,

Trong đó:

- `Value` là giá trị thực sự của nó
- `Option` là `label` hiển thị ra màn hình

### ! Sử dụng kết hợp

- `Entity or Static Entity` hoặc a `Source Record List` có thể được kết hợp với các giá trị khác trong `Special List`.
- **KHÔNG THỂ** kết hợp cả ba cách cùng một lúc
  - `Entity or Static Entity` và `Special List`
  - `Source Record List` và `Special List`

---

HẾT..


Container Widget

If Widget

Check Box Widget

Radio Button Widget

Combo Box Widget

💤 [#11] Widgets in Screen 2

<h1 id="da36cb66-8f0e-469b-8ebf-bf8cf5d117fd">Actions: Code Reusability</h1>
<p>Tăng khả năng tái sử dụng code (<code>Code Reusability</code>)<br>
Có 3 loại <code>Actions</code> quan trọng:</p>
<ul>
<li><code>Screen Actions</code> :: chỉ có bị ràng buộc <code>Widgets on a Screen</code></li>
<li><code>Server Actions</code> :: có thể được gọi trong <code>any flow</code></li>
<li><code>06 Entity Actions</code> :: OutSystem sẽ tự tạo ra cho mỗi <code>Entities</code><br>
<code>01 Entity Action</code> :: OutSystem sẽ tự tạo ra cho mỗi <code>Static Entities</code></li>
</ul>
<p>Đặc điểm khác nhau:</p>
<ul>
<li><code>Server Actions</code> có thể có nhiều <code>Input</code> và <code>Output</code> và <code>Local</code> <code>Variable</code></li>
<li><code>Screen Actions</code> không có <code>Output Parameters</code></li>
<li><code>Preparation</code> không có <code>Parameters</code> hoặc <code>Variables</code></li>
</ul>
<p>Đặc điểm <code>Server Actions</code>:</p>
<p><code>Server Actions</code> có thể được <code>set</code> như một <code>Function</code></p>
<ul>
<li>Giới hạn trong một <code>Output Parameter</code></li>
<li>Có sẵn hoặc nói cách khác là <strong>CÓ THỂ</strong> sử dụng trong <code>Expressions</code><br>
<img style="display: block;margin:0 auto; width:250px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356302060-image.png?alt=media&amp;token=e397b7d0-5416-4d85-9bd3-78731d275372"></li>
</ul>
<h1 id="b80c6ada-946a-4ad3-9ba6-9ff0ced7218d">Action Flows</h1>
<ul>
<li>Có duy nhất một <code>Start Node</code></li>
<li>Có thể có nhiều hơn một <code>End Node</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356356424-image.png?alt=media&amp;token=e5c9eb15-6d34-4709-a13c-6f957e459be6">
<h2 id="ccc3ffba-63fa-4e0d-a402-948d59379d94">Assign</h2>
<p>Cho phép <code>setting</code> các giá trị cho <code>variables</code> (hoặc <code>parameters</code>)<br>
Một <code>Assign</code> có thể <code>setting</code> các giá trị cho <code>variables</code> (hoặc <code>parameters</code>)</p>
<ul>
<li><code>Values</code> được gán từ trên xuống dưới</li>
<li>Thay đổi xảy ra ngay lập tức</li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356419623-image.png?alt=media&amp;token=282010ae-3fc3-418b-97d9-1db20588bbd2">
<h2 id="6189d181-fae9-4657-a82b-3452a7c4b794">If</h2>
<p>Tạo ra một <code>conditional branching</code> trong <code>Action flow</code></p>
<ul>
<li><code>If condition</code> để đánh giá tính <strong>đúng sai</strong></li>
<li>Chỉ duy nhất một <code>branch</code> được <code>execute</code> dựa trên <code>If condition</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356466378-image.png?alt=media&amp;token=8fe1050c-d9ab-4d21-b35f-de6cd9307b52">
<h2 id="c548a761-30ed-4826-a313-98c2f12e4ffa">Switch</h2>
<p>Tạo ra một <code>conditional branching</code> với nhiều <code>branch</code> trong <code>Action flow</code><br>
● <code>Conditions</code> được đánh giá từ đầu đến cuối cùng<br>
● Chỉ duy nhất <code>first branch</code> có giá trị <code>True</code> hoặc <code>Otherwise branch</code> được <code>execute</code><br>
● <code>Otherwise branch</code> là <strong>BẮT BUỘC</strong></p>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356527266-image.png?alt=media&amp;token=b4c34bb4-5093-4b03-adb4-16a1fabe6450">
<h2 id="f39cae62-ee1c-4d2a-9522-e6be6d6f804b">For Each</h2>
<p>Cho phép <code>iterating</code> thông qua một <code>Record List</code> bên trong <code>Action flow</code></p>
<ul>
<li>(1) <code>Cycle branch</code> được lặp lại cho mỗi <code>record</code> bên trong <code>List</code></li>
<li>(2) <code>The branch</code> phải <code>return</code> đến <code>For Each</code> để tiếp tục vòng lặp</li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356608967-image.png?alt=media&amp;token=69ff5f24-1e96-4649-beef-b44d0d85c1b2">
<h2 id="c97f8648-3765-400d-836b-baf40d484ddd">While loops</h2>
<ul>
<li>Sử dụng một <code>If</code> để đánh giá (evaluate) một <code>loop condition</code></li>
<li><code>The branch</code> phải <code>return</code> đến <code>If</code> để tiếp tục vòng lặp</li>
<li>Hãy cẩn thận với <code>infinite loops</code> nhé!</li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356633839-image.png?alt=media&amp;token=81cf93d4-d1b0-4db1-8a18-8e336daaabb6">
<h1 id="57c08d49-f30a-4a81-b970-6f8d9ab6e96b">Exception Handling</h1>
<ul>
<li>Một <code>Exception</code> bị <code>thrown</code> ra khi một <code>operation</code> fails tại <code>runtime</code></li>
<li><code>Execution</code> được chuyển sang cho một <code>Exception Handler</code></li>
<li>Một <code>Action</code> có thể có nhiều <code>Exception Handler</code><br>
Database Exceptions<br>
Security Exceptions<br>
Custom User Exceptions</li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356678682-image.png?alt=media&amp;token=9ef81b49-49cd-45de-859d-44a35f948f01">
<h2 id="63decd81-6a9d-4511-a67c-3fa314574ec8">Raising Exceptions</h2>
<p>Một <code>Exception</code> có thể <code>raised</code>(chỉ định lên)<br>
Khi một <code>Exception</code> được <code>raised</code>:</p>
<ul>
<li><code>Execution</code> được chuyển sang <code>Exception Handler</code> cụ thể</li>
<li><code>Execution</code> sẽ được <code>Exception Handler</code> tiếp tục xử lý</li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356714102-image.png?alt=media&amp;token=a6484b2b-730f-471a-8bcf-87b34500af1d">
<h2 id="80e0eab0-cfe8-4777-bdb7-ee53ff0977d9">Global Exception Handler</h2>
<p>Nếu một <code>Exception Handler</code> doesn tồn tại trong <code>execution</code> hiện tại</p>
<ul>
<li><code>Server bubbles-up</code> sẽ kiểm tra trong <code>contexts until</code> và tìm ra <code>Exception Handler</code> phù hợp<br>
Module Global Exception Handler</li>
<li>Ở tại <code>Common Flow</code> (default)</li>
<li>Mức cao nhất có thể <code>bubble-up</code></li>
<li>Nên handle <code>all exceptions</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356753379-image.png?alt=media&amp;token=990fd1c2-446d-46c4-8876-9b723d737857">
<hr>
<p>HẾT.</p>


# Actions: Code Reusability

Tăng khả năng tái sử dụng code (`Code Reusability`)
Có 3 loại `Actions` quan trọng:

- `Screen Actions` :: chỉ có bị ràng buộc `Widgets on a Screen`
- `Server Actions` :: có thể được gọi trong `any flow`
- `06 Entity Actions` :: OutSystem sẽ tự tạo ra cho mỗi `Entities`
  `01 Entity Action` :: OutSystem sẽ tự tạo ra cho mỗi `Static Entities`

Đặc điểm khác nhau:

- `Server Actions` có thể có nhiều `Input` và `Output` và `Local` `Variable`
- `Screen Actions` không có `Output Parameters`
- `Preparation` không có `Parameters` hoặc `Variables`

Đặc điểm `Server Actions`:

`Server Actions` có thể được `set` như một `Function`

- Giới hạn trong một `Output Parameter`
- Có sẵn hoặc nói cách khác là **CÓ THỂ** sử dụng trong `Expressions`
  <img style="display: block;margin:0 auto; width:250px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356302060-image.png?alt=media&token=e397b7d0-5416-4d85-9bd3-78731d275372">

# Action Flows

- Có duy nhất một `Start Node`
- Có thể có nhiều hơn một `End Node`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356356424-image.png?alt=media&token=e5c9eb15-6d34-4709-a13c-6f957e459be6">

## Assign

Cho phép `setting` các giá trị cho `variables` (hoặc `parameters`)
Một `Assign` có thể `setting` các giá trị cho `variables` (hoặc `parameters`)

- `Values` được gán từ trên xuống dưới
- Thay đổi xảy ra ngay lập tức

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356419623-image.png?alt=media&token=282010ae-3fc3-418b-97d9-1db20588bbd2">

## If

Tạo ra một `conditional branching` trong `Action flow`

- `If condition` để đánh giá tính **đúng sai**
- Chỉ duy nhất một `branch` được `execute` dựa trên `If condition`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356466378-image.png?alt=media&token=8fe1050c-d9ab-4d21-b35f-de6cd9307b52">

## Switch

Tạo ra một `conditional branching` với nhiều `branch` trong `Action flow`
● `Conditions` được đánh giá từ đầu đến cuối cùng
● Chỉ duy nhất `first branch` có giá trị `True` hoặc `Otherwise branch` được `execute`
● `Otherwise branch` là **BẮT BUỘC**

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356527266-image.png?alt=media&token=b4c34bb4-5093-4b03-adb4-16a1fabe6450">

## For Each

Cho phép `iterating` thông qua một `Record List` bên trong `Action flow`

- (1) `Cycle branch` được lặp lại cho mỗi `record` bên trong `List`
- (2) `The branch` phải `return` đến `For Each` để tiếp tục vòng lặp

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356608967-image.png?alt=media&token=69ff5f24-1e96-4649-beef-b44d0d85c1b2">

## While loops

- Sử dụng một `If` để đánh giá (evaluate) một `loop condition`
- `The branch` phải `return` đến `If` để tiếp tục vòng lặp
- Hãy cẩn thận với `infinite loops` nhé!

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356633839-image.png?alt=media&token=81cf93d4-d1b0-4db1-8a18-8e336daaabb6">

# Exception Handling

- Một `Exception` bị `thrown` ra khi một `operation` fails tại `runtime`
- `Execution` được chuyển sang cho một `Exception Handler`
- Một `Action` có thể có nhiều `Exception Handler`
  Database Exceptions
  Security Exceptions
  Custom User Exceptions

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356678682-image.png?alt=media&token=9ef81b49-49cd-45de-859d-44a35f948f01">

## Raising Exceptions

Một `Exception` có thể `raised`(chỉ định lên)
Khi một `Exception` được `raised`:

- `Execution` được chuyển sang `Exception Handler` cụ thể
- `Execution` sẽ được `Exception Handler` tiếp tục xử lý

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356714102-image.png?alt=media&token=a6484b2b-730f-471a-8bcf-87b34500af1d">

## Global Exception Handler

Nếu một `Exception Handler` doesn tồn tại trong `execution` hiện tại

- `Server bubbles-up` sẽ kiểm tra trong `contexts until` và tìm ra `Exception Handler` phù hợp
  Module Global Exception Handler
- Ở tại `Common Flow` (default)
- Mức cao nhất có thể `bubble-up`
- Nên handle `all exceptions`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668356753379-image.png?alt=media&token=990fd1c2-446d-46c4-8876-9b723d737857">

---

HẾT.


Actions: Code Reusability

Action Flows

Assign

Switch

For Each

While loops

Exception Handling

Raising Exceptions

Global Exception Handler

🐨 [#12] Actions and Exception Handling

<h1 id="e76b1700-3577-4335-ba58-9cd3ea3aab65">Input Validations</h1>
<p><strong>!QUAN TRONG</strong>: OutSystems <code>built-in validations</code> for Input Widgets validate if mandatory fields are filled and values typed comply with the data type of the variable.</p>
<p><code>OutSystems</code> cung cấp <code>built-in validations</code> cho <code>Input Widgets</code></p>
<ul>
<li>Các trường bắt buộc phải được nhập</li>
<li><code>Data typed</code> phải tuân thủ loại dữ liệu của <code>Variables</code> ràng buộc với <code>Widgets</code></li>
<li><code>Validations</code> được <code>performed</code> (thực hiện) tự động</li>
<li><code>Validations</code> chỉ được thực hiện khi dữ liệu là <code>submitted</code> đến <code>server</code></li>
<li><code>Link/Button</code> với method là <code>Navigate</code> không có <code>validations</code></li>
</ul>
<h1 id="320978ab-f5fa-4be0-a96c-2931f1561410">Types of Validations</h1>
<p><code>Links</code> và <code>Buttons</code> có một <code>Validation property</code><br>
<code>Property</code> này ảnh hưởng đến cách thức xác nhận đầu vào <code>performed</code>(thực hiện)<br>
Có ba types of validations:<br>
● Server<br>
● Client &amp; Server<br>
● (none)</p>
<h2 id="9805329d-c843-4186-8805-19342b1d7abc">Server</h2>
<p>Khi <code>Inputs</code> được <code>submitted</code> đến <code>server</code><br>
Mỗi <code>Input</code>có hai <code>properties</code> khi <code>runtime</code><br>
● <code>Valid</code> :: boolean<br>
● <code>ValidationMessage</code> :: text (hiển thị trong trường hợp <code>Inputs</code> không hợp lệ)</p>
<h2 id="79ec1304-9d17-49e4-8cae-fcb20f7a8f1a">Custom Server-Side Validations</h2>
<p><code>Dev</code> có thể tự viết <code>validations</code></p>
<ul>
<li>Phải được <code>performed</code> (thực hiện) trong <code>Action flow</code></li>
<li>Đối với các trường hợp <code>invalid</code>:<br>
Set <code>Valid</code>:: False<br>
Set <code>ValidationMessage</code>:: “Nội dung feedback”</li>
</ul>
<p><code>Form Valid</code> được kiểm tra sau tất cả các <code>custom validations</code><br>
Nếu có một <code>Input</code> <code>invalid</code>, <code>Form</code> tự động là <code>not Valid</code><br>
<code>Form Valid property</code> <strong>KHÔNG CẦN</strong> gán</p>
<h2 id="9f919da1-887f-4fdd-9042-e49a6ef28fcd">Client &amp; Server</h2>
<p><code>Built-in validations</code> được kiểm tra trên <code>client-side</code><br>
● Nếu hợp lệ, <code>inputs</code> được <code>submitted</code> đến <code>server</code><br>
● Nếu không, Người dùng nhận được <code>error messages</code> immediately (Ngay lập tức)</p>
<h2 id="e0af61d3-eb00-4e02-8e1f-4602a1a53267">(none)</h2>
<p>● <code>Inputs</code> được <code>submitted</code> đến <code>server</code><br>
● Không có <code>built-in validations</code> được <code>performed</code>(thực hiện) trên <code>client or server-side</code><br>
● <code>Custom server-side validations</code> có thể được định nghĩa</p>
<h1 id="5ba3836b-2fdb-4c92-8d48-dd7e54cbb77e">Validation Messages</h1>
<p><code>Valid property</code> của <code>Input widgets</code> được kiểm tra khi <code>rendering</code><br>
Nếu <code>Valid property</code> == <strong>True</strong>:…<br>
Nếu <code>Valid property</code> == <strong>False</strong>:</p>
<ul>
<li>Áp dụng <code>style</code>: (<strong>red border</strong>)</li>
<li>Hiển thị <code>Validation Message</code></li>
</ul>
<hr>
<p>HẾT.</p>


# Input Validations

**!QUAN TRONG**: OutSystems `built-in validations` for Input Widgets validate if mandatory fields are filled and values typed comply with the data type of the variable.

`OutSystems` cung cấp `built-in validations` cho `Input Widgets`

- Các trường bắt buộc phải được nhập
- `Data typed` phải tuân thủ loại dữ liệu của `Variables` ràng buộc với `Widgets`
- `Validations` được `performed` (thực hiện) tự động
- `Validations` chỉ được thực hiện khi dữ liệu là `submitted` đến `server`
- `Link/Button` với method là `Navigate` không có `validations`

# Types of Validations

`Links` và `Buttons` có một `Validation property`
`Property` này ảnh hưởng đến cách thức xác nhận đầu vào `performed`(thực hiện)
Có ba types of validations:
● Server
● Client & Server
● (none)

## Server

Khi `Inputs` được `submitted` đến `server`
Mỗi `Input`có hai `properties` khi `runtime`
● `Valid` :: boolean
● `ValidationMessage` :: text (hiển thị trong trường hợp `Inputs` không hợp lệ)

## Custom Server-Side Validations

`Dev` có thể tự viết `validations`

- Phải được `performed` (thực hiện) trong `Action flow`
- Đối với các trường hợp `invalid`:
  Set `Valid`:: False
  Set `ValidationMessage`:: "Nội dung feedback"

`Form Valid` được kiểm tra sau tất cả các `custom validations`
Nếu có một `Input` `invalid`, `Form` tự động là `not Valid`
`Form Valid property` **KHÔNG CẦN** gán

## Client & Server

`Built-in validations` được kiểm tra trên `client-side`
● Nếu hợp lệ, `inputs` được `submitted` đến `server`
● Nếu không, Người dùng nhận được `error messages` immediately (Ngay lập tức)

## (none)

● `Inputs` được `submitted` đến `server`
● Không có `built-in validations` được `performed`(thực hiện) trên `client or server-side`
● `Custom server-side validations` có thể được định nghĩa

# Validation Messages

`Valid property` của `Input widgets` được kiểm tra khi `rendering`
Nếu `Valid property` == **True**:...
Nếu `Valid property` == **False**:

- Áp dụng `style`: (**red border**)
- Hiển thị `Validation Message`

---

HẾT.


Input Validations

Types of Validations

Server

Custom Server-Side Validations

Client & Server

(none)

Validation Messages

🤣 [#13] Input Validations

<h1 id="052f88fe-66ae-4021-a986-522717f69bc4">Ajax Interaction</h1>
<p>Ajax cho phép các trang web thay đổi nội dung một cách linh hoạt mà <strong>KHÔNG LOAD LẠI</strong> toàn bộ trang. Gửi một <code>asynchronous requests</code> đến <code>server</code></p>
<h1 id="da5a53a1-8b8b-40b6-84c8-3a134743ecbf">Using Ajax in Screen Actions</h1>
<p>Cài đặt <code>Link / Button’s Method</code> thành <code>Ajax Submit</code>.<br>
Cài đặt <code>Destination</code> thành <code>(Screen Action nào đó)</code><br>
Khi chạy đến <code>End node</code> của <code>Screen Action</code><br>
● <code>Preparation</code> sẽ KHÔNG chạy lại<br>
● <strong>CHỈ CÓ</strong> các phần được chỉ định rõ ràng của <code>Screen</code> mới được <code>rebuilt</code> (or <code>refreshed</code>)</p>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416454986-image.png?alt=media&amp;token=93e2676d-be2c-4a6a-a18a-eee725b4e265">
<h2 id="735efda6-a801-40d1-bde4-b4ffbefd5579">Ajax Refresh</h2>
<p><code>Refreshes</code> một phần <code>Screen</code>, với tùy chọn <code>animation effect</code><br>
<code>Rebuilds</code> các phần được chỉ định rõ ràng của <code>Screen</code><br>
● <code>Response</code> Chỉ chứa <code>refreshed Screen content</code><br>
● <code>Named Widgets</code> là <strong>BẮT BUỘC</strong> nếu<br>
● <code>Multiple Ajax Refresh</code> thì sẽ thực thi theo thứ tự từ trên xuống dưới<br>
● <code>Ignored</code>(Bỏ qua) nếu method không phải <code>Ajax Submit</code></p>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416515149-image.png?alt=media&amp;token=be537dd9-86b7-41da-a313-93a04d31e059">
<h2 id="f538483e-67a2-42af-8cd6-b94ceb2440ae">Refresh Data</h2>
<p>● <code>Re-executes</code> một <code>Aggregate</code> or <code>SQL Query</code><br>
● <code>Refreshes data</code> của bất kỳ <code>query</code> nào, có tại <code>Preparation</code><br>
● Đảm bảo rằng dữ liệu nguồn được <strong>cập nhật</strong></p>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416660233-image.png?alt=media&amp;token=f7e0508b-5b2a-47c9-add6-d6d2dc658c04">
<h1 id="55450348-b254-4c15-85a1-0a7b3c8e268d">Screen Lifecycle with Ajax</h1>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416556110-image.png?alt=media&amp;token=c525cc5e-161d-4235-a0d2-ba9061c784c4">
<hr>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416573866-image.png?alt=media&amp;token=00f2a811-bab9-49a2-96ba-a69c2b4893e5">
<h1 id="be9f534d-e572-4694-947c-9ab69334bb47">Additional Ajax features</h1>
<p>Row Number in Ajax Refresh<br>
● Chỉ có sẵn trong <code>Table/List</code> Records<br>
● <code>Refreshes</code> một hàng duy nhất của <code>Widget</code> chỉ định thông qua <code>Row Number</code> property</p>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416704309-image.png?alt=media&amp;token=941cb818-4250-4db6-8969-d33afb19ae10">
<h2 id="f925d5cc-626e-4b0e-8412-fc4bb30d6a64">Ajax-enabled Widgets</h2>
<p><code>Widgets</code> sẽ <code>trigger</code> một <code>Actions</code> bằng <code>Ajax</code></p>
<ul>
<li>Khi người dùng <code>On Click</code> vào chúng<br>
○ Container</li>
<li>Khi người dùng <code>On Change</code> giá trị của chúng<br>
○ Input/Input Password<br>
○ Combo/List Box<br>
○ Check Box<br>
○ Radio Button</li>
</ul>
<p>Tức là <code>On Click</code> hoặc <code>On Change</code> để sử dụng được <code>Action có Ajax</code><br>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416749266-image.png?alt=media&amp;token=d3833208-66e9-464f-a8b2-a56a10aba583"></p>
<hr>
<p>HẾT.</p>


# Ajax Interaction

Ajax cho phép các trang web thay đổi nội dung một cách linh hoạt mà **KHÔNG LOAD LẠI** toàn bộ trang. Gửi một `asynchronous requests` đến `server`

# Using Ajax in Screen Actions

Cài đặt `Link / Button’s Method` thành `Ajax Submit`.
Cài đặt `Destination` thành `(Screen Action nào đó)`
Khi chạy đến `End node` của `Screen Action`
● `Preparation` sẽ KHÔNG chạy lại
● **CHỈ CÓ** các phần được chỉ định rõ ràng của `Screen` mới được `rebuilt` (or `refreshed`)

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416454986-image.png?alt=media&token=93e2676d-be2c-4a6a-a18a-eee725b4e265">

## Ajax Refresh

`Refreshes` một phần `Screen`, với tùy chọn `animation effect`
`Rebuilds` các phần được chỉ định rõ ràng của `Screen`
● `Response` Chỉ chứa `refreshed Screen content`
● `Named Widgets` là **BẮT BUỘC** nếu
● `Multiple Ajax Refresh` thì sẽ thực thi theo thứ tự từ trên xuống dưới
● `Ignored`(Bỏ qua) nếu method không phải `Ajax Submit`

<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416515149-image.png?alt=media&token=be537dd9-86b7-41da-a313-93a04d31e059">

## Refresh Data

● `Re-executes` một `Aggregate` or `SQL Query`
● `Refreshes data` của bất kỳ `query` nào, có tại `Preparation`
● Đảm bảo rằng dữ liệu nguồn được **cập nhật**

<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416660233-image.png?alt=media&token=f7e0508b-5b2a-47c9-add6-d6d2dc658c04">

# Screen Lifecycle with Ajax

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416556110-image.png?alt=media&token=c525cc5e-161d-4235-a0d2-ba9061c784c4">

---

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416573866-image.png?alt=media&token=00f2a811-bab9-49a2-96ba-a69c2b4893e5">

# Additional Ajax features

Row Number in Ajax Refresh
● Chỉ có sẵn trong `Table/List` Records
● `Refreshes` một hàng duy nhất của `Widget` chỉ định thông qua `Row Number` property

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416704309-image.png?alt=media&token=941cb818-4250-4db6-8969-d33afb19ae10">

## Ajax-enabled Widgets

`Widgets` sẽ `trigger` một `Actions` bằng `Ajax`

- Khi người dùng `On Click` vào chúng
  ○ Container
- Khi người dùng `On Change` giá trị của chúng
  ○ Input/Input Password
  ○ Combo/List Box
  ○ Check Box
  ○ Radio Button

Tức là `On Click` hoặc `On Change` để sử dụng được `Action có Ajax`
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668416749266-image.png?alt=media&token=d3833208-66e9-464f-a8b2-a56a10aba583">

---

HẾT.


Ajax Interaction

Using Ajax in Screen Actions

Ajax Refresh

Refresh Data

Screen Lifecycle with Ajax

Additional Ajax features

Ajax-enabled Widgets

🍭 [#14] Ajax Interaction

<h1 id="b2b1f0aa-0923-44e3-a47e-9bacd04a5a48">Khái niệm</h1>
<p><code>Web Block</code> là một <code>UI component</code> có khả năng tái sử dụng<br>
<code>Encapsulates</code>(Đóng gói) logic của chính nó<br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445339794-image.png?alt=media&amp;token=668020f8-afef-404d-b1da-12351b6a5942"></p>
<h2 id="878025db-26d1-4721-8a5b-1f1f49920f89">Creating Web Blocks</h2>
<p>Có hai cách:</p>
<ul>
<li>Drag and Drop</li>
<li>UI Flow context menu (Right click)</li>
</ul>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445406919-image.png?alt=media&amp;token=654f34c5-f662-4b62-bf0d-41462cc1a29e">
<h2 id="e20c0d05-ee05-44b8-8cb2-74652ed4ff6d">Designing and Using Web Blocks</h2>
<p><code>Web Blocks</code> được thiết kế giống như <code>Screens</code> (Cũng không có <code>Output Parameters</code>)<br>
<code>Web Blocks</code> có thể chứa:<br>
● Input Parameters<br>
● Local Variables<br>
● Preparation<br>
● Screen Actions<br>
● <strong>Events</strong><br>
● <strong>Placeholders</strong><br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445497602-image.png?alt=media&amp;token=ecc74b6c-7c06-49f4-ac2d-5bd6f5d157fd"></p>
<h3>Placeholder Widget</h3>
<p>Chỉ <code>available</code> (có sẵn) bên trong <code>Web Blocks</code><br>
Bảo lưu không gian cho <code>dynamic content</code>, được định nghĩa khi <code>instantiated</code> (Khởi tạo)<br>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445687710-image.png?alt=media&amp;token=ded93126-d363-417e-9481-6906c3c37e25"></p>
<h3>Dynamic Content in Web Blocks</h3>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445743751-image.png?alt=media&amp;token=62e48cd9-56b2-4058-9495-e8e419344531">
<p>Mỗi <code>instance</code> của <code>Web Block</code> có thể có nhiều <code>content</code> khác nhau <code>inside</code> the <code>Placeholders</code></p>
<h1 id="12d220fd-bc11-4125-9c06-f0805a77c9f5">Using Web Blocks</h1>
<p><code>Web Blocks</code> có thể được đặt bên trong một <code>Web Screen</code> hoặc <code>Web Block</code> khác<br>
● <code>Parent</code> của <code>Web Block</code> là thành phần chứa nó<br>
● <code>Recursion</code>(Đệ qui) <strong>KHÔNG CHO PHÉP</strong><br>
Parents có thể có nhiều <code>instances</code> của một <code>Web Block</code></p>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445604893-image.png?alt=media&amp;token=209d25ea-3c77-4477-8f82-832d508cd6d6">
<h2 id="29a2f35a-dfaf-48c2-86d4-7bc0cd4fff78">Sự tương tác với Parent</h2>
<p><code>Interaction with the Parent</code> (Sự tương tác với Parent)<br>
<code>Web Blocks</code> có:<br>
○ <code>scope</code> riêng của nó<br>
○ Không có quyền truy cập vào <code>parent's scope</code><br>
○ <code>Events</code> để tương tác</p>
<p>Tương tác với <code>parent</code> được thực hiện bằng cách sử dụng <code>events</code>:<br>
○ <code>Web Block</code> triggers an event<br>
○ <code>Parent handles</code> từ sự kiện của <code>Web Block</code><br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445922413-image.png?alt=media&amp;token=99907d88-3036-4f83-88ef-b7c809703960"><br>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446005865-image.png?alt=media&amp;token=2b7955a3-3585-4826-8ed1-1f393156fcf3"></p>
<h1 id="4cf96f0f-cd37-49e8-b911-c59ef719baf2">Web Block Interactions</h1>
<h2 id="c511ba03-78e1-4b45-a631-fe1d26d086e5">Events</h2>
<h3>Defining Events</h3>
<p>● <code>Events</code> chỉ có thể được định nghĩa trong <code>scoped</code> của <code>Web Blocks</code><br>
● <code>Events</code> <strong>CÓ THỂ</strong> có <code>Input Parameters</code> để gửi <code>data</code> đến <code>parent</code><br>
● <code>Input parameters</code> có thể <strong>BẮT BUỘC HOẶC KHÔNG</strong><br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446070093-image.png?alt=media&amp;token=d58a6bbb-6a5b-43c9-93a0-16fc990b4d15"></p>
<h3>Triggering Events</h3>
<p><code>Events</code> <strong>CHỈ</strong> có thể <code>triggered</code> bên trong <code>Web Block</code><br>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446230755-image.png?alt=media&amp;token=8f466fd6-35f3-4357-bd20-e9de9cce3fb3"></p>
<h2 id="65d81dd3-6918-4be7-a1a5-142722a16733">Event Handlers</h2>
<p>● <code>Screen Actions</code> được định nghĩa trong <code>scoped</code> của <code>parent</code><br>
● Chỉ định logic cho một <code>handle Event</code><br>
● <code>Web Block</code> Có quyền truy cập vào <code>Event Input Parameters</code><br>
Khi một <code>Web Block</code> <code>triggers</code> một <code>Event</code>:: <code>Event handler Action</code> sẽ được <code>executed</code><br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446360686-image.png?alt=media&amp;token=93875a0e-cb96-4745-a5a3-96f4cff23778"></p>
<h3>Different Event Handlers</h3>
<p>● Mỗi <code>Handler</code> có thể sử dụng <code>different Screen Action</code><br>
● <code>Same Screen Action</code> có thể được sử dụng nhiều <code>handlers</code><br>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446391418-image.png?alt=media&amp;token=f2629df2-b358-4189-94f8-c170ef747600"></p>
<h1 id="749cfcb1-1e04-4d70-928a-8664d38354f3">Screen Lifecycle with Web Blocks</h1>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446425757-image.png?alt=media&amp;token=cd3b385e-50b6-4eee-93f2-0db1d0699aca">
<h2 id="0d8bf5d0-32c1-40f3-95ae-eb1a4b220095">Screen Lifecycle with Web Blocks</h2>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446469757-image.png?alt=media&amp;token=0087320c-7cfa-45fe-a22b-733c362330ea">
<h2 id="b6ca229b-d9f1-4c22-a655-b8ec2c08e371">Web Blocks Events Lifecycle</h2>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446513785-image.png?alt=media&amp;token=0d0d0837-219a-4640-b370-2d03ffaf8821">
<h2 id="88990a1d-6fc6-422d-bf5c-0126d99d9a3e">Ajax Refreshing a Web Block</h2>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446544313-image.png?alt=media&amp;token=06e2bc3a-da2d-40a9-8405-146aea2d1d83">
<hr>
<p>Để click vào Button của Block 2 nhưng có thể validation một Input nằm trong Block 1<br>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668496907461-image.png?alt=media&amp;token=3adb7c2f-b336-4a0a-be15-b75992145a5c"></p>
<p>HẾT.</p>


# Khái niệm

`Web Block` là một `UI component` có khả năng tái sử dụng
`Encapsulates`(Đóng gói) logic của chính nó
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445339794-image.png?alt=media&token=668020f8-afef-404d-b1da-12351b6a5942">

## Creating Web Blocks

Có hai cách:

- Drag and Drop
- UI Flow context menu (Right click)

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445406919-image.png?alt=media&token=654f34c5-f662-4b62-bf0d-41462cc1a29e">

## Designing and Using Web Blocks

`Web Blocks` được thiết kế giống như `Screens` (Cũng không có `Output Parameters`)
`Web Blocks` có thể chứa:
● Input Parameters
● Local Variables
● Preparation
● Screen Actions
● **Events**
● **Placeholders**
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445497602-image.png?alt=media&token=ecc74b6c-7c06-49f4-ac2d-5bd6f5d157fd">

### Placeholder Widget

Chỉ `available` (có sẵn) bên trong `Web Blocks`
Bảo lưu không gian cho `dynamic content`, được định nghĩa khi `instantiated` (Khởi tạo)
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445687710-image.png?alt=media&token=ded93126-d363-417e-9481-6906c3c37e25">

### Dynamic Content in Web Blocks

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445743751-image.png?alt=media&token=62e48cd9-56b2-4058-9495-e8e419344531">

Mỗi `instance` của `Web Block` có thể có nhiều `content` khác nhau `inside` the `Placeholders`

# Using Web Blocks

`Web Blocks` có thể được đặt bên trong một `Web Screen` hoặc `Web Block` khác
● `Parent` của `Web Block` là thành phần chứa nó
● `Recursion`(Đệ qui) **KHÔNG CHO PHÉP**
Parents có thể có nhiều `instances` của một `Web Block`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445604893-image.png?alt=media&token=209d25ea-3c77-4477-8f82-832d508cd6d6">

## Sự tương tác với Parent

`Interaction with the Parent` (Sự tương tác với Parent)
`Web Blocks` có:
○ `scope` riêng của nó
○ Không có quyền truy cập vào `parent's scope`
○ `Events` để tương tác

Tương tác với `parent` được thực hiện bằng cách sử dụng `events`:
○ `Web Block` triggers an event
○ `Parent handles` từ sự kiện của `Web Block`
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668445922413-image.png?alt=media&token=99907d88-3036-4f83-88ef-b7c809703960">
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446005865-image.png?alt=media&token=2b7955a3-3585-4826-8ed1-1f393156fcf3">

# Web Block Interactions

## Events

### Defining Events

● `Events` chỉ có thể được định nghĩa trong `scoped` của `Web Blocks`
● `Events` **CÓ THỂ** có `Input Parameters` để gửi `data` đến `parent`
● `Input parameters` có thể **BẮT BUỘC HOẶC KHÔNG**
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446070093-image.png?alt=media&token=d58a6bbb-6a5b-43c9-93a0-16fc990b4d15">

### Triggering Events

`Events` **CHỈ** có thể `triggered` bên trong `Web Block`
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446230755-image.png?alt=media&token=8f466fd6-35f3-4357-bd20-e9de9cce3fb3">

## Event Handlers

● `Screen Actions` được định nghĩa trong `scoped` của `parent`
● Chỉ định logic cho một `handle Event`
● `Web Block` Có quyền truy cập vào `Event Input Parameters`
Khi một `Web Block` `triggers` một `Event`:: `Event handler Action` sẽ được `executed`
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446360686-image.png?alt=media&token=93875a0e-cb96-4745-a5a3-96f4cff23778">

### Different Event Handlers

● Mỗi `Handler` có thể sử dụng `different Screen Action`
● `Same Screen Action` có thể được sử dụng nhiều `handlers`
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446391418-image.png?alt=media&token=f2629df2-b358-4189-94f8-c170ef747600">

# Screen Lifecycle with Web Blocks

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446425757-image.png?alt=media&token=cd3b385e-50b6-4eee-93f2-0db1d0699aca">

## Screen Lifecycle with Web Blocks

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446469757-image.png?alt=media&token=0087320c-7cfa-45fe-a22b-733c362330ea">

## Web Blocks Events Lifecycle

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446513785-image.png?alt=media&token=0d0d0837-219a-4640-b370-2d03ffaf8821">

## Ajax Refreshing a Web Block

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668446544313-image.png?alt=media&token=06e2bc3a-da2d-40a9-8405-146aea2d1d83">

---

Để click vào Button của Block 2 nhưng có thể validation một Input nằm trong Block 1
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668496907461-image.png?alt=media&token=3adb7c2f-b336-4a0a-be15-b75992145a5c">

HẾT.


Creating Web Blocks

Designing and Using Web Blocks

Using Web Blocks

Sự tương tác với Parent

Web Block Interactions

Events

Event Handlers

Screen Lifecycle with Web Blocks

Web Blocks Events Lifecycle

Ajax Refreshing a Web Block

🧧 [#15] Web Blocks

<h1 id="e50fdd49-4263-4278-97a6-23ddd4682c00">Security in OutSystems</h1>
<p><code>OutSystems</code> cung cấp/xử lý nhiều vấn đề <code>low-level security</code><br>
● Hỗ trợ <code>HTTPS</code> và <code>Integrated Authentication</code><br>
● Ngăn chặn code injection vào <code>Screens</code> và <code>SQL queries</code><br>
● Cung cấp <code>fully-integrated exception</code> handle<br>
● Và nhiều hơn nữa…</p>
<h2 id="89befdcc-b506-488d-81c6-3ae032b98b25">Access Control</h2>
<p>Định nghĩa <code>Access control</code> và Xác định họ có thể làm được những gì<br>
<strong>Authentication</strong>::<br>
● Who: Business Users and Roles<br>
● What: Access Screens, trigger Actions, …<br>
<strong>Authorization</strong><br>
● Xác định ai đang truy cập ứng dụng<br>
● Xác thực thông tin đăng nhập của người dùng (<strong>username</strong> và <strong>password</strong>…)<br>
● Kiểm tra xem người dùng có thể thực thi một tác vụ không<br>
● Xác nhận nếu người dùng được cấp <code>required permissions</code></p>
<h1 id="cd999a5c-0040-41a2-9205-c3934d16a6b1">Users and Groups</h1>
<h2 id="9100645b-ffd1-4715-a5e8-7f51afd2d543">Users</h2>
<p><code>End-users</code> được tạo và quản lý trong <code>built-in Users application</code><br>
Trong <code>OutSystems</code> mặc định, <code>end-user</code> được cung cấp<br>
Thông tin cốt lõi của <code>user</code> là<br>
● Username<br>
● Password<br>
● Name<br>
<code>Authorization</code> được cấp thông qua <code>Roles</code><br>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571088756-image.png?alt=media&amp;token=b76e3fca-6fea-49a3-abab-07d760609ec0"></p>
<h2 id="3a585cce-d16f-4f86-a6f3-7fa2a747fd32">Groups</h2>
<p><code>Groups</code> là nhóm người dùng, có thể được xem là một <strong>vai trò</strong><br>
<code>Group's Role</code> được cấp cho tất cả người dùng trong <code>Group</code><br>
<code>Groups</code> có thể được <strong>tạo và quản lý</strong><br>
● Manually (thủ công) trong <code>Users application</code><br>
● Sử dụng <code>Actions Entity</code> từ <code>Users module</code> trong <code>System dependence</code></p>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571288865-image.png?alt=media&amp;token=2dcc3be2-f1e4-49e2-b10c-fa82b391cf7d">
<h1 id="33454a1b-b090-4c87-a59a-bb3ddad321c1">Roles</h1>
<p><code>Anonymous</code> và <code>Registered</code> được xây dựng trong <code>Roles</code><br>
Tất cả các <code>end-users</code> có phải được đăng ký <code>Role</code><br>
<code>Application-specific Roles</code>(Vai trò trong App cụ thể) có thể được tạo ra<br>
● Mỗi <code>Role</code> được kiểm tra, Grant and Revoke (Cấp phép và thu hồi)<br>
● Một <code>Role</code> có thể được đặt là <code>Public</code><br>
<code>Authorization</code> có thể được quản lý bằng cách:</p>
<ul>
<li>Programatically</li>
<li>Manually (thủ công) trong <code>Users application</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571167161-image.png?alt=media&amp;token=c3e962b5-5e8b-4e8e-9498-31503d5322b5">
<h2 id="0497e008-058b-4186-93d6-39387cacbeb4">Cách Checking Permissions</h2>
<p><code>Roles</code> có thể được kiểm tra trong <code>Screens</code> và <code>Actions</code><br>
<code>Check&lt;RoleName&gt;Role(UserId)</code> là <code>Roles Action</code> được cung cấp sẵn<br>
● Kiểm tra xem người dùng có <code>RoleName</code><br>
● Có thể được sử dụng trong bất kỳ <code>Boolean condition</code> nào</p>
<ul>
<li><code>Enable/Display/Visible</code> property của <code>Widgets</code> để ẩn hiện</li>
<li>If widget <code>on Screens</code></li>
<li>If statement <code>on logic flows</code></li>
</ul>
<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571317953-image.png?alt=media&amp;token=938bb37d-23ab-496c-aa78-aa9859b2f5ca">
<hr>
<p>HẾT.</p>


# Security in OutSystems

`OutSystems` cung cấp/xử lý nhiều vấn đề `low-level security`
● Hỗ trợ `HTTPS` và `Integrated Authentication`
● Ngăn chặn code injection vào `Screens` và `SQL queries`
● Cung cấp `fully-integrated exception` handle
● Và nhiều hơn nữa...

## Access Control

Định nghĩa `Access control` và Xác định họ có thể làm được những gì
**Authentication**::
● Who: Business Users and Roles
● What: Access Screens, trigger Actions, ...
**Authorization**
● Xác định ai đang truy cập ứng dụng
● Xác thực thông tin đăng nhập của người dùng (**username** và **password**...)
● Kiểm tra xem người dùng có thể thực thi một tác vụ không
● Xác nhận nếu người dùng được cấp `required permissions`

# Users and Groups

## Users

`End-users` được tạo và quản lý trong `built-in Users application`
Trong `OutSystems` mặc định, `end-user` được cung cấp
Thông tin cốt lõi của `user` là
● Username
● Password
● Name
`Authorization` được cấp thông qua `Roles`
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571088756-image.png?alt=media&token=b76e3fca-6fea-49a3-abab-07d760609ec0">

## Groups

`Groups` là nhóm người dùng, có thể được xem là một **vai trò**
`Group's Role` được cấp cho tất cả người dùng trong `Group`
`Groups` có thể được **tạo và quản lý**
● Manually (thủ công) trong `Users application`
● Sử dụng `Actions Entity` từ `Users module` trong `System dependence`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571288865-image.png?alt=media&token=2dcc3be2-f1e4-49e2-b10c-fa82b391cf7d">

# Roles

`Anonymous` và `Registered` được xây dựng trong `Roles`
Tất cả các `end-users` có phải được đăng ký `Role`
`Application-specific Roles`(Vai trò trong App cụ thể) có thể được tạo ra
● Mỗi `Role` được kiểm tra, Grant and Revoke (Cấp phép và thu hồi)
● Một `Role` có thể được đặt là `Public`
`Authorization` có thể được quản lý bằng cách:

- Programatically
- Manually (thủ công) trong `Users application`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571167161-image.png?alt=media&token=c3e962b5-5e8b-4e8e-9498-31503d5322b5">

## Cách Checking Permissions

`Roles` có thể được kiểm tra trong `Screens` và `Actions`
`Check<RoleName>Role(UserId)` là `Roles Action` được cung cấp sẵn
● Kiểm tra xem người dùng có `RoleName`
● Có thể được sử dụng trong bất kỳ `Boolean condition` nào

- `Enable/Display/Visible` property của `Widgets` để ẩn hiện
- If widget `on Screens`
- If statement `on logic flows`

<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668571317953-image.png?alt=media&token=938bb37d-23ab-496c-aa78-aa9859b2f5ca">

---

HẾT.


Security in OutSystems

Access Control

Users and Groups

Users

Groups

Roles

Cách Checking Permissions

🎡 [#16] Role-based Security

<h1 id="e07a840c-0a44-4410-b2db-c7ee842568a7">Sessions</h1>
<ul>
<li><code>Web requests</code> là <code>stateless</code>.Do đó, mỗi <code>request</code> đến <code>server</code>không biết về những giá trị trước đó</li>
<li><code>Sessions</code> là một cơ chế có thể được sử dụng để lưu trữ trạng thái giữa các <code>requests</code></li>
<li>Một <code>session</code> giữ <code>context</code> của <code>end-user</code> interactions (tương tác) với application</li>
<li><code>Session data</code> được lưu trữ trong <code>database</code></li>
<li>Một <code>session</code> được tạo ra bởi <code>end-user</code> đầu tiên <code>request</code> đến <code>server</code></li>
<li><code>Session data</code> được truy xuất bởi server trong mọi <code>browser request</code></li>
<li>Nó sẽ <code>Time out</code> Sau một thời gian không hoạt động và <code>session data</code> bị <strong>huỷ bỏ</strong></li>
</ul>
<h2 id="1579635e-28e4-455a-900e-65d2ab0c0086">Đặc điểm quan trọng của Sessions</h2>
<p><code>Session</code> <strong>starts</strong> một cách tự động tại lần truy cập đầu tiên, kể cả khi chưa <code>login</code> (<code>Anonymous</code>)<br>
<code>Session</code> <strong>ends</strong> một cách tự động sau khi bị <code>timeout</code><br>
<code>session id</code> vẫn được giữ sau <code>login</code><br>
<code>session id</code> bị reset sau khi <code>logout</code></p>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668722701954-image.png?alt=media&amp;token=3eccbbcf-deae-4848-a135-275aedeab126">
<h2 id="d1cc175f-718b-41d5-bc2b-92d5d1cb14df">Session Data</h2>
<p><code>OutSystems</code> hỗ trợ hai loại <code>cross-request data</code>(Session):</p>
<ul>
<li>User <code>Session Variables</code><br>
● Có sẵn trong khi người dùng đang sử dụng <code>application</code><br>
● <code>Values</code> được lưu trữ mỗi <code>user</code><br>
● <code>Values</code> hết hạn khi Session <code>times out</code></li>
<li><code>Cross-session</code>: (Site) Properties<br>
● Luôn có sẵn cho tất cả <code>users</code><br>
● <code>Values</code> được chia sẻ giữa <code>all user sessions</code><br>
● <code>Values</code> không bao giờ <code>time out</code><br>
● CÓ THỂ được <strong>sửa đổi</strong> trong <code>Service Center</code><br>
● <strong>KHÔNG BAO GIỜ</strong> bị <code>reset</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668722779265-image.png?alt=media&amp;token=f2c3c2d4-b02e-4f7a-b013-f2726e0960ad">
<h1 id="ef5fd01e-0fa5-449c-bcdc-8d3d9ef8be2e">Session Variables</h1>
<p><code>Data Types</code> của Session::<br>
● Basic Types<br>
● Entity Identifiers<br>
● Tất cả những người khác nên tránh<br>
Value của Session::<br>
● Có thể được chỉ định trong <code>any action</code><br>
● Tồn tại trong mọi <code>requests</code><br>
● Bị <code>reset</code> về giá trị mặc định khi:</p>
<ul>
<li>The session ends (Timeout)</li>
<li>The users log out</li>
</ul>
<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668722674644-image.png?alt=media&amp;token=06d04842-5c16-47e6-b373-7d1b3b606bf3">
<hr>
<p>HẾT.n=06d04842-5c16-47e6-b373-7d1b3b606bf3"&gt;</p>
<hr>
<p>HẾT.</p>


# Sessions

- `Web requests` là `stateless`.Do đó, mỗi `request` đến `server`không biết về những giá trị trước đó
- `Sessions` là một cơ chế có thể được sử dụng để lưu trữ trạng thái giữa các `requests`
- Một `session` giữ `context` của `end-user` interactions (tương tác) với application
- `Session data` được lưu trữ trong `database`
- Một `session` được tạo ra bởi `end-user` đầu tiên `request` đến `server`
- `Session data` được truy xuất bởi server trong mọi `browser request`
- Nó sẽ `Time out` Sau một thời gian không hoạt động và `session data` bị **huỷ bỏ**

## Đặc điểm quan trọng của Sessions

`Session` **starts** một cách tự động tại lần truy cập đầu tiên, kể cả khi chưa `login` (`Anonymous`)
`Session` **ends** một cách tự động sau khi bị `timeout`
`session id` vẫn được giữ sau `login`
`session id` bị reset sau khi `logout`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668722701954-image.png?alt=media&token=3eccbbcf-deae-4848-a135-275aedeab126">

## Session Data

`OutSystems` hỗ trợ hai loại `cross-request data`(Session):

- User `Session Variables`
  ● Có sẵn trong khi người dùng đang sử dụng `application`
  ● `Values` được lưu trữ mỗi `user`
  ● `Values` hết hạn khi Session `times out`
- `Cross-session`: (Site) Properties
  ● Luôn có sẵn cho tất cả `users`
  ● `Values` được chia sẻ giữa `all user sessions`
  ● `Values` không bao giờ `time out`
  ● CÓ THỂ được **sửa đổi** trong `Service Center`
  ● **KHÔNG BAO GIỜ** bị `reset`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668722779265-image.png?alt=media&token=f2c3c2d4-b02e-4f7a-b013-f2726e0960ad">

# Session Variables

`Data Types` của Session::
● Basic Types
● Entity Identifiers
● Tất cả những người khác nên tránh
Value của Session::
● Có thể được chỉ định trong `any action`
● Tồn tại trong mọi `requests`
● Bị `reset` về giá trị mặc định khi:

- The session ends (Timeout)
- The users log out

<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668722674644-image.png?alt=media&token=06d04842-5c16-47e6-b373-7d1b3b606bf3">

---

HẾT.n=06d04842-5c16-47e6-b373-7d1b3b606bf3">

---

HẾT.


Sessions

Đặc điểm quan trọng của Sessions

Session Data

Session Variables

🖼 [#17] Session Handling

<h1 id="bb4f28be-e18d-4951-8274-3568407ece57">Web Services</h1>
<p>● Là <code>language-agnostic</code> được cung cấp từ xa (hay còn gọi là <code>API</code>)<br>
● Cho phép tích hợp giữa các hệ thống không đồng nhất<br>
<code>OutSystems</code> đã đơn giản hóa <code>consuming and exposing</code> bằng 2 tiêu chuẩn:</p>
<ul>
<li>SOAP web services</li>
<li>REST APIs</li>
</ul>
<hr>
<h1 id="e4dbfe67-2df3-4083-85d5-b9d3a80fcef7">SOAP</h1>
<h2 id="7ad278de-4820-4216-866f-08f96d39cf1c">Định nghĩa</h2>
<ul>
<li><code>Contract</code> chính thức hóa trong một tập tin <code>Web Services Description Language</code> (WSDL)
<ul>
<li>Tất cả các <code>operations' parameters and return types</code> được mô tả đầy đủ</li>
<li><code>SOAP services</code> có thể cung cấp rất chi tiết <code>contracts</code></li>
</ul>
</li>
<li><code>Requests and responses</code> bằng <code>XML</code></li>
<li>Tập dự liệu trả về <strong>LỚN</strong></li>
</ul>
<h2 id="9877c5df-0a04-41ec-be31-079cd4edebfe">Consuming SOAP</h2>
<p><code>Consume</code> một hoặc nhiều <code>methods</code> sử dụng <code>SOAP 1.1</code> và <code>SOAP 1.2</code> bindings:</p>
<ul>
<li><code>Upload</code> <strong>WSDL file</strong> hoặc <strong>URL</strong></li>
<li>Chọn <code>bindings</code></li>
<li>Chọn <code>methods</code> để <code>consume</code></li>
</ul>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728655849-image.png?alt=media&amp;token=b96cd2bc-619e-4053-8f12-89e5c1c0d12e">
<h2 id="947eb969-7698-4a1e-b6da-aee82885af69">Using SOAP</h2>
<p><code>OutSystems</code> generates <code>SOAP methods</code> như một <code>Server Actions</code>. Generates bất kỳ <code>data type</code> <code>compound</code> nào như một <code>Structures</code><br>
Các <code>generated elements</code> này có thể được sử dụng bình thường như một <code>Actions</code> hoặc <code>Structures</code><br>
<strong>CÓ THỂ THAY ĐỔI:</strong></p>
<ul>
<li><code>Default values</code> của <code>Input Parameters</code></li>
<li><code>Name</code> và <code>description</code> của <code>elements</code></li>
<li><strong>Refresh</strong> option để có được <code>service</code> <strong>updates và change</strong> <code>consumed methods</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728720325-image.png?alt=media&amp;token=be8c8aa1-7ce4-4933-8340-f575cd88ddd0">
## Exposing SOAP
<p>Để <code>expose</code> một <code>Service</code> trong <code>OutSystems</code>:</p>
<ul>
<li><code>Create</code> the Service</li>
<li><code>Create</code> each method</li>
<li><code>Implement</code> chúng như các <code>Action</code></li>
</ul>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728809031-image.png?alt=media&amp;token=c73e5ad3-92c2-482e-85bc-60026bf525b0">
<h2 id="1452530c-a3f8-4944-9031-2f1e72440f92">SOAP Endpoints</h2>
<p><code>Endpoint</code> thông tin của <code>exposed</code> <code>Web Services</code> trong <code>Service Center</code><br>
<code>Endpoint</code> và <code>WSDL URLs</code> sử dụng: <strong>host name</strong> và <strong>module name</strong></p>
<pre><code class="hljs">Endpoint: http:<span class="hljs-regexp">//</span>&lt;hostname&gt;<span class="hljs-regexp">/&lt;ModuleName&gt;/</span>&lt;WebServiceName&gt;.asmx
SOAP WSDL: http:<span class="hljs-regexp">//</span>&lt;hostname&gt;<span class="hljs-regexp">/&lt;ModuleName&gt;/</span>&lt;WebServiceName&gt;.asmx?WSDL
</code></pre>
<p><code>Web Service</code> sẽ <code>exposed</code> với <code>WSDL</code> có <code>SOAP 1.1</code> hoặc <code>SOAP 1.2</code> binding</p>
<hr>
<h1 id="69e92924-6cf5-41ae-a040-4eeafaba72af">REST</h1>
<ul>
<li>Là giải pháp thay thế cho <code>SOAP</code> với Tập dữ liệu trả về <strong>NHỎ</strong></li>
<li>Không có <code>API contract file</code> chính thức</li>
<li>Cung cấp <code>documentation</code> và <code>examples</code> thay vì <code>contract</code></li>
<li><code>Requests and responses</code> (usually) bằng <code>JSON</code> gọn nhẹ</li>
</ul>
<h2 id="6cbd319b-e999-4393-9845-9c1ccf9aaeaf">Consuming a REST method</h2>
<p><code>Consume</code> một single <code>REST method</code></p>
<ul>
<li>Cung cấp <code>method's URL</code></li>
<li><code>Test</code> để lấy giá trị <code>response test</code></li>
<li>Có thể <strong>Copy</strong> <code>response</code> trong <code>Body</code></li>
</ul>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728917949-image.png?alt=media&amp;token=005e8533-5e3b-4cda-8682-e1a5e70dd811">
<h2 id="0ee2ffb8-d11c-4a49-ac74-0060242c21a1">Using REST methods</h2>
<p><code>OutSystems</code> generates <code>REST</code> như các <code>Actions</code>. Generates bất kỳ <code>data type</code> <code>compound</code> nào như một <code>Structures</code><br>
Các <code>generated elements</code> này có thể được sử dụng bình thường như một <code>Actions</code> hoặc <code>Structures</code><br>
<strong>CÓ THỂ THAY ĐỔI:</strong></p>
<ul>
<li><code>Default values</code> của <code>Input Parameters</code></li>
<li><code>Name</code> và <code>description</code> của <code>elements</code></li>
<li><code>Data types</code> của <code>attributes</code> và <code>parameters</code>, cũng như <code>add</code> và <code>remove</code> chúng</li>
</ul>
<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728955407-image.png?alt=media&amp;token=09ab1470-4592-4bfd-b16f-b986d1cb8409">
<h2 id="6d9a510e-ebee-42d1-8df9-9f50c010190b">REST Callbacks</h2>
<p><code>REST services</code> Cung cấp <strong>2</strong> <code>Callbacks</code>:</p>
<ul>
<li><strong>OnBeforeRequest</strong>:: <code>Actions</code> tự động <code>called</code> trước khi <code>request</code></li>
<li><strong>OnAfterResponse</strong>:: <code>Actions</code> tự động <code>called</code> sau khi nhận được <code>response</code><br>
Hữu ích cho <code>debug</code> và <code>Customize requests</code>:</li>
<li>Phát hiện và xử lý HTTP Status (400 and over)</li>
<li>Alter the sent and return values transparently to the caller code</li>
</ul>
<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729005524-image.png?alt=media&amp;token=26835f42-8138-4b3f-9d7d-2e375b858f8c">
<h2 id="4ed5cb29-0255-4e1c-8d20-1a2a5267ac42">Consuming a REST API</h2>
<p><code>Consume</code> tất cả các <code>REST methods</code>:</p>
<ul>
<li>Cung cấp <code>API URL</code></li>
<li><code>REST API</code> <strong>PHẢI</strong> compliant (tuân thủ) <code>Swagger</code> chỉ định</li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729112578-image.png?alt=media&amp;token=18fc81c4-a273-44f5-95a4-2d0e21a85acf">
<h2 id="0057852f-0181-47c4-894d-d3053cc4f4a6">Exposing REST</h2>
<p>Để <code>expose</code> một <code>Service</code> trong <code>OutSystems</code>:</p>
<ul>
<li><code>Create</code> the Service</li>
<li><code>Create</code> each method</li>
<li><code>Implement</code> chúng như các <code>Action</code></li>
</ul>
<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729187158-image.png?alt=media&amp;token=ea1abe48-1377-485e-a8d8-c9fc68b76032">
<h1 id="412fa95b-ba5a-418b-8503-567d6068970e">Logging</h1>
<p><code>Consumed</code> và <code>exposed</code> <code>Web Services</code> có thể định cấu hình trong <code>Service Center</code></p>
<ul>
<li>Effective endpoint URL</li>
<li>Security</li>
<li>Log verbosity</li>
</ul>
<p>Cấu hình được thực hiện trên mỗi <code>module</code>: <strong>Integrations tab</strong> trong <code>Service Center</code></p>
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729234060-image.png?alt=media&amp;token=d75774c1-4097-4a43-95bd-b538c3dd1656"> 
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729304531-image.png?alt=media&amp;token=337b81e6-9a20-43ba-96f5-3ec91d4ab24d"> 
---
<p>HẾT.</p>
<div class="concept-i">
<h3>12312321312</h3>
đáhjasdjahdasdas
</div>


# Web Services

● Là `language-agnostic` được cung cấp từ xa (hay còn gọi là `API`)
● Cho phép tích hợp giữa các hệ thống không đồng nhất
`OutSystems` đã đơn giản hóa `consuming and exposing` bằng 2 tiêu chuẩn:

- SOAP web services
- REST APIs

---

# SOAP

## Định nghĩa

- `Contract` chính thức hóa trong một tập tin `Web Services Description Language` (WSDL)
  - Tất cả các `operations' parameters and return types` được mô tả đầy đủ
  - `SOAP services` có thể cung cấp rất chi tiết `contracts`
- `Requests and responses` bằng `XML`
- Tập dự liệu trả về **LỚN**

## Consuming SOAP

`Consume` một hoặc nhiều `methods` sử dụng `SOAP 1.1` và `SOAP 1.2` bindings:

- `Upload` **WSDL file** hoặc **URL**
- Chọn `bindings`
- Chọn `methods` để `consume`

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728655849-image.png?alt=media&token=b96cd2bc-619e-4053-8f12-89e5c1c0d12e">

## Using SOAP

`OutSystems` generates `SOAP methods` như một `Server Actions`. Generates bất kỳ `data type` `compound` nào như một `Structures`
Các `generated elements` này có thể được sử dụng bình thường như một `Actions` hoặc `Structures`
**CÓ THỂ THAY ĐỔI:**

- `Default values` của `Input Parameters`
- `Name` và `description` của `elements`
- **Refresh** option để có được `service` **updates và change** `consumed methods`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728720325-image.png?alt=media&token=be8c8aa1-7ce4-4933-8340-f575cd88ddd0">
## Exposing SOAP

Để `expose` một `Service` trong `OutSystems`:

- `Create` the Service
- `Create` each method
- `Implement` chúng như các `Action`

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728809031-image.png?alt=media&token=c73e5ad3-92c2-482e-85bc-60026bf525b0">

## SOAP Endpoints

`Endpoint` thông tin của `exposed` `Web Services` trong `Service Center`
`Endpoint` và `WSDL URLs` sử dụng: **host name** và **module name**

```
Endpoint: http://<hostname>/<ModuleName>/<WebServiceName>.asmx
SOAP WSDL: http://<hostname>/<ModuleName>/<WebServiceName>.asmx?WSDL
```

`Web Service` sẽ `exposed` với `WSDL` có `SOAP 1.1` hoặc `SOAP 1.2` binding

---

# REST

- Là giải pháp thay thế cho `SOAP` với Tập dữ liệu trả về **NHỎ**
- Không có `API contract file` chính thức
- Cung cấp `documentation` và `examples` thay vì `contract`
- `Requests and responses` (usually) bằng `JSON` gọn nhẹ

## Consuming a REST method

`Consume` một single `REST method`

- Cung cấp `method's URL`
- `Test` để lấy giá trị `response test`
- Có thể **Copy** `response` trong `Body`

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728917949-image.png?alt=media&token=005e8533-5e3b-4cda-8682-e1a5e70dd811">

## Using REST methods

`OutSystems` generates `REST` như các `Actions`. Generates bất kỳ `data type` `compound` nào như một `Structures`
Các `generated elements` này có thể được sử dụng bình thường như một `Actions` hoặc `Structures`
**CÓ THỂ THAY ĐỔI:**

- `Default values` của `Input Parameters`
- `Name` và `description` của `elements`
- `Data types` của `attributes` và `parameters`, cũng như `add` và `remove` chúng

<img style="display: block;margin:0 auto; width:300px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668728955407-image.png?alt=media&token=09ab1470-4592-4bfd-b16f-b986d1cb8409">

## REST Callbacks

`REST services` Cung cấp **2** `Callbacks`:

- **OnBeforeRequest**:: `Actions` tự động `called` trước khi `request`
- **OnAfterResponse**:: `Actions` tự động `called` sau khi nhận được `response`
  Hữu ích cho `debug` và `Customize requests`:
- Phát hiện và xử lý HTTP Status (400 and over)
- Alter the sent and return values transparently to the caller code

<img style="display: block;margin:0 auto; width:400px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729005524-image.png?alt=media&token=26835f42-8138-4b3f-9d7d-2e375b858f8c">

## Consuming a REST API

`Consume` tất cả các `REST methods`:

- Cung cấp `API URL`
- `REST API` **PHẢI** compliant (tuân thủ) `Swagger` chỉ định

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729112578-image.png?alt=media&token=18fc81c4-a273-44f5-95a4-2d0e21a85acf">

## Exposing REST

Để `expose` một `Service` trong `OutSystems`:

- `Create` the Service
- `Create` each method
- `Implement` chúng như các `Action`

<img style="display: block;margin:0 auto; width:500px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729187158-image.png?alt=media&token=ea1abe48-1377-485e-a8d8-c9fc68b76032">

# Logging

`Consumed` và `exposed` `Web Services` có thể định cấu hình trong `Service Center`

- Effective endpoint URL
- Security
- Log verbosity

Cấu hình được thực hiện trên mỗi `module`: **Integrations tab** trong `Service Center`

<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729234060-image.png?alt=media&token=d75774c1-4097-4a43-95bd-b538c3dd1656"> 
<img style="display: block;margin:0 auto; width:700px" src="https://firebasestorage.googleapis.com/v0/b/hieuemmm-blog.appspot.com/o/1668729304531-image.png?alt=media&token=337b81e6-9a20-43ba-96f5-3ec91d4ab24d"> 
---

HẾT.

<div class="concept-i">
<h3>12312321312</h3>
đáhjasdjahdasdas
</div>
