How can we make it easier for you to develop on top of Wild Apricot?

Javascript access to Contact/Member/Event data

I would love to have data available to JavaScript that can be used to access other contact, membership, or event data that may not be available on a page or widget.

For instance, I have a case where I need to display links based on whether they belong to a certain membership group or membership level.

There is some 'BONAPAGE' global variables that can be accessed for system or page view status but nothing for the record of the current screen you may be viewing.

It would be great if there was a global object(s) available that contained the current record set just like the JSON data you can get from the API. So you could access 'contact.ismember' for example.

Please post your thumbs up so we can get this in a release.

8 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Rick SmithRick Smith shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →
    Resolved  ·  DmitryDmitry responded  · 

    Public API is now available for javascript access by path http://your_account.wildapricot.org/sys/api/…;.

    This means that:

    • AJAX requests to API is in the same domain
      *JS application is able to access API without token
    • AJAX requests directed to the same domain as
    • JS access API with the same permissions as currently logged in user.

    Please read more on help site:
    http://help.wildapricot.com/display/DOC/Authenticating+API+access+from+a+Wild+Apricot+site+page

    44 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Dmitry,

        Server side code and application does no good from within a WA page.
        We wanted to work on the site not off of it. Server side code also does not allow logged in members to access functions not available OOB that might be with some added javascript

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Rick,

        API calls for users without admin permissions are really limited. However it's in our plans to develop API and add more calls available for contacts.

        I didn't completely understand logic of your application , but for me it looks like a server side code. If you have already invested a lot in building JS application, then you can try to migrate the application to NodeJS platform. This approach will allow you to keep secret (use API key) and reuse most of existing code.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Based on the revelation below that only ADMIN users can access all API function with the new API method (/sys/api), it is basically useless now.

        A regular user or non-admin employee can only access /contacts/me ??? I thought the point was to be able to access and display contact, event, registration, invoices, etc for the logged in user so we could display for the user information that may not be available on the page.

        What if we wanted to create a 'My Events' page for a member to show events they have registered for ??? Can't do it.

        We have created an employee portal for non-admin employees to access and maintain data easily. We have been anxious for this to be done so that we could use any browser and not have to just use IE with broken security. Pointless now. Our portal will not work with the new API method.

        We also wanted to allow vendor partners to be able to access data or register clients (library) who attend our events at their site. We have not done this yet because of requiring a custom setup IE. Can't do that now either.

        I spent hours developing a new set of pages to allow a contact to edit or cancel their reservation based on the new API and again not having to custom configure a browser. It is now wasted time it wont work.

        I have been a big proponent and supporter of this and the API in general but now I am totally disenchanted.

        We don't need to worry about the problems below because it isn't going to work anyway.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        I am using IE 12. SAme result from Edge, Chrome, Firefox. None of them show any response text

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Hi Dmitry,

        That might be what it takes. I have been coding with the API for a while and am really familiar with all the mechanics and how to troubleshoot.

        This is a real stumper. Maybe there is something missing in the JSON data that the regular API does not catch ?

        But even your simple create a contact does not work so I don't know ??

        Your code works for you but not me so what is different in the environment ?

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Rick,

        If it were authorization problem you will get 401 or 403 error codes. 400 error code returns only if API detects some invalid input (e.g. invalid or no email or empty request body).

        The only thing used to authenticated your request is your session cookie. ClientId is used to make sure you intentionally enabled API and to prevent CSRF attacks.

        No API keys or oAuth tokens needed to use API from JS.

        I have ho idea why the same code does not work. What browser version do you use? Did you try any other browser (I have tested code in google chrome and microsoft edge)?

        If nothing will help then the last thing I can suggest is a skype session with screen sharing.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Maybe it does not know I am admin and is blocking anything but read like I was a non-admin user ?

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Hi Dmitry,

        First of all I appreciate the attention you are giving this.

        I replaced my test with your code and it functions but I still get 400 and there is NO error text. Your revised code displays

        'alert("Failed to create new contact. See console for details " + data.responseText);'

        I see 'Failed to create new contact. See console for details' but no text after. data.responseText is empty which is what I find in the browser console. Response body is empty

        I even recreated the App authorization and a new client ID. No Help.

        I noticed the clientID on the app authorization screen is displayed before I complete the top part where I pick read only or full access. The clientID stays the same regardless of access method chosen.

        Is the clientID just used to point to this app auth record and it reads and it reads the auth to find access permissions ?

        I don't need the API Key or any of the other fields within the API? just the 'clientId' ?

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Rick,

        regular members without admin permissions will not be able to create or cancell registrations. Current version of API gives only one possible method for regular members: .../contacts/me

        However we are going to develop API and in future it will be possible to access and modify personal information on behalf of logged in member / contact.

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Rick,

        I slightly modified my code sample so now it shows error explanation on 400 error. You can find it here https://gist.github.com/DmitriySmirnov/0beda14e93bed7b5dc2f
        or on http://houseofbamboo.wildapricot.org/JS-sample

        Of cause you have to replace clientId with your one.

        One usefull hint: when you sharing a code on forum it's really difficult to read it. But there is a great tool for sharing small chunks of code: https://gist.github.com It keeps formating and also supports code highlight.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Hi Dmitry,

        No matter what I try I can not do updates with the new API. Your code or mine. My code works perfect with the old API but same code will not with the new API. What am I missing ?

        What determines the permissions for the API ? Is something preventing me from doing Updates ? Reads are fine.

        The new API operates in the permission context of the logged on user so will I be able to make a page accessible to regular members where they can edit or cancel registrations via the API ? The API is capable. Will the logged in member have permission ?

        Is this the correct medium for handling this ?

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Hi Dmitry,

        There is nothing in the response body. Empty, blank.

        I am in the IE console where I can inspect Request/Response Header, Body, etc

        I just get 400 and nothing. The only message I can see is Bad Request.

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Rick,

        When api returns 400, it also send error explanation in response body. You can find the details in browser console.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Hi Dmitry,

        I got the sample to work and the Who am I link is OK. I don't have a problem with read

        I recreated the sample on my site, and the create contact link gives me the same 400 Bad Request error. Code is below

        Is something not authorized right ? My login is the site admin ?

        <div class="WaGadgetLast WaGadgetCustomHTML gadgetStyleNone" id="id_TDkdZIQ">
        <div class="gadgetStyleBody">
        <div>
        <a name="whoAmI" id="whoAmI" href="#">Who am I?</a><br>
        <a name="createContact" id="createContact" href="#">Create new contact</a>
        </div>
        </div>
        </div><script type="text/javascript">try {
        var clientId = "ndas7a2c11";
        $(document).ready(function(){
        var api = new WApublicApi(clientId);
        api.init();

        $("#whoAmI").click(function(){
        api.apiRequest({
        apiUrl: api.apiUrls.me(),
        success: function (data, textStatus, jqXhr) {
        alert("Hello " + data.FirstName + " " + data.LastName + " !\r\nSpirits say that your ID is '" + data.Id + "' and your email is '" + data.Email + "'."); }
        });
        });

        $("#createContact").click(function(){
        api.apiRequest({
        apiUrl: api.apiUrls.contacts(),
        method: "POST",
        data: { email: "user" + Math.floor(Date.now() / 1000) + "@invaliddomain.com"},
        success: function(data, textStatus, jqXhr){
        alert("New contact #" + data.Id + " with email " + data.Email + "was successfully created");
        },
        error: function(data, textStatus, jqXhr){
        alert("Failed to create new contact. See console for details");
        }
        });
        });
        });
        } catch(e) {}</script>

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Yes, you should be logged in. Just apply for free membership and log in.

        First link works for any authenticated user. Second one works only for admins, but you still can view page source code.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Hi Dmitry,

        I did look at the sample but clicking on the links did not do anything. Wouldn't we need to be logged in to that site ? What is the login ?

      • DmitryDmitry commented  ·   ·  Flag as inappropriate

        Rick,

        Could you please take a look at http://houseofbamboo.wildapricot.org/JS-sample. On that page you will find a link "create new contact" and valid JS code.

        Steve,

        Wild apricot system experienced temporary connectivity issues (https://forums.wildapricot.com/forums/308923-service-notices/suggestions/13061973-intermittent-connectivity-issues). Currently the system works fine.

        Your code looks valid.

      • Rick SmithRick Smith commented  ·   ·  Flag as inappropriate

        Is the public API fully functioning now ? I am getting 400 Bad Request on any Put/Post. There is no further info available.

        As far as I can tell everything is as it should be ??

        Ajax call:
        rest = $.ajax({
        type: "PUT",
        url: url,
        headers: { "clientId": WAclientId}, //V2.0
        //headers: { Authorization:'Bearer ' + token},
        datatype: "json",
        cache: false,
        async: false,
        data: data
        });

        rest.done( function (rdata,stat) {

        dwrite("Post Status: " + rest.status);
        dwrite("Status Text: " +rest.statusText);
        dwrite("Response Text: " +rest.responseText);
        dwrite("Ready State: " +rest.readyState);
        //return rest;
        return rdata;
        });

        Please advise

      • Steve RiegelSteve Riegel commented  ·   ·  Flag as inappropriate

        Seemed to work once or twice for me today, before WA sitewide intermittent connectivity issues began (shown under Service Notices)

        Getting 503 service unavailable errors now for <mysite>/sys/api calls.

        Are such calls causing the WA-wide intermittent connectivity problems?

        My code (just populates a field with the current member id):

        /* who am i? */
        var api = new WApublicApi(clientId);
        $.when(api.init()).done(function(){
        api.apiRequest({
        apiUrl: api.apiUrls.me(),
        success: function(data, textStatus, jqXhr) {$("#rmemb").val(data.Id);},
        error: function(jqXHR, textStatus, errorThrown) {
        $("#rmemb").val("error");
        $("#notes").val(textStatus + " (" + jqXHR.status + ") : " + errorThrown);
        }
        })
        });

      ← Previous 1 3

      Feedback and Knowledge Base

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7