Configurations

RealizeJS has some default configurations that are used in its implementation, and right below we’ll present them and show how to override its settings.

Where they are

The configuration is defined in the config.js file.

restUrls

This property defines the path for REST calls. The :url and :id symbols are dynamically replaced by its respective values defined by the component’s properties. It is used by the Grid and GridForm components, to define its CRUD default action URLs.

config.js
restUrls: {
    index: ':url',
    show: ':url/:id',
    add: ':url/new',
    create: ':url',
    edit: ':url/:id/edit',
    update: ':url/:id',
    destroy: ':url/:id'
}

restMethods

This property defines which HTTP request methods is used to each action defined by the restUrls property.

config.js
restMethods: {
    index: 'GET',
    show: 'GET',
    add: 'GET',
    create: 'POST',
    edit: 'GET',
    update: 'PUT',
    destroy: 'DELETE'
}

Grid

Global properties used by the Grid component for pagination and sorting functionality.

config.js
grid: {
    pagination: {
      param: 'p',
      perPageParam: 'per_page',
      perPage: 20,
      window: 4,
      type: 'default',
      perPageOptions: [
            { name: '10', value: 10 },
            { name: '20', value: 20 },
            { name: '50', value: 50 }
        ]
    },
    sort: {
        param: 's',
        directionParam: 's_dir',
        fieldValueFormat: '%{field}'
    }
}
pagination

Here is explained how each one of grid.pagination's attributes works. Some of them can be overrided directly in the component. GridPaginationExample was implemented to make it easier to understand how to do it. In this implementation, these properties are set in the example component state to override the default settings used by the GridPagination component.

param String

Query string parameter name that informs in which page the Grid are to the back-end.

default: 'p'
Example
url?p=1
perPage Number and perPageParam String

perPage represents the number of items per page at Grid, and perPageParam is the name of the query string parameter that is used to send this information to the back-end.

perPage default: 20
perPageParam default: 'per_page'
Example
url?per_page=20
window Number

Pagination window size.

default: 4
type String

Property used to define the rendering type of the pagination. The possible types are: default and input. The default rendering display buttons for the page numbers and for the previous and next page. The input rendering presents a text input for the user to enter the page number that he wants to go.

default: 'default'
perPageOptions Array

Used as options for the perPage select input in the GridPagination component.

default: [
    { name: '10', value: 10 },
    { name: '20', value: 20 },
    { name: '50', value: 50 }
]
sort

Here is explained how each one of grid.sort's attributes works.

param String

Query string parameter name used to send to the back-end which field must be used to sort the Grid component. Depending how the sorting configuration is defined (fieldValueFormat), it can send the field sorting direction as well.

default: 's'
Example
default:
url?s=created_at

sort: {
  param: 'sorting'
}
url?sorting=created_at
directionParam String

Query string parameter name used to send to the back-end the sorting direction of the Grid component.

default: 's_dir'
Example
default:
url?s_dir=asc

sort: {
  directionParam: 'sorting_direction'
}
url?sorting_direction=asc
fieldValueFormat String

Pattern used to generate the sort parameter value sent to the back-end (defined in param). The code that uses it can be found in the Grid component, at the parseSortPostDataValue method.

default: %{field}
Example
default:
url?s=created_at&s_dir=desc

sort: {
  fieldValueFormat: '%{field},%{direction}'
}
url?s=created_at,desc

How to customize the configuration

Realize provides the setConfig function in its global object for configuration customization. This example shows how to use it.

Example
Realize.setConfig(
    {
        restUrls: {
            destroy: ':url/delete/:id'
        },

        restMethods: {
            add: 'PUT'
        },

        grid: {
            pagination: {
                param: 'pagination',
                perPageParam: 'per_table',
                perPage: 10,
                window: 2,
            },
            sort: {
                param: 'sort',
            }
        }
    }
);