### Data Display and Formatting Examples

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Provides examples for accessing and formatting data, including agreement numbers, currency, and conditional display of contractor information.

```APIDOC
## Data Display and Formatting Examples

### Display Agreement Number

#### Description
This example demonstrates how to access a related agreement ID from the current item's context and retrieve an agreement number from global variables after it has been loaded.

#### Method
Client-side expression

#### Endpoint
N/A (Client-side logic)

#### Parameters
None

#### Request Body
None

### Request Example
```javascript
// Access related agreement
$context.item.umowaId  // Gets agreement ID
$global.daneUmowy.numer  // Gets agreement number after loading
```

### Response
#### Success Response (200)
N/A (Client-side display)

#### Response Example
N/A

### Format Polish Currency

#### Description
Formats a gross amount into Polish currency format, appending the currency symbol 'zł'.

#### Method
Client-side expression

#### Endpoint
N/A (Client-side logic)

#### Parameters
None

#### Request Body
None

### Request Example
```javascript
Concat(ToCurrency($context.item.kwotaBrutto),' zł')
// Output: "1 234,56 zł"
```

### Response
#### Success Response (200)
N/A (Client-side formatting)

#### Response Example
N/A

### Handle Contractor Display

#### Description
Conditionally displays the contractor's name based on their type. If the contractor is an individual ('FIZYCZNA'), it displays their first and last name. Otherwise, it displays the company name.

#### Method
Client-side expression

#### Endpoint
N/A (Client-side logic)

#### Parameters
None

#### Request Body
None

### Request Example
```javascript
If($context.item.kontrahent.typ='FIZYCZNA',
   Concat($context.item.kontrahent.imie1,' ',$context.item.kontrahent.nazwisko1),
   $context.item.kontrahent.nazwa)
```

### Response
#### Success Response (200)
N/A (Client-side display)

#### Response Example
N/A
```

--------------------------------

### JavaScript Navigation and Redirect Functions

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Provides examples of JavaScript functions for navigating between forms or redirecting to different URLs. Includes examples for navigating to a specific form and setting path variables for redirects.

```javascript
// Navigate to form
navigateToRealForm()
navigateToRealForm('formName')
```

```javascript
// Redirect action
{
  "type": "REDIRECT",
  "target": {
    "url": "/path/{id}",
    "pathVariablesMapping": [
      {
        "source": "$context.item.id",
        "target": "id"
      }
    ]
  }
}
```

--------------------------------

### Form Validation Examples

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Illustrates how to implement client-side validation for forms using conditional logic and error display.

```APIDOC
## Form Validation Examples

### Vacation Request Form Validation

#### Description
This example shows how to validate if a required date field for overtime vacation is filled. If it's blank, an error message is displayed.

#### Method
Client-side expression

#### Endpoint
N/A (Client-side logic)

#### Parameters
None

#### Request Body
None

### Request Example
```javascript
If(IsBlank($context.item.dane.dataOd), 
   ShowError('Wypełnij datę urlopu za nadgodziny'), '')
```

### Response
#### Success Response (200)
N/A (Client-side validation)

#### Response Example
N/A
```

--------------------------------

### Action Component Structure Definition

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Defines the JSON structure for an 'ACTION' component, outlining a sequence of steps. The example shows a 'SUBMIT' step with target URL, HTTP method, and mapping of path variables from context.

```json
{
  "type": "ACTION",
  "steps": [
    {
      "type": "SUBMIT",
      "target": {
        "url": "{ENV.BASE_API_URI}/endpoint/{id}",
        "method": "GET|POST|PUT|DELETE",
        "pathVariablesMapping": [
          {
            "source": "$context.item.id",
            "target": "id"
          }
        ]
      }
    }
  ]
}
```

--------------------------------

### Common Pattern: Conditional Visibility

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Demonstrates how to use a `condition` object within component definitions to control UI element visibility. The example checks if global data exists and if the current item has an ID.

```json
"condition": {
  "visibility": "HasValue($global.daneUmowy) and not IsBlank($context.item.id)"
}
```

--------------------------------

### Conditional Logic Function in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Explains and provides examples for the `If` function, which allows for conditional execution of expressions. It covers simple conditions, handling blank values, and nested conditional logic.

```javascript
If(condition, trueValue, falseValue)
// Examples:
If($context.item.typUmowy='D','Dochodowa','Inna')
If(IsBlank($context.item.pole), 'Pole wymagane', '')

// Nested conditions
If($context.item.typUmowy='D','Dochodowa',
  If($context.item.typUmowy='W','Wydatkowa',
    If($context.item.typUmowy='G','Grantowa','Inny typ')))
```

--------------------------------

### Date Formatting Function in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Provides examples of using the `FormatDate` function to format date values according to specified formats (e.g., 'YYYY-MM-DD', 'DD.MM.YYYY'). It shows how to apply this to different context item properties.

```javascript
FormatDate(dateValue, format)
// Examples:
FormatDate($context.item.dataZawarciaUmowy, 'YYYY-MM-DD')
FormatDate($context.item.createdDate, 'DD.MM.YYYY')
FormatDate($context.item.timestamp, 'YYYY')
```

--------------------------------

### Value Checking Functions in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Details the `HasValue` and `IsBlank` functions used for checking if a field contains data or is empty/null, respectively. Examples show their application in validation and conditional logic.

```javascript
HasValue(field)  // Returns true if field has a value
IsBlank(field)   // Returns true if field is empty/null

// Examples:
HasValue($context.item.numerUmowy)
IsBlank($context.item.dane.kontrahent)
not HasValue($queryParams.id)
```

--------------------------------

### String Concatenation Function in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Demonstrates the `Concat` function for combining multiple strings into a single string. Examples include joining names and status information with literal strings.

```javascript
Concat(string1, string2, ...)
// Examples:
Concat($context.item.imie1,' ',$context.item.nazwisko1)
Concat('Status: ',$context.item.workflowStatus)
```

--------------------------------

### Common Pattern: Date Range Display

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Combines `Concat` and `FormatDate` to display a date range, showing both start and end dates in a 'YYYY-MM-DD' format, prefixed with 'Od: ' and ' Do: '.

```javascript
Concat('Od: ', FormatDate($context.item.dataOd, 'YYYY-MM-DD'),
       ' Do: ', FormatDate($context.item.dataDo, 'YYYY-MM-DD'))
```

--------------------------------

### JavaScript Date Range Validation

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

A JavaScript validation rule to ensure that a start date is not after an end date. It returns an error message if the start date precedes the end date.

```javascript
If($context.item.startDate > $context.item.endDate, 
   'Start date must be before end date', '')
```

--------------------------------

### Access and Display Agreement Data

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This JavaScript example shows how to access related agreement data. It first retrieves the agreement ID from the current item context and then accesses the agreement number from a global data variable, assuming it's loaded elsewhere. This pattern is useful for displaying related information.

```javascript
// Access related agreement
$context.item.umowaId  // Gets agreement ID
$global.daneUmowy.numer  // Gets agreement number after loading
```

--------------------------------

### Array Filtering Function in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Demonstrates the `ArrayFilter` function, which filters elements of an array based on a specified condition. The example shows filtering a list of 'kontrahenci' based on a boolean property.

```javascript
ArrayFilter(array, condition)
// Example:
ArrayFilter($context.item.kontrahenci,$item.kontrahentCzyGlowny)
```

--------------------------------

### Conditional Display for Contractor Name

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This JavaScript example implements conditional logic to display contractor information. It checks the contractor's type: if it's a person ('FIZYCZNA'), it concatenates the first and last name; otherwise, it displays the company name. This ensures appropriate display based on entity type.

```javascript
// Show name for person, company name for organization
If($context.item.kontrahent.typ='FIZYCZNA',
   Concat($context.item.kontrahent.imie1,' ',$context.item.kontrahent.nazwisko1),
   $context.item.kontrahent.nazwa)
```

--------------------------------

### JavaScript Conditional Styling

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

JavaScript code snippet for applying conditional styling to elements. This example changes the background color based on the item's status, using different hex color codes for 'Active' and other statuses.

```javascript
"styles": [
  If($context.item.status='Active', 'background-color: #DBF1CE', 
                                     'background-color: #F0F0F0')
]
```

--------------------------------

### JavaScript Complex Field Validation with Concat

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

An example of complex field validation in JavaScript, checking for blank nested fields within a data structure. It concatenates messages to provide specific feedback to the user.

```javascript
If(IsBlank($context.item.dane.kontrahent), 
   'Wypełnij dane kontrahenta', '')
```

--------------------------------

### JavaScript Conditional Required Field Validation

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

A JavaScript validation pattern for conditionally making a field required based on other field values. This example checks for a specific contract type ('D') and if the amount field is blank.

```javascript
If($context.item.typUmowy='D' and IsBlank($context.item.kwota),
   'Kwota jest wymagana dla umów dochodowych', '')
```

--------------------------------

### JavaScript Select/Dropdown Data Binding

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Configuration for a 'SELECT' component, demonstrating data binding from a context datasource. It maps display names and specifies a unique key for values, suitable for dropdowns and select lists.

```javascript
{
  "type": "SELECT",
  "datasource": {
    "type": "context",
    "dataPath": "availableOptions",
    "isGlobal": true
  },
  "labelMapper": "$option.name",
  "valueUniqueKey": "id"
}
```

--------------------------------

### JavaScript Component Actions Definition

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Defines the structure for action handlers within UI components, such as initialization ('onInit') and click events ('onClick'). It specifies action types and potential steps for execution.

```javascript
{
  "actions": {
    "onInit": {
      "name": "initialize",
      "type": "ACTION",
      "steps": [/* action steps */]
    },
    "onClick": {
      "name": "handleClick",
      "type": "ACTION",
      "steps": [/* action steps */]
    },
    "onQueryParams": []
  }
}
```

--------------------------------

### Define Action Step with API Call and Assignment

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This snippet defines a structured action step for a workflow. It includes submitting data to a REST API endpoint using POST method and mapping path variables. After the API call, it assigns the result to a global context variable. Dependencies include environment variables for API URIs.

```javascript
{
  "guid": "unique-id",
  "name": "actionName",
  "type": "ACTION",
  "steps": [
    {
      "type": "SUBMIT",
      "target": {
        "url": "{ENV.BASE_API_URI}/api/endpoint",
        "method": "POST",
        "pathVariablesMapping": [
          {
            "source": "$context.item.id",
            "target": "id"
          }
        ]
      }
    },
    {
      "type": "ASSIGN",
      "assignments": [
        {
          "source": { "type": "actionResult" },
          "target": {
            "key": "variableName",
            "scope": "globalContext"
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### CSS Responsive Grid Styling

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

CSS code for creating a responsive grid layout. It utilizes `display: grid`, `grid-template-columns` with `repeat(auto-fit, minmax(380px, 1fr))`, and `grid-gap` to ensure elements adapt to different screen sizes.

```css
"styles": [
  "display: grid",
  "grid-template-columns: repeat(auto-fit, minmax(380px, 1fr))",
  "grid-gap: 10px"
]
```

--------------------------------

### Workflow Styling

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Demonstrates how to apply conditional styling to elements based on workflow status.

```APIDOC
## Workflow Styling

### Workflow Status Colors

#### Description
Applies background colors to an element based on the `workflowStatus` field. Different colors are assigned to 'Robocza' (Draft), 'Zaakceptowano' (Accepted), and any other status.

#### Method
Client-side expression

#### Endpoint
N/A (Client-side logic)

#### Parameters
None

#### Request Body
None

### Request Example
```javascript
"styles": [
  If($context.item.workflowStatus='Robocza', 
     'background-color: #DADFF7',
     If($context.item.workflowStatus='Zaakceptowano', 
        'background-color: #DBF1CE',
        'background-color: #F2F8FD'))
]
```

### Response
#### Success Response (200)
N/A (Client-side styling)

#### Response Example
N/A
```

--------------------------------

### POST /api/endpoint

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This endpoint is used within an action step to submit data. It supports path variable mapping and can process results for further assignments.

```APIDOC
## POST /api/endpoint

### Description
This endpoint is part of an action step that submits data to a specified URL. It allows for dynamic path variable mapping based on context and can handle subsequent assignments based on the action's result.

### Method
POST

### Endpoint
{ENV.BASE_API_URI}/api/endpoint

### Parameters
#### Path Parameters
- **id** (string) - Required - Maps to the source $context.item.id

#### Query Parameters
None

#### Request Body
- **guid** (string) - Required - Unique identifier for the action.
- **name** (string) - Required - Name of the action.
- **type** (string) - Required - Must be 'ACTION'.
- **steps** (array) - Required - A list of steps to execute.
  - **type** (string) - Required - Type of step, e.g., 'SUBMIT', 'ASSIGN'.
  - **target** (object) - Required for SUBMIT steps - Defines the submission target.
    - **url** (string) - Required - The URL to submit to.
    - **method** (string) - Required - The HTTP method (e.g., 'POST').
    - **pathVariablesMapping** (array) - Optional - Maps context variables to path variables.
      - **source** (string) - Required - The source variable path.
      - **target** (string) - Required - The target path variable name.
  - **assignments** (array) - Required for ASSIGN steps - Defines variable assignments.
    - **source** (object) - Required - The source of the data to assign.
      - **type** (string) - Required - Type of source, e.g., 'actionResult'.
    - **target** (object) - Required - The target variable.
      - **key** (string) - Required - The name of the variable to assign to.
      - **scope** (string) - Required - The scope of the variable (e.g., 'globalContext').

### Request Example
```json
{
  "guid": "unique-id",
  "name": "actionName",
  "type": "ACTION",
  "steps": [
    {
      "type": "SUBMIT",
      "target": {
        "url": "{ENV.BASE_API_URI}/api/endpoint",
        "method": "POST",
        "pathVariablesMapping": [
          {
            "source": "$context.item.id",
            "target": "id"
          }
        ]
      }
    },
    {
      "type": "ASSIGN",
      "assignments": [
        {
          "source": { "type": "actionResult" },
          "target": {
            "key": "variableName",
            "scope": "globalContext"
          }
        }
      ]
    }
  ]
}
```

### Response
#### Success Response (200)
- **result** (any) - The result of the action execution.

#### Response Example
```json
{
  "result": "Success"
}
```
```

--------------------------------

### Currency Formatting Function in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Illustrates the use of the `ToCurrency` function for formatting numerical amounts into a currency string, typically with two decimal places. It also shows how to concatenate currency symbols.

```javascript
ToCurrency(amount)
// Examples:
ToCurrency($context.item.kwotaBrutto)  // Returns: "1,234.56"
Concat(ToCurrency($context.item.kwota),' zł')  // Returns: "1,234.56 zł"
```

--------------------------------

### Common Pattern: Display Full Name

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

A simple pattern using `Concat` to combine first and last name fields from the context item, separated by a space, to display a full name.

```javascript
Concat($context.item.kontrahent.imie1,' ',$context.item.kontrahent.nazwisko1)
```

--------------------------------

### Form Component Structure Definition

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Defines the JSON structure for a 'FORM' component, including fields with keys, context settings (global or variable context), and validation properties. This template is used for building input forms.

```json
{
  "type": "FORM",
  "fields": [
    {
      "key": "fieldName",
      "context": {
        "isGlobal": true,
        "contextVariableName": "variableName"
      },
      "required": false,
      "validators": []
    }
  ]
}
```

--------------------------------

### JavaScript Iterable List Data Binding

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Configuration for an 'ITERABLE' component, used for displaying lists or arrays. It binds to a specified array field in the context and includes a placeholder for defining the template for each item in the list.

```javascript
{
  "type": "ITERABLE",
  "datasource": "$context.item.arrayField",
  "itemTemplate": [
    // Template for each item
  ]
}
```

--------------------------------

### Custom Actions

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Custom actions available for specific entities, such as copying documents or managing agreement reservations.

```APIDOC
## Custom Actions

### Copy document

- **Method**: POST
- **Endpoint**: `/documents/{id}/copy`

### Reserve agreement

- **Method**: PUT
- **Endpoint**: `/agreements/{id}/reserve`

### Cancel agreement reservation

- **Method**: PUT
- **Endpoint**: `/agreements/{id}/revoke-reservation`

### Get agreement points

- **Method**: GET
- **Endpoint**: `/agreements/{id}/points`
```

--------------------------------

### Common Pattern: Status Mapping

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Uses nested `If` functions to map internal workflow status codes (e.g., 'Robocza') to more user-friendly display text (e.g., 'Draft'). This is useful for internationalization or simplifying status representation.

```javascript
If($context.item.workflowStatus='Robocza','Draft',
  If($context.item.workflowStatus='Zaakceptowano','Approved','Other'))
```

--------------------------------

### Standard CRUD Operations

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Standard CRUD operations for OData entities. Supports listing, retrieving, creating, updating, and deleting entities.

```APIDOC
## Standard CRUD Operations

### List all entities

- **Method**: GET
- **Endpoint**: `/odata/EntityName`

### Get entity by ID

- **Method**: GET
- **Endpoint**: `/odata/EntityName({id})`

### Create entity

- **Method**: POST
- **Endpoint**: `/odata/EntityName`

### Update entity

- **Method**: PUT
- **Endpoint**: `/odata/EntityName({id})`

### Delete entity

- **Method**: DELETE
- **Endpoint**: `/odata/EntityName({id})`
```

--------------------------------

### Accessing Context Variables in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Demonstrates how to access current item properties, nested properties, global variables, and query parameters within the JavaScript environment of the tool. This is fundamental for data retrieval and manipulation.

```javascript
// Access current item property
$context.item.propertyName

// Access nested properties
$context.item.dane.kontrahent.nazwisko1

// Access global data
$global.daneUmowy.numer

// Access query parameters
$queryParams.id
```

--------------------------------

### Common Pattern: Display Formatted Currency

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

A common pattern combining `Concat` and `ToCurrency` to display a monetary value with a currency symbol ('zł'). This is frequently used in UI elements displaying financial data.

```javascript
Concat(ToCurrency($context.item.kwotaCalkowita),' zł')
```

--------------------------------

### Apply Conditional Workflow Status Styling

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This JavaScript snippet shows how to apply conditional background colors to elements based on the workflow status. It uses nested `If` functions to check the status ('Robocza', 'Zaakceptowano') and assign specific CSS style strings. This allows for visual cues in the UI.

```javascript
// Conditional styling based on status
"styles": [
  If($context.item.workflowStatus='Robocza', 
     'background-color: #DADFF7',
     If($context.item.workflowStatus='Zaakceptowano', 
        'background-color: #DBF1CE',
        'background-color: #F2F8FD'))
]
```

--------------------------------

### OData Custom Actions

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Custom OData endpoints for performing specific business logic actions on entities, such as copying, reserving, revoking reservations, or retrieving specific data points. These are extensions to standard CRUD operations.

```http
POST   /documents/{id}/copy         - Copy document
PUT    /agreements/{id}/reserve     - Reserve agreement
PUT    /agreements/{id}/revoke-reservation - Cancel reservation
GET    /agreements/{id}/points      - Get agreement points
```

--------------------------------

### OData Standard CRUD Operations

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Standard RESTful OData endpoints for performing Create, Read, Update, and Delete operations on entities. These endpoints follow common OData conventions for interacting with backend data sources.

```http
GET    /odata/EntityName           - List all
GET    /odata/EntityName({id})     - Get by ID
POST   /odata/EntityName           - Create
PUT    /odata/EntityName({id})     - Update
DELETE /odata/EntityName({id})     - Delete
```

--------------------------------

### Format Polish Currency

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This JavaScript snippet demonstrates formatting a numerical value into Polish currency format. It uses the `ToCurrency` function to format the number and `Concat` to append the currency symbol 'zł'. The output is a string representing the formatted currency.

```javascript
Concat(ToCurrency($context.item.kwotaBrutto),' zł')
// Output: "1 234,56 zł"
```

--------------------------------

### OData Data View Component Structure

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Specifies the JSON structure for an 'ODATA_VIEW' component, used for displaying data from an OData source. It includes the entity model, API URL, display modes (table, list), and context variable assignment.

```json
{
  "type": "ODATA_VIEW",
  "model": "EntityName",
  "url": "{ENV.BASE_API_URI}/odata",
  "modes": ["table", "list"],
  "context": {
    "contextVariableName": "dataView"
  }
}
```

--------------------------------

### Type Conversion Function in JavaScript

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

Shows the usage of the `ToString` function to convert a value, such as a number, into its string representation. This is useful for concatenation or display purposes.

```javascript
ToString(value)
// Example:
ToString($context.item.kwotaBrutto)
```

--------------------------------

### JavaScript Required Field Validation

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

A JavaScript validation pattern that checks if a specific field is blank and returns an error message if it is. This ensures essential data is provided by the user.

```javascript
If(IsBlank($context.item.requiredField), 
   'Pole wymagane', '')
```

--------------------------------

### Validate Vacation Request Date Input

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

This JavaScript snippet demonstrates form validation for a vacation request. It checks if the overtime vacation date field is blank using the `IsBlank` function and displays an error message if it is. This ensures required date fields are filled before proceeding.

```javascript
// Check if overtime vacation date is selected
If(IsBlank($context.item.dane.dataOd), 
   ShowError('Wypełnij datę urlopu za nadgodziny'), '')
```

--------------------------------

### JavaScript Email Format Validation

Source: https://github.com/martatezet/context7documentary2/blob/main/dok total.txt

A JavaScript validation function to check if an email address contains the '@' symbol, indicating a basic valid format. It returns an error message if the format is incorrect.

```javascript
If(not Contains($context.item.email, '@'), 
   'Invalid email format', '')
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.