Editor - Extended ajax URL processing

Editor - Extended ajax URL processing

rduncecbrduncecb Posts: 125Questions: 2Answers: 28

Currently the ajax processing allows you to specify _id_ in the URL for the row id (based on idSrc option) to be substituted.
e.g.: "/api/resource/_id_" -> "/api/resource/12".

It would be great and much more useful in a REST sense if this could be a bit smarter for more complex URLs.
In many REST API's and following best practices sub resources include a parent resource identifier in the URL.

e.g.: "/api/resource/12/subresource" and"/api/resource/12/subresource/3".

If the ajax URLs could be specified like
"/api/resource/{resourceId}/subresource/{idSrc}" where the string inside {}'s is the name of an Editor data element/field name that would be replaced with the value when resolving the ajax URL.

I currently work around the Editor limitation by using an ajax function to make my own calls to implement the functionality but I think it would be useful to myself and others if something like this was a feature of Editor.

Replies

  • allanallan Posts: 52,498Questions: 1Answers: 8,012 Site admin

    That's a really interesting suggestion - thanks. I've been keen to find ways to between improve Editor with REST APIs.

    Having said that, I'm not quite understanding this one. Let's take this example for use as an illustration. Your suggestion would be that if the URL was /api/staff/{position}/subresource/{id} the position would take the value of the field? Is that really something that is used frequently in APIs, or is it that the example there is too simplistic?

    Thanks,
    Allan

  • rduncecbrduncecb Posts: 125Questions: 2Answers: 28
    edited June 2017

    Allan,

    In your example position is likely backed by an id (e.g. positionId) with some sort of renderer, although not required to be. If this data element is in the table row it is accessible to Editor so could be used in a URL such as /api/staff/{positionId}/subresource/{id}. Alternatively, the pre events can be used to modify the data (and possibly add it from a variable) before it is used to resolve the URL if it's not in the original row data.

    I think what I'm trying to say is that the datatable row editor is working on may have more data elements (either in the source row data and/or on the Editor form) than the id and these could be used for substitution in the URL

    For example, using your example as a starting point, lets say the data for the table is an array of these:

    {
       id: 4,
       first_name: 'Joe',
       last_name: 'Bloggs',
       positionId: 3,
       officeId: 10,
     ...
    }
    
    

    With a list of positionId/names there may be a renderer for position that takes the id and translates to the corresponding name. In a silly situation positionId may be directly entered ;)

    Extending the example to include an Editor with text fields for the name elements, and a dropdown of positions (using positionId as the data element). Let's imagine the employee is a subresource of an office. Office is not on the form, but its ID forms part of the API url (although not an ideal example).
    Defining a URL with: /api/staff/{officeId}/employee/{id} you could use the data elements from the row to make the URL using more than the id.

    Defining a resource by its url is common. Defining resources as URL's and including a parent resource as part of the URL is common. http://www.restapitutorial.com/resources.html
    https://www.thoughtworks.com/insights/blog/rest-api-design-resource-modeling

    I currently implement this by using an ajax function (as per editor spec). One of the parameters is the source data. I use this to create my URL using elements from the source data (that, at the point of substitution includes all elements required to create the URL). This step would be moot if editor allowed more complex urls using other elements from the source data. I'm not bringing this up on a purely selfish basis as that would be silly but I do believe this is something that may benefit other Editor and Editor users.

  • loukinglouking Posts: 228Questions: 44Answers: 0
    edited December 2019

    I was just looking for this.

    My use case is that I have "groups" which are identified in a column in my server database. So my table needs to be filtered by group, where each administrator is permitted to see only certain groups. E.g., URL is /admin/{group}/table, and all rest api's for the editor similarly need the {group} in the URL, and for the editor URLs

    I can and will muddle through with this, looking at the ajax function @rduncecb describes. But as this comment is 1.5 years old I wonder if this has been added recently to Editor to natively handle this? Or what @allan recommends for the workaround

    If @rduncecb wouldn't mind sharing a code snippet of the workaround used, that might be helpful.

  • allanallan Posts: 52,498Questions: 1Answers: 8,012 Site admin

    I'm sorry I never replied here - I can absolutely see how this would be useful. There isn't currently a way built into Editor to do this I'm afraid. The best option would be to use ajax as a function and make the Ajax request with a URL built based on the form data (or whatever the data source for the url is). While not as slick, it should hopefully only be a few lines.

    Having some kind of replacement in the url string that is programmable is a nice idea though. Noted.

    Allan

  • loukinglouking Posts: 228Questions: 44Answers: 0

    If anyone else comes here before @allan has a chance to make something nicer, I came up with the following snippet. Note that my "group" is called "interest" and I'm using underscores to delineate the field which gets replaced.

    Also note in my application I have different url values for each action.

    function interest_presubmit() {
        var staticconfig;
        editor.on( 'preSubmit', function(e, data, action) {
            // interest normally comes from external source
            var interest = 'fsrc';
            // note use of lodash
            staticconfig = _.cloneDeep(editor.ajax());
            var newconfig = _.cloneDeep(staticconfig);
            // substitute interest into urls
            for (const action in newconfig) {
                newconfig[action].url = _.replace(newconfig[action].url, '_interest_', interest);
            }
            editor.ajax(newconfig);
        })
    
        // restore configuration
        editor.on( 'postSubmit', function(e, data, action, xhr) {
            editor.ajax(staticconfig);
        })
    
    
Sign In or Register to comment.