Read Form Design
Read the contents of the custom designed form file before rendering.
This is required when opening forms before rendering it and populating it with data.
Read Custom Form
GET File URL
This is a GET file contents method which passes both the API and session keys as headers, and the URL of the file. If successful, the file contents are returned as a JSON string.
Headers
Name
Value
Content-Type
application/json
SiteKey
API Key
DataServicesKey
Session Key
Response
{
"Name": "Nationalities",
"Namev2": "e.g. footballers or football-teams i.e. no .json extension",
"Created": "06 Nov 2024",
"Purpose": "Display a list of all nationalities represented in the footballing world.",
"WebAPI": "The web api does not care what the format of this file is. It simply reads it and writes it as a JSON string.",
"Type": "Search form or CRUD form etc..",
"Version": "1.0",
"AuthorDetails": {
"Copyright": "TriSys Business Software",
"LastUpdated": "Monday 07 July 2025 10:58:08",
"UpdatingUser": "Garry Lowther"
},
"Form": {
"Icon": "gi gi-globe_af",
"Caption": "Nationalities",
"Caption_Notes": "Displayed in the title bar of the form, but may be overriden by additional rules yet to be defined.",
"Description": "Created by Josie Musto on Friday 11 April 2025",
"EntityName": "Timesheet",
"Buttons": [
{
"ID": "save",
"Icon": "gi gi-floppy_saved",
"Caption": "Save",
"Function": "TriSysFlexiva.Forms.Events.CRUD.Update()"
},
{
"ID": "delete",
"Icon": "gi gi-remove",
"Caption": "Delete",
"Function": "TriSysFlexiva.Forms.Events.CRUD.Delete()"
},
{
"ID": "actions",
"Icon": "gi gi-magic",
"Caption": "Actons",
"Type": "dropdown",
"Items": [
{
"ID": "action1",
"Caption": "Action 1",
"Icon": "gi gi-brightness_increase",
"Function": "TriSysFlexiva.Forms.Events.CallCustomFormFunctionAnonymously('Button_Click', { ID: 'action1' })"
},
{
"ID": "action2",
"Caption": "Action 2",
"Icon": "gi gi-screenshot",
"Function": "TriSysFlexiva.Forms.Events.CallCustomFormFunctionAnonymously('Button_Click', { ID: 'action2' })"
}
]
}
],
"Type": "Lookup",
"RecordSummary": ""
},
"Tabs": [
{
"ID": "top",
"Caption": "Main Top Region",
"HTML": [
"<div class=\\"block full form-control-borderless\\">",
" <div class=\\"row\\" id=\\"cb5f7cfd-b694-6260-17fd-08d410fe7963\\">",
" <div id=\\"233a1a48-4c67-62ff-b694-51b3b49b449c\\" flexiva-data-panel=\\"eyJpZCI6IjIzM2ExYTQ4LTRjNjctNjJmZi1iNjk0LTUxYjNiNDliNDQ5YyIsInRpdGxlVGV4dCI6IllvdXIgUGFuZWwgVGl0bGUiLCJpY29uIjoiZ2kgZ2ktY2lyY2xlX2V4Y2xhbWF0aW9uX21hcmsiLCJ0eXBlIjoiRm9ybSIsInNob3dUaXRsZSI6ZmFsc2UsImJvcmRlciI6ZmFsc2UsInN0cmlwZWRSb3dzIjpmYWxzZSwiY29sdW1uQ291bnQiOjEsInJvd3NQZXJDb2x1bW4iOjEsImxhYmVsV2lkdGgiOjE1MCwidGl0bGVCYWNrZ3JvdW5kQ29sb3VyIjpudWxsLCJ0aXRsZUZvcmVncm91bmRDb2xvdXIiOm51bGx9\\" class=\\"col-md-12\\">",
" <div class=\\"toolbox-component\\" id=\\"48686a08-01a0-6113-a3b6-c1d45a04b7f0\\" flexiva-data-component=\\"eyJJRCI6IjA3NGE2NDRhLTIyOTQtODc5NS0zODNhLTc2M2JiMTU4NzE1NyIsIk5hbWUiOiJHcmlkIiwiRGVzY3JpcHRpb24iOiJEYXRhIGdyaWQgcG9pbnRpbmcgYXQgc3RhdGljIGRhdGEgb3IgV2ViIEFQSSBkYXRhIHNvdXJjZSByZXF1ZXN0IiwiSWNvbiI6ImdpIGdpLXRhYmxlIiwiVHlwZSI6IkdyaWQiLCJEYXRhU291cmNlcyI6W3siUmVxdWVzdElkIjoiNDhiMTQ4YzEtNTRmZi1jYTUyLTdlNTAtNjhjNDEzMThkZTczIiwiRGlzcGxheURlc2NyaXB0aW9uIjoiUmVzdERiLmlvICZuYnNwOyA+ICZuYnNwOyBGb290YmFsbCAmbmJzcDsgPiAmbmJzcDsgTmF0aW9uYWxpdGllcyB3aXRoIEltYWdlcyIsIlR5cGUiOiJSZWFkIn1dLCJHcmlkIjp7IkNvbHVtbnMiOlt7IkZpZWxkIjoiSUQiLCJUeXBlIjoiU3RyaW5nIiwiVmFsdWVzIjoiMTUgdmFsdWVzOiA2N2Y4ZTg3NTc4YmFkZjY1MDAwNTIyMzEsIDY3YTYwMjA4NDc3OWRlMWIwMDAyN2FmZSwgNjdmN2NiMTQ3OGJhZGY2NTAwMDRmYjRkLCA2N2Y3Y2IzMzc4YmFkZjY1MDAwNGZiNTcsIDY3ZjdjYjUyNzhiYWQuLi4iLCJWaXNpYmxlIjpmYWxzZSwiQ2FwdGlvbiI6IklEIiwiS2V5Ijp0cnVlLCJLZXlWYXJpYWJsZSI6IjwjQ29tcG9uZW50LkdyaWQuTmF0aW9uYWxpdHlJRCM+IiwiV2lkdGgiOjB9LHsiRmllbGQiOiJOYXRpb25hbGl0eSIsIlR5cGUiOiJTdHJpbmciLCJWYWx1ZXMiOiIxNSB2YWx1ZXM6IEdlcm1hbiwgRnJlbmNoLCBQb3J0dWd1ZXNlLCBOb3J3ZWdpYW4sIEVneXB0aWFuLCBTb3V0aCBLb3JlYW4sIEVuZ2xpc2gsIFNjb3R0aXNoLCBXZWxzaCwgSXJpc2gsIER1dGNoLCBTcGFuaXNoLCBCZWxnaS4uLiIsIlZpc2libGUiOnRydWUsIkNhcHRpb24iOiJOYXRpb25hbGl0eSIsIldpZHRoIjowLCJGaWx0ZXJhYmxlIjp0cnVlfSx7IkZpZWxkIjoiRmxhZ1VybCIsIlR5cGUiOiJJbWFnZSBVUkwiLCJWYWx1ZXMiOiI0IHZhbHVlczogaHR0cHM6Ly9mb290YmFsbC04OTFiLnJlc3RkYi5pby9tZWRpYS82N2Y4ZTg3NDc4YmFkZjY1MDAwNTIyMzAsIGh0dHBzOi8vZm9vdGJhbGwtODkxYi5yZXN0ZGIuaW8vbWVkaWEvNjdmOTBmNzQ3OGJhZGY2NS4uLiIsIlZpc2libGUiOnRydWUsIkNhcHRpb24iOiJGbGFnIiwiV2lkdGgiOiI5MCIsIkltYWdlU2l6ZSI6IjI0IHggMjQifSx7IkZpZWxkIjoiQ291bnRyeSIsIlR5cGUiOiJTdHJpbmciLCJWYWx1ZXMiOiIxNSB2YWx1ZXM6IEdlcm1hbnksIEZyYW5jZSwgUG9ydHVnYWwsIE5vcndheSwgRWd5cHQsIFNvdXRoIEtvcmVhLCBFbmdsYW5kLCBTY290bGFuZCwgV2FsZXMsIElyZWxhbmQsIE5ldGhlcmxhbmRzL0hvbGxhbmQsIFNwYWluLy4uLiIsIlZpc2libGUiOnRydWUsIkNhcHRpb24iOiJDb3VudHJ5IiwiV2lkdGgiOjAsIkZpbHRlcmFibGUiOnRydWV9LHsiRmllbGQiOiJGbGFnIiwiVHlwZSI6IlN0cmluZyIsIlZhbHVlcyI6IjMgdmFsdWVzOiBbXCI2N2Y4ZTg3NDc4YmFkZjY1MDAwNTIyMzBcIl0sIFtcIjY3ZjhlNWM0NzhiYWRmNjUwMDA1MjFlOFwiXSwgW1wiNjdmOTExOWQ3OGJhZGY2NTAwMDUyNzM3XCJdIiwiVmlzaWJsZSI6ZmFsc2UsIkNhcHRpb24iOiJGbGFnIiwiV2lkdGgiOjB9XSwiUG9wdWxhdGlvblRyaWdnZXIiOiJGb3JtIExvYWRlZCIsIlRyaWdnZXJpbmdDb21wb25lbnQiOiIiLCJEcmlsbERvd24iOlt7IkNvbHVtbk5hbWUiOiJOYXRpb25hbGl0eSIsIkh5cGVybGluayI6dHJ1ZSwiS2V5Q29sdW1uTmFtZSI6IklEIiwiQnV0dG9uQ29sdW1uIjpmYWxzZSwiQnV0dG9uTGFiZWwiOiIiLCJCdXR0b25XaWR0aCI6MCwiRm9ybU5hbWUiOiJOYXRpb25hbGl0eSIsIkZvcm1Nb2RhbCI6ZmFsc2V9LHsiQ29sdW1uTmFtZSI6IkNvdW50cnkiLCJIeXBlcmxpbmsiOnRydWUsIktleUNvbHVtbk5hbWUiOiJJRCIsIkJ1dHRvbkNvbHVtbiI6ZmFsc2UsIkJ1dHRvbkxhYmVsIjoiIiwiQnV0dG9uV2lkdGgiOjAsIkZvcm1OYW1lIjoiTmF0aW9uYWxpdHkiLCJGb3JtTW9kYWwiOmZhbHNlfV19LCJMYWJlbFRleHQiOiJHcmlkIiwiTGFiZWxQb3NpdGlvbiI6IkxlZnQiLCJMYWJlbFZpc2libGUiOmZhbHNlLCJSZWFkT25seSI6ZmFsc2UsIkFsdFRpdGxlIjoiIiwiVGl0bGUiOiIiLCJCb3JkZXJSYWRpdXMiOjAsIkJvcmRlcldpZHRoIjowLCJNYXhIZWlnaHQiOjAsIk1pbkhlaWdodCI6MCwiTWF4V2lkdGgiOjAsIk1pbldpZHRoIjowLCJDdXN0b21WYXJpYWJsZSI6IiIsIkRlY2ltYWxQbGFjZXMiOjB9\\" onclick=\\"ctrlFormDesigner2024.Components.Editor(this)\\" style=\\"\\">",
" </div>",
" </div>",
" </div>",
"</div>"
],
"HTML_Notes": [
"We are using an array for HTML as it makes reading easier for humans.",
"This HTML will include flexiva data tags for columns/panels and components/fields",
"to allow the form to be rendered at run-time and to be designed and saved."
],
"Description": "This is the top region of the form",
"Visible": true,
"Enabled": true,
"SelectedInDesigner": true,
"Index": 1,
"Selected": false
}
],
"DataSources": [],
"Developer": {
"Description": "This section is where developers can extend the functionality of custom forms by adding custom code.",
"FormScriptObjectName": "customForm",
"FormScriptObjectName_Description": "The object which will contain the named events e.g. var customForm = { Scripts_Loaded: function(...",
"Scripts": [],
"Scripts_Description": "Each script URL will normally be hosted on GitHub pages, and will be loaded before the custom form is loaded."
},
"DesignTimeOnly": {
"Description": "This section is not persisted, but is used at design-time to hold form edit state in memory.",
"TabsChangedSinceLastEdit": false,
"FormPropertiesChangedSinceLastEdit": false,
"ComponentsChangedSinceLastEdit": false
},
"RunTimeOnly": {
"Description": "This section is not persisted, but is used at run-time to hold live form state in memory.",
"SomeProperty": "SomeValue",
"SomeOtherProperty": "SomeOtherValue"
}
}Form URL
The URL of the form has to be determined by identifying the custom URL of the customers forms.
This is because the navigation bar only stores the name of the form, not it's full URL path.
Because each customer company has their own custom folder where their custom forms live, we need to read the custom folder from this API call made after login. This is the relevant data which was returned:
{
"LoggedInUser": {
"CRMContact": {
"CustomForms": [
{
"FileName": "Nationalities.json",
"FilePath": "custom/boggy-frogs/forms/nationalities.json",
"FullServerPath": nulll
}
],
...
}
}
}If you know the name of the form when the navigation bar item is clicked e.g. nationalities.json, then you can find this in the list of custom forms available to the logged in user.
The full URL path is thus the API Endpoint + FilePath e.g.
https://api.trisys.co.uk/custom/boggy-frogs/forms/nationalities.json
Rendered Form
This is how this example form looks at run-time after being rendered. The middle layer shows the portion of JSON which is the form design, showing a flexiva-data-component Base64 string. The top layer shows the decoded JSON for this component which is a grid with specified columns and a data source request ID.
The application must render the form, then generate the data grid, then send this specific request to the Web API to read the data from the ReST API to populate the grid.
Last updated