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 Smith shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →
    Resolved  ·  Dmitry 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

    46 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...
      • AlexSirota commented  ·   ·  Flag as inappropriate

        I have an interesting issue you can help me with. I am using the Contacts API and calling it from a Javascript call using the WA API wrapper for jQuery. I got this code from the WA developer forum and loaded it into the files section to call locally from the WA install (rather than from the original location).

        http://iarpreiki.org/resources/js/waPublicApi.js

        I am using the API to create a URL that I will pass to an external SaaS system, so I need to collect various contact/membership field data.

        The testing page is at

        http://iarpreiki.org/Print-Your-Membership-Certificate -- the top HTML widget is where the HTML/JS code lives. It's quite short.

        I am getting the contact JSON object properly returned and can populate the various fields that are coming back into my form, but none of the FieldValues array is coming back. I am expecting all the various extended field values like "Member since" and "Renewal due" as well as all the extra contacts and member fields that have been defined.

        Here's the debugger output (link to picture) inspecting the object called "data" - The FieldValues object is totally missing.

        https://dl.dropboxusercontent.com/u/55719247/debug%20values%20for%20contacts%20WA%20call.png

        What am I doing wrong?

      • AlexSirota commented  ·   ·  Flag as inappropriate

        Hi gang... I am trying the sample code Dmitry left on github. Very handy code to start with the WA API and Javascript.

        https://gist.github.com/DmitriySmirnov/6902ba719fc17b9467c2f8633831dba3

        A reminder for those trying this out for the first time:

        1. You must create an authorized application first in Security->Authorized Applications. Note the Client ID key. This changes for every authorized application. Make sure you name and save your application. This is required for your pages to access the WA API.

        2. Edit the javascript code with the lines

        <script type="text/javascript">
        var clientId = "YOURCLIENTID";
        var api = new WApublicApi(clientId);

        Replace YOURCLIENTID with the client ID noted in step 1.

        3. The code from github can be copied into any WA page, but it ONLY works when you are logged in to a WA account. If you're not logged in with an account nothing works. The account does not have to be an admin account, it just has to be a valid WA contact/member account.

        On to more coding... :)

      • Rick 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

      • Dmitry 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 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 Smith commented  ·   ·  Flag as inappropriate

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

      • Rick 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 ?

      • Dmitry 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 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 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' ?

      • Dmitry 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.

      • Dmitry 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 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 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.

      • Dmitry 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 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>

      • Dmitry 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 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 ?

      • Dmitry 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 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

      ← Previous 1 3

      Feedback and Knowledge Base