N2O Framework

https://n2o.i-novus.ru/docs
Admin
N2O Framework is an open-source Java and React library for building web applications with complex...
Tokens:282,293
Snippets:2,353
Trust Score:6.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### progress Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the progress component.

```xml
<progress id="progress" max="100" color="info"/>  
```

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

### Submit Action Example

Source: https://n2o.i-novus.ru/docs/guides/xml/action

Example of submitting a data source.

```xml
<submit datasource="ds"/>  
```

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

### formatNameWithInitials Data Example

Source: https://n2o.i-novus.ru/docs/guides/manual/data

Example input and output for the formatNameWithInitials function.

```text
Входные данные:  
"Толстой", "Лев", "Николаевич"  
  
Выходные данные:  
"Толстой Л.Н."
```

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

### input-select example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

Example usage of the input-select component.

```xml
<input-select id="gender" label="Пол" query-id="genders" type="single"/>  
```

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

### List Component Example

Source: https://n2o.i-novus.ru/docs/guides/xml

Example usage of the list component.

```xml
<list color="secondary" size="3"/>  
```

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

### Link action example

Source: https://n2o.i-novus.ru/docs/guides/xml

Example of an <a> tag configured to open a URL in a new window.

```xml
<a href="https://google.com" target="newWindow"/>  
```

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

### Browser Storage Example

Source: https://n2o.i-novus.ru/docs/guides/xml/datasource

Example of a browser-storage component with submit and dependency configurations.

```xml
<browser-storage id="ds" key="store" type="localStorage">  
    <submit type="localStorage" auto="false" key="store" model="filter"/>  
    <dependencies>  
        <fetch on="ds2"/>  
        ...  
    </dependencies>  
</browser-storage>  
```

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

### auto-complete example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

Example usage of the auto-complete component.

```xml
<auto-complete query-id="labels" value-field-id="surname"  
               search-filter-id="surnameLike" tags="true"/>  
```

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

### output-list Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the output-list component.

```xml
<output-list id="list" label-field-id="label" href-field-id="link"  
             target="application" direction="row" separator=","/>  
```

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

### password Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the password component.

```xml
<password id="password" eye="true"/>  
```

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

### Install http-proxy-middleware

Source: https://n2o.i-novus.ru/docs/guides/manual/customization

Command to install the proxy middleware dependency for development.

```bash
yarn add http-proxy-middleware --dev
```

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

### date Data Example

Source: https://n2o.i-novus.ru/docs/guides/manual/data

Example input and output for the date function.

```text
Входные данные:  
"2022-09-12"  
  
Выходные данные:  
"12.09.2022"
```

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

### search-button Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the search-button component.

```xml
<search-button id="search" color="danger" badge="test" icon="fa fa-search"/>  
```

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

### markdown Formatting Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

Comprehensive example showing formatting, lists, and links in markdown.

```xml
<markdown>  
    Text attributes _italic_, **bold**, `monospace`.  
  
    Paragraphs are separated  
    by a blank line.  
  
    Two spaces at the end of a line  
    produce a line break.  
  
    Bullet lists nested within numbered list:  
  
      1. fruits  
         * apple  
         * banana  
      2. vegetables  
         - carrot  
         - broccoli  
  
    A [link](http://example.com).  
</markdown>  
```

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

### dateWithInput Data Example

Source: https://n2o.i-novus.ru/docs/guides/manual/data

Example input and output for the dateWithInput function.

```text
Входные данные:  
"9.9.2022", "d.M.yyyy"  
  
Выходные данные:  
"09.09.2022"
```

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

### Overlay component example

Source: https://n2o.i-novus.ru/docs/guides/xml/widget

Example of an overlay component containing a toolbar with buttons and sub-menus.

```xml
<overlay class="top">  
    <toolbar>  
        <button label="Кнопка"/>  
        <sub-menu label="Меню">  
            <menu-item label="Кнопка1"/>  
            <menu-item label="Кнопка2"/>  
        </sub-menu>  
    </toolbar>  
</overlay>  
```

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

### output-text Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the output-text component.

```xml
<output-text id="text" icon="fa fa-plus" icon-position="right" format="number 0,0.00"/>  
```

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

### Install Sass

Source: https://n2o.i-novus.ru/docs/guides/manual/customization

Command to install the sass library for style compilation.

```bash
yarn add sass --dev
```

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

### Column Dependencies Example

Source: https://n2o.i-novus.ru/docs/guides/xml/widget

Example of defining dependencies within a column.

```xml
<column text-field-id="name">  
  <dependencies>  
      <visibility>  
        ...  
      </visibility>  
  </dependencies>  
</column>  
```

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

### dateWithInputAndOutput Data Example

Source: https://n2o.i-novus.ru/docs/guides/manual/data

Example input and output for the dateWithInputAndOutput function.

```text
Входные данные:  
"3.8.2011 10:15:00", "d.M.yyyy HH:mm:ss", "yyyy-MM-dd''T''HH:mm:ss"  
  
Выходные данные:  
"2011-08-03T10:15:00"
```

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

### Refresh Action Example

Source: https://n2o.i-novus.ru/docs/guides/xml/action

Example of refreshing a specific data source.

```xml
<refresh datasource="reports"/>  
```

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

### Input Money Component Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

An example of the input-money component usage in XML.

```xml
<input-money id="money" prefix="$" thousands-separator=" "  
    decimal-separator="," integer-limit="100" fraction-formatting="manual">  
</input-money>
```

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

### Set-Value Action Examples

Source: https://n2o.i-novus.ru/docs/guides/xml/action

Examples of setting values in a model using JS expressions.

```xml
<set-value target-datasource="users" target-model="resolve" to="fullname">  
    return firstName + ' ' + lastName;  
</set-value>  
```

```xml
<set-value to="clock">  
    moment().format('hh:mm:ss')  
</set-value>  
```

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

### Image Upload Component Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

An example of the image-upload component usage in XML.

```xml
<image-upload id="icon" label="Загрузить изображение"  
             list-type="card" can-lightbox="true"  
             can-delete="false" width="500px"  
             multi="true"  
             ajax="true" upload-url="/n2o/data"  
             delete-url="/files/delete/{file.id}"  
             value-field-id="hash"  
             label-field-id="filename"  
             url-field-id="url" show-size="true"  
             accept=".img,.png"/>
```

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

### file-upload XML example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

An example of a file-upload component configured with specific URLs and field mappings.

```xml
<file-upload id="file" label="Загрузить файл"  
             class="custom-class" multi="true"  
             ajax="true" upload-url="/n2o/data"  
             delete-url="/files/delete/{file.id}"  
             value-field-id="hash"  
             label-field-id="filename"  
             url-field-id="url" show-size="true"  
             accept=".img,.png"/>
```

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

### Configure setupProxy.js

Source: https://n2o.i-novus.ru/docs/guides/manual/customization

Create this file in the src directory to define the target server for proxying requests.

```javascript
const {createProxyMiddleware} = require('http-proxy-middleware');  
module.exports = function (app) {  
    app.use(  
        '/n2o',  
        createProxyMiddleware({  
            // URL целевого сервера (локальный или удаленный)  
            target: "http://localhost:8080",  
            changeOrigin: true  
        })  
    );  
};
```

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

### Start Development Server

Source: https://n2o.i-novus.ru/docs/guides/manual/customization

Command to launch the application in development mode.

```bash
yarn start
```

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

### checkbox-group example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

Example usage of the checkbox-group component.

```xml
<checkbox-group id="gender" inline="false" type="default"/>  
```

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

### search-buttons Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the search-buttons component.

```xml
<search-buttons id="search" clear-ignore="name,surname"/>  
```

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

### rating Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

XML usage example for the rating component.

```xml
 <rating max="5" show-tooltip="false" half="false"/>  
```

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

### dropdown-menu component configuration and example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Configures global settings for dropdown menus and provides an example of a dropdown menu with an image and nested items.

```properties
# Способ активации выпадающего меню  
n2o.api.menu.dropdown.trigger = click  
# Расположение выпадающего меню относительно элемента  
n2o.api.menu.dropdown.position = auto
```

```xml
<dropdown-menu id="list"  
               name="Список действий"  
               image="/static/image.png"  
               image-shape="circle">  
    <menu-item>...</menu-item>  
    <dropdown-menu>...</dropdown-menu>  
</dropdown-menu>
```

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

### N2O open-drawer XML Example

Source: https://n2o.i-novus.ru/docs/guides/xml/action

Example of the open-drawer XML structure, showing how to define the page-id and include optional parameters, datasources, breadcrumbs, toolbars, and actions.

```xml
<open-drawer  
       page-id="employee">  
    <params>  
        <path-param>...</path-param>  
        <query-param>...</query-param>  
    </params>  
    <datasources>...</datasources>  
    <breadcrumbs>...</breadcrumbs>  
    <toolbars>...</toolbars>  
    <actions>...</actions>  
</open-drawer>
```

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

### Link Component Example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Example of a link component configured with URL, icon, target, and path/query parameters.

```xml
<link  
    label="label"  
    href="http://test.ru"  
    icon="fa fa-plus"  
    target="self">  
    <path-param>...</path-param>  
    <query-param>...</query-param>  
</link>
```

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

### icon usage examples

Source: https://n2o.i-novus.ru/docs/guides/xml/cell

Examples of simple icon usage and icon usage with a switch component for conditional rendering.

```xml
<icon class="fa-pencil"/>  
```

```xml
<icon class="fa-id-card-o">  
    <switch>  
       <case value="1">success</case>  
       <case value="2">danger</case>  
       <default>info</default>  
    </switch>  
</icon>  
```

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

### Flex-row component example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Example usage of the flex-row component.

```xml
<flex-row align="stretch">  
    <nav style="width: 200px">...</nav>  
    <sub-page>...</sub-page>  
</flex-row>  
```

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

### period Data Example

Source: https://n2o.i-novus.ru/docs/guides/manual/data

Example input and output for the period function.

```text
Входные данные:  
"12.09.2022", "13.09.2022"  
  
Выходные данные:  
"12.09.2022 - 13.09.2022"
```

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

### Click Action Example

Source: https://n2o.i-novus.ru/docs/guides/xml

Shows how to define a click action that triggers a widget action, such as opening a page.

```xml
<click action-id="view">  
  <open-page .../>  
</click>  
```

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

### Configure Application Header

Source: https://n2o.i-novus.ru/docs/guides/xml/application

Example of defining the application header with navigation, extra menu, and search components.

```xml
<?xml version='1.0' encoding='UTF-8'?>  
<application xmlns="http://n2oapp.net/framework/config/schema/application-3.0">  
    <header title="N2O">  
        <nav>...</nav>  
        <extra-menu>...</extra-menu>  
        <search query-id="q1">...</search>  
    </header>  
</application>
```

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

### Button Component Examples

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Examples of button usage with labels, colors, alerts, and action IDs.

```xml
<button label="Кнопка" color="danger">  
    <alert text="test" color="success"/>  
</button>  
<button label="Кнопка" action-id="act1"/>
```

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

### dateWithOutput Data Example

Source: https://n2o.i-novus.ru/docs/guides/manual/data

Example input and output for the dateWithOutput function.

```text
Входные данные:  
"2022-09-12", "dd.M.yyyy"  
  
Выходные данные:  
"12.9.2022"
```

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

### Multi-form with Dependencies and Toolbar Actions

Source: https://n2o.i-novus.ru/docs/guides/manual/components

An example demonstrating field dependencies for full name calculation and a toolbar button to add new items to the multi-form list.

```xml
<form>  
    <multi-form fetch-on-init="true" fetch-on-visibility="true"  
                        unsaved-data-prompt="true" auto-focus="true" datasource="ds">  
        <fields>  
            <row>  
                <input-text id="firstName"  
                            label="Имя"  
                            text-field-id="firstName"/>  
                <input-text id="lastName"  
                            label="Фамилия"  
                            text-field-id="lastName"/>  
                <text id="fullName" label="Полное имя">  
                    <dependencies>  
                        <set-value on="firstName,lastName">  
                            if (firstName &amp;&amp; lastName)  
                                return firstName + ' ' + lastName  
                        </set-value>  
                    </dependencies>  
                </text>  
                <input-text id="organization"  
                            label="Организация"  
                            text-field-id="organization.name"/>  
            </row>  
            <button label="Посмотреть описание организации" enabled="{organization.id != null}">  
                <open-page page-id="organization" route="/organization/:organizationId/view">  
                    <params>  
                        <path-param name="organizationId" value="{organization.id}"/>  
                    </params>  
                </open-page>  
            </button>  
        </fields>  
        <toolbar>  
            <button label="Добавить"  
                    color="primary"  
                    disable-on-empty-model="false"  
                    validate="false">  
                <set-value>  
                    this ? [{}, ...this] : [{}]  
                </set-value>  
            </button>  
        </toolbar>  
    </fields>  
</form>
```

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

### Data Provider Incoming Parameters Example

Source: https://n2o.i-novus.ru/docs/guides/xml

Example of defining incoming parameters using <in> with simple fields and list structures.

```xml
<in>  
  <field id="gender*.id" domain="integer[]" mapping="genders" param="param"/>  
  <list id="ratings" mapping="ratings">  
    <field id="code" mapping="code"/>  
    <field id="name" mapping="name"/>  
  </list>  
</in>  
```

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

### Блокирование поля ввода через <enabling>

Source: https://n2o.i-novus.ru/docs/guides/manual/dependency

Используйте элемент <enabling> внутри <dependencies> для управления доступностью поля ввода на основе значения другого поля в источнике данных.

```xml
<input-text id="maidenName" label="Девичья фамилия">  
  <dependencies>  
    <!-- Поле "Девичья фамилия" доступно для редактирования, если пол женский, где  
         gender - это поле в источнике данных виджета с текущей моделью данных -->  
    <enabling on="gender">gender == 'woman'</enabling>  
  </dependencies>  
</input-text>  
```

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

### RadioGroup Usage Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

Basic usage example of a radio-group component.

```xml
<radio-group id="gender" inline="false" type="default"/>
```

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

### File-upload component example

Source: https://n2o.i-novus.ru/docs/guides/xml

Basic implementation of the file-upload component.

```xml
<file-upload label="Загрузить файл"  
             upload-url="/files/upload"  
             delete-url="/files/delete"  
             accept=".img,.png"/>
```

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

### Implement widget pagination

Source: https://n2o.i-novus.ru/docs/guides/xml/widget

Example of configuring the <pagination> component within a widget.

```xml
<pagination  
  prev="true"  
  next="true"  
/>
```

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

### Menu Item Example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Example of a menu-item containing a table and a form.

```xml
<menu-item id="mi" title="Меню">  
    <table/>  
    <form/>  
</menu-item>
```

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

### Custom action configuration

Source: https://n2o.i-novus.ru/docs/guides/xml

Example of an <action> component with redirect and refresh settings.

```xml
<action type="n2o/CUSTOM_ACTION"  
        redirect-target="application" redirect-url="/main"  
        close-on-success="true" refresh-datasources="ds1,ds2"/>  
```

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

### Edit component example

Source: https://n2o.i-novus.ru/docs/guides/xml

Example of an edit component wrapping a date-time field.

```xml
<edit action-id="create,update">  
  <date-time/>  
</edit>
```

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

### Drag-n-drop column component example

Source: https://n2o.i-novus.ru/docs/guides/xml

Example of a dnd-column configured with settings mode.

```xml
<dnd-column move-mode="settings">  
    <column text-field-id="name"/>  
    <column text-field-id="type"/>  
</dnd-column>
```

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

### Define output parameters with <out>

Source: https://n2o.i-novus.ru/docs/guides/xml/base

Example of defining output parameters using fields, references, and lists.

```xml
<out>  
    <field id="gender*.id" domain="integer[]" mapping="genders" param="param"/>  
    <reference id="address">  
        <field id="city" mapping="city"/>  
        <field id="street" mapping="street"/>  
        <field id="home" mapping="home"/>  
    </reference>  
    <list id="ratings" mapping="ratings">  
      <field id="code" mapping="code"/>  
      <field id="name" mapping="name"/>  
    </list>  
</out>
```

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

### Select Usage Example

Source: https://n2o.i-novus.ru/docs/guides/xml/field

Example of a select component with cleanable set to false.

```xml
<select id="gender" label="Пол" query-id="genders" cleanable="false" />
```

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

### Standalone Widget Configuration

Source: https://n2o.i-novus.ru/docs/guides/manual/components

Example of a widget defined in a separate .widget.xml file.

```xml
<?xml version='1.0' encoding='UTF-8'?>  
<table xmlns="http://n2oapp.net/framework/config/schema/widget-5.0"  
       name="Моя таблица">  
    ...  
</table>  
```

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

### Implement file-upload component

Source: https://n2o.i-novus.ru/docs/guides/xml

Example of a file-upload component with various attributes defined.

```xml
<file-upload id="file" label="Загрузить файл"  
             class="custom-class" multi="true"  
             ajax="true" upload-url="/n2o/data"  
             delete-url="/files/delete/{file.id}"  
             value-field-id="hash"  
             label-field-id="filename"  
             url-field-id="url" show-size="true"  
             accept=".img,.png"/>  
```

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

### Dnd-column component example

Source: https://n2o.i-novus.ru/docs/guides/xml/widget

Example of a drag-and-drop column component with defined columns.

```xml
<dnd-column move-mode="settings">  
    <column text-field-id="name"/>  
    <column text-field-id="type"/>  
</dnd-column>  
```

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

### Multi-column component example

Source: https://n2o.i-novus.ru/docs/guides/xml/widget

Example of a multi-column component containing nested columns.

```xml
<multi-column label="Имя">  
  <column>...</column>  
  <column>...</column>  
</multi-column>  
```

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

### Initial index.scss Configuration

Source: https://n2o.i-novus.ru/docs/guides/manual/customization

The root style file must import the N2O core styles first.

```scss
@import "n2o-framework/src/sass/n2o.scss";  
...
```

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

### Row component example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Example usage of the row component with a nested column.

```xml
<row columns="3">  
    ...  
    <col size="2">  
        ...  
    </col>  
</row>  
```

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

### Group component example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Example usage of the group component with various attributes.

```xml
<group  
    label="Группа"  
    collapsible="false"  
    default-state="expanded"  
    icon="fa fa-plus"  
    icon-position="right">  
    <menu-item>...</menu-item>  
    <dropdown-menu>...</dropdown-menu>  
</group>  
```

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

### Define input parameters with <in>

Source: https://n2o.i-novus.ru/docs/guides/xml/base

Example of defining input parameters using simple fields and a list structure.

```xml
<in>  
  <field id="gender*.id" domain="integer[]" mapping="genders" param="param"/>  
  <list id="ratings" mapping="ratings">  
    <field id="code" mapping="code"/>  
    <field id="name" mapping="name"/>  
  </list>  
</in>
```

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

### Tab Example

Source: https://n2o.i-novus.ru/docs/guides/xml/region

Example of a tab component containing a form, panel, and table.

```xml
<tab name="Вкладка">  
    <form/>  
    <panel/>  
    <table/>  
</tab>
```
Tokens:
Raw