api_actions

FTable API Reference - Actions

• listAction
• createAction
• updateAction
• cloneAction
• deleteAction

---

Actions

An action defines how to communicate from the client to the server. There are four types of actions:

1. listAction: Defines how to get the list of records.
2. createAction: Defines how to submit a "create new record" form.
3. updateAction: Defines how to submit an "edit record" form.
4. cloneAction: Defines how to submit a "clone record" form.
5. deleteAction: Defines how to delete a record.

Actions must be defined in the actions list of FTable options:

actions: {
    // Action definitions go here
}

An action value can be a URL string or a function. See each action for details.

---

listAction

• Type: URL string or function
• Default: None

Setting a URL string as listAction

If listAction is defined as a URL string, FTable makes an AJAX POST request to this URL to fetch the list of records. The URL must return a JSON object:

{
    "Result": "OK",
    "Records": [
        { "PersonId": 1, "Name": "Benjamin Button", "Age": 17, "RecordDate": "/Date(1320259705710)/" },
        { "PersonId": 2, "Name": "Douglas Adams", "Age": 42, "RecordDate": "/Date(1320259705710)/" }
    ]
}

• Result: Can be "OK" or "ERROR". If "OK", the Records property must contain an array of records.
• Records: An array of records to display in the table.
• Message: If Result is "ERROR", this property explains the error.

Date Formats

• /Date(milliseconds)/: Example: /Date(1320259705710)/.
• YYYY-MM-DD HH:MM:SS: Example: 2012-01-03 21:40:42.
• YYYY-MM-DD: Example: 2012-01-03.

Paging

If paging is enabled, FTable sends the following query string parameters:

• jtStartIndex: Start index of records for the current page.
• jtPageSize: Maximum number of records to fetch.

The server must return:

• TotalRecordCount: Total number of records (not just the current page).

Sorting

If sorting is enabled, FTable sends:

• jtSorting: A string representing the sorting request (e.g., Name ASC, BirthDate DESC).

Setting a Function as listAction

You can define listAction as a function. The function can return:

• The data itself.
• A promise to return the data.

Example using modern fetch API:

listAction: function (postData, jtParams) {
    return fetch('/Demo/StudentList', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .catch(error => {
        console.error('Error:', error);
        throw error;
    });
}

Example using async/await:

listAction: async function (postData, jtParams) {
    try {
        const response = await fetch('/Demo/StudentList', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        });
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

• postData: Data provided when calling the load method.
• jtParams: Contains jtStartIndex, jtPageSize, and jtSorting if paging or sorting is enabled.

---

createAction

• Type: URL string or function
• Default: None

Setting a URL string as createAction

If createAction is defined as a URL, FTable makes an AJAX POST request to this URL to save a new record. The URL must return a JSON object:

{
    "Result": "OK",
    "Record": { "PersonId": 5, "Name": "Dan Brown", "Age": 55, "RecordDate": "/Date(1320262185197)/" }
}

• Result: Can be "OK" or "ERROR".
• Record: The newly created record (required if Result is "OK").
• Message: Error message if Result is "ERROR" (required in the ERROR case, otherwise a "communication error" will be shown). If this property is present when Result is "OK", then an info-dialog will show with this message after the record has been inserted (only if the insert is done via the add-record button in the toolbar).

Setting a Function as createAction

You can define createAction as a function. The function can return:

• The data itself.
• A promise to return the data.

Example using modern fetch API:

createAction: function (postData) {
    return fetch('/Demo/CreatePerson', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .catch(error => {
        console.error('Error:', error);
        throw error;
    });
}

Example using async/await:

createAction: async function (postData) {
    try {
        const response = await fetch('/Demo/CreatePerson', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        });
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

---

updateAction

• Type: URL string or function
• Default: None

Setting a URL string as updateAction

If updateAction is defined as a URL, FTable makes an AJAX POST request to this URL to update a record. The URL must return a JSON object:

{
    "Result": "OK",
    "Record": { "Name": "Dan Brown", "Age": 55, "LastUpdateDate": "/Date(1320262185197)/" }
}

• Result: Can be "OK" or "ERROR".
• Record: Optional. Overwrites fields in the updated record.
• Message: Error message if Result is "ERROR" (required in the ERROR case, otherwise a "communication error" will be shown). If this property is present when Result is "OK", then an info-dialog will show with this message after the record has been updated (only if the update is done via the update-button in the table).

Setting a Function as updateAction

You can define updateAction as a function. The function can return:

• The data itself.
• A promise to return the data.

Example using modern fetch API:

updateAction: function (postData) {
    return fetch('/Demo/UpdatePerson', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .catch(error => {
        console.error('Error:', error);
        throw error;
    });
}

Example using async/await:

updateAction: async function (postData) {
    try {
        const response = await fetch('/Demo/UpdatePerson', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        });
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

---

cloneAction

• Type: URL string or function
• Default: None

Setting a URL string as cloneAction

If cloneAction is defined as a URL, FTable makes an AJAX POST request to this URL to clone a record. The URL must return a JSON object:

{
    "Result": "OK",
    "Record": { "Name": "Dan Brown", "Age": 55, "RecordDate": "/Date(1320262185197)/" }
}

• Result: Can be "OK" or "ERROR".
• Record: Optional. Overwrites fields in the cloned record.
• Message: Error message if Result is "ERROR" (required in the ERROR case, otherwise a "communication error" will be shown). If this property is present when Result is "OK", then an info-dialog will show with this message after the record has been cloned (only if the clone is done via the clone-button in the table).

Setting a Function as cloneAction

You can define cloneAction as a function. The function can return:

• The data itself.
• A promise to return the data.

Example using modern fetch API:

cloneAction: function (postData) {
    return fetch('/Demo/ClonePerson', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .catch(error => {
        console.error('Error:', error);
        throw error;
    });
}

Example using async/await:

cloneAction: async function (postData) {
    try {
        const response = await fetch('/Demo/ClonePerson', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        });
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

---

deleteAction

• Type: URL string or function
• Default: None

Setting a URL string as deleteAction

If deleteAction is defined as a URL, FTable makes an AJAX POST request to this URL to delete a record. The URL must return a JSON object:

{
    "Result": "OK"
}

• Result: Can be "OK" or "ERROR".
• Message: Error message if Result is "ERROR" (required in the ERROR case, otherwise a "communication error" will be shown). If this property is present when Result is "OK", then an info-dialog will show with this message after the record has been deleted (only if the delete is done via the delete-button in the table).

Setting a Function as deleteAction

You can define deleteAction as a function. The function can return:

• The data itself.
• A promise to return the data.

Example using modern fetch API:

deleteAction: function (postData) {
    return fetch('/Demo/DeletePerson', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .catch(error => {
        console.error('Error:', error);
        throw error;
    });
}

Example using async/await:

deleteAction: async function (postData) {
    try {
        const response = await fetch('/Demo/DeletePerson', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        });
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}