Admin panel

{
  "id": "my-custom-page",
  "name": "My Page",
  "components": [
  ]
}

{
  "id": "my-custom-id-empty-page",
  "name": "Empty page",
  "components": [
    {
      "type": "button",
      "id": "do_some_funky_logic",
      "label": "CLICK ME NOW!",
      "onClick": []
    }
  ]
}

{
  "id": "my-custom-id-empty-page",
  "name": "Empty page",
  "components": [
    {
      "type": "button",
      "id": "do_some_funky_logic",
      "label": "CLICK ME NOW!",
      "onClick": [
        {
          "type": "query",
          "query": "mysql-post-delete",
          "dataKeyName": "deletePost",
          "params": [
            {
              "name": "id",
              "value": "window.appGlobalState.postsList.filter(item => { return item.internalFieldRowSelected }).map(item => {return item.id})"
            }
          ]
        }
      ],
      "onClickSuccess": [
        {
          "type": "notification",
          "message": "Show me!"
        }
      ]
    }
  ]
}

console.log(window.appGlobalState)

{
  "type": "javascript",
  "javascript": [ //you can provide javascript as array of strings or string
    "console.log('first line');",
    "console.log('second line');"
  ]
}

{
  "type": "javascript",
  "javascript": "console.log('first line'); console.log('second line');"
}

{
  "type": "notification",
  "message": "this is sample notification"
}

{
  "type": "query",
  "query": "estate-types",
  //query id that you want to run
  "dataKeyName": "myCustomQueryResponse",
  "params": [
    {
      "name": "name",
      "value": "appGlobalState.inputValue"
    },
    {
      "name": "limit",
      "value": 200
    }
  ],
  "isErrorResponse": "response.statusCode !== 200 || response.data.Data.length > 0", //that way you can start error logic
  "processResponse": "",
  "extractResponseData": [
    "return response.data.Data.map(item => { return {\"name\" : item.code, \"value\" : item.id  }) })"
  ]
}

console.log(window.appGlobalState.myCustomQueryResponseSuccess)
console.log(window.appGlobalState.myCustomQueryResponseError)

{
  "type": "reload",
  "component": "estate-list-table" //componentId that you would like to reload
}

{
  "id": "pagination-page",
  "name": "Pagination page",
  "components": [
    {
      "type": "pagination",
      "id": "samplePagination",
      "onClick": []
    },
    {
      "type": "input",
      "id": "samplePaginationItemsCount",
      "default": 10,
      "onChange": [
        {
          "type": "reload",
          "component": "samplePagination"
        }
      ]
    },
    {
      "type": "input",
      "id": "samplePaginationItemsPerPage",
      "default": 10,
      "onChange": [
        {
          "type": "reload",
          "component": "samplePagination"
        }
      ]
    }
  ]
}

{
  "type": "static-data",
  "id": "static-data-page-size",
  "dataKeyName": "staticPaginationData",
  "data": [
    {
      "value": 66,
      "name": 66
    },
    {
      "value": 10,
      "name": 10
    },
    {
      "value": 15,
      "name": 15
    },
    {
      "value": 30,
      "name": 30
    }
  ]
}

{
  "type": "select",
  "id": "devicesPaginationItemsPerPage",
  "dataKeyName": "staticPaginationData",
  "valueKeyName": "value",
  "labelKeyName": "name",
  "default": 15,
  "onSelect": [
    {
      "type": "javascript",
      "javascript": [
        "appGlobalState.devicesPaginationCurrentPage = 1"
      ]
    },
    {
      "type": "reload",
      "component": "devicesTable"
    },
    {
      "type": "reload",
      "component": "devicesPagination"
    }
  ],
  "onInit": [
    {
      "type": "static-data",
      "id": "static-data-page-size",
      "dataKeyName": "staticPaginationData",
      "data": [
        {
          "value": 5,
          "name": 5
        },
        {
          "value": 10,
          "name": 10
        },
        {
          "value": 15,
          "name": 15
        },
        {
          "value": 30,
          "name": 30
        }
      ]
    }
  ]
}

{
  "type": "button",
  "id": "someButtonId",
  "label": "Delete selected",
  "btnActive": " return 1=1 ", //dynamic condition to determine if btn is clickable
  "visibilityCondition": "",
  "onClick": [],
  "onClickSuccess": [],
  "onClickError": [],
  "onClickFinally": []
}

{
  "type": "form",
  "id": "addEditForm",
  "x": 10,
  "y": 0,
  "width": 550,
  "height": 550,
  "visibilityCondition": "return true",
  "components": []
}

{
  "type": "input",
  "id": "search",
  "default": "",
  "x": 0,
  "y": 10,
  "label": "Search",
  "onChange": [],
  "onFocus": [],
  "onFocusFinally": []
}

    {
      "type": "modal",
      "id": "dataForm",
      "title": "Add / Edit",
      "width": 800,
      "height": 800,
      "visibilityCondition": "true",
      "components": [],
      "onInit": [],
      "onInitSuccess": [],
      "onInitError": [],
      "onInitFinally": []
    }

{
  "type": "pagination",
  "id": "pagination",
  "itemsPerPage": 15,
  "visibilityCondition": "true",
  "active": "true",
  "x": 0,
  "y": 780,
  "onClick": [],
  "onClickSuccess": [],
  "onClickError": [],
  "onClickFinally": []
}

{
  "type": "select",
  "id": "orderStatus",
  "valueKeyName": "value", //value from privided data (see data below)
  "labelKeyName": "name", //those values must match
  "label": "Order status",
  "default": "new",
  "multiSelect": false,
  "visibilityCondition": "true",
  "dataKeyName": "orderStatus",
  "x": 900,
  "y": 80,
  "onInit": [
    { //data will be avilable in window.appGlobalState.orderStatus
      "type": "static-data",
      "data": [
        {
          "value": "new",
          "name": "New"
        },
        {
          "value": "paid",
          "name": "Paid"
        },
        {
          "value": "returned",
          "name": "Returned"
        }
      ]
    }
  ],
  "onInitSuccess": [],
  "onInitError": [],
  "onInitFinally": [],
  "onSelect": [],
  "onSelectSuccess": [],
  "onSelectError": [],
  "onSelectFinally": []
}

{
  "type": "table",
  "id": "resultsTable",
  "multiSelect": true,
  "dataKeyName": "orders",
  "visibilityCondition": "return true",
  "x": 10,
  "y": 80,
  "width": 800,
  "defaultRowsSelector": [
    "return [];"
  ],
  "onInit": [],
  "onInitSuccess": [],
  "onInitError": [],
  "onInitFinally": [],
  "onRowSelect": [],
  "onRowSelectFinally": [],
  "fields": [
    {
      "label": "ID",
      "data": "row.id",
      "type": "text"
    },
    {
      "label": "Tokens",
      "data": "{{row.tokens + ' some text'}}",
      "type": "text"
    }
  ]
}