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.

9 votes
Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)

We’ll send you updates on this idea

Rick Smith shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

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

54 comments

Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)
Submitting...
  • [Deleted User] commented  ·   ·  Flag as inappropriate

    By the way, I had the exact same reaction you are having when I started exploring the capabilities of the Wild Apricot API. I started with the Javascript snippets and *************************** also gave me the same talk I am giving you now. The Javascript that uses the public API is limited for reasons of security, as I am sure you wouldn't want some strange Javascript starting to infect Wild Apricot websites and making changes to your database willy nilly. I am actually quite glad now that I understand the security implications of allowing only changes to the logged in member profile AND nothing else, and that the public API respects the access control limitations set on the fields defined in the member fields/contact fields configuration screens.

  • [Deleted User] commented  ·   ·  Flag as inappropriate

    ****,

    The access control in Wild Apricot for fields as well as edit in own profile trumps ANYTHING the public API does. The reason is because the public API (not admin API) is used by the member mobile app. So as you can imagine whatever you can do in the website after you, as a member, login can be done in the mobile app BUT NOT ANY MORE.

    So the Javascript you are writing against the public API has exactly the same restrictions as if you logged in.

    This is why the admin API is what I prefer to use for all the work we do with APIs, as it has NONE of the restrictions of the scope of the logged in member. And that API is not accessible from Javascript but rather through server side acccess through external apps like Excel, Python, PHP and Integromat.

    I highly recommend AGAINST using the Javascript API for anything other than grabbing logged in data and passing it to another system outside of Wild Apricot. It simply is not that robust.

    If you want to restrict editing fields you can use CSS to hide contact fields so that they do not show in the member profile. You can use our text manager to accomplish CSS edits in a highly documented and robust way -- check out www.newpathconsutling.com/watm for more. But of course you can also just put custom css and identify the class or ID of a contact field and use display: none as a rule to hide it.

    eg

    .classname-of-field { display: none; }

    or

    *********** {display: none;}

    Hope that makes sense.

  • Bill H commented  ·   ·  Flag as inappropriate

    Actually it looks like we can Put into member custom fields if we check member access "Edit in Own Profile"

    Seems like member access "Edit in Application" should give us the rights but it doesn't

    Too bad because we don't want members to access in their own profile without some data validation.

  • Bill H commented  ·   ·  Flag as inappropriate

    when you say access API without toke are you saying that use CLientId and clientSecret is unneeded and may be causing problems?

    headers: { "clientId": "JavaScriptPages", "clientSecret": "965ucidrdq76g3wbntzx96onncxhrs" },

  • Bill H commented  ·   ·  Flag as inappropriate

    By experiment I find :
    Users cannot write to member custom fields using the member API
    Users can write to contact custom fields using the member API

    Admins can use the identical code using the member api to write to member custom fields

    There is no way to stop members from editing contact custom fields in their profile without also cutting off member API access

  • Alex Sirota commented  ·   ·  Flag as inappropriate

    ****,

    Note in ******'s link for the member access, there is no PUT request for anything other than the /me scope

    https://app.swaggerhub.com/apis-docs/WildApricot/wild-apricot_api_for_non_administrative_access/1.0.0#/Contacts/put_accounts__accountId__contacts_me

    Take a look at the available PUT methods in the API that is currently supported, the only one that works for PUT is the /me endpoint.

  • AdminDmitry Smirnov (Product Owner, Wild Apricot by Personify) commented  ·   ·  Flag as inappropriate
  • Bill H commented  ·   ·  Flag as inappropriate

    When I use Dimitry's GitHub example logged in as an admin, all is good, when logged in as a member, nothing happens. Isn't there a member api for putting data?

  • Alex Sirota 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?

  • Alex Sirota commented  ·   ·  Flag as inappropriate

    Hi gang... I am trying the sample code ****** 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 ** 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

  • AdminDmitry Smirnov (Product Owner, Wild Apricot by Personify) 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 ?

  • AdminDmitry Smirnov (Product Owner, Wild Apricot by Personify) 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' ?

  • AdminDmitry Smirnov (Product Owner, Wild Apricot by Personify) 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.

  • AdminDmitry Smirnov (Product Owner, Wild Apricot by Personify) 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.

← Previous 1 3

Feedback and Knowledge Base