templates/CRM/Core/AjaxDoc.tpl

   1
   2 <style>
   3 {literal}
   4 #result {background:lightgrey;}
   5 #selector a {margin-right:10px;}
   6 .required {font-weight:bold;}
   7 .helpmsg {background:yellow;}
   8 #explorer label {display:inline;}
   9 code {line-height:1em;}
  10 {/literal}
  11 </style>
  12
  13 <script>
  14 {literal}
  15
  16 cj(function($) {
  17   var restURL = CRM.url("civicrm/ajax/rest");
  18
  19   function toggleField (name, label, type) {
  20     var h = '<div>\
  21       <label for="' + name + '">'+label+'</label>: <input name="' + name + '" data-id="'+name+ '" />\
  22       <a href="#" class="remove-extra" title={/literal}"{ts escape="js"}Remove Field{/ts}"{literal}>X</a>\
  23     </div>';
  24     if ( $('#extra [name=' + name + ']').length > 0) {
  25       $('#extra [name=' + name + ']').parent().remove();
  26     }
  27     else {
  28       $('#extra').append (h);
  29     }
  30   }
  31
  32   function buildForm (params) {
  33     var h = '<label>ID</label><input data-id="id" size="3" maxlength="20" />';
  34     if (params.action == 'delete') {
  35       $('#extra').html(h);
  36       return;
  37     }
  38
  39     CRM.api(params.entity, 'getFields', {}, {
  40       success:function (data) {
  41         h = {/literal}'<i>{ts escape="js"}Available fields (click to add/remove):{/ts}</i>'{literal};
  42         $.each(data.values, function(key, value) {
  43           var required = value.required ? " required" : "";
  44           h += "<a data-id='" + key + "' class='type_" + value.type + required + "'>" + value.title + "</a>";
  45         });
  46         $('#selector').html(h);
  47       }
  48     });
  49   }
  50
  51   function generateQuery () {
  52     var params = {};
  53     $('#explorer input:checkbox:checked, #explorer select, #extra input').each(function() {
  54       var val = $(this).val();
  55       if (val) {
  56         params[$(this).data('id')] = val;
  57       }
  58     });
  59     query = CRM.url("civicrm/ajax/rest", params);
  60     $('#query').val(query);
  61     if (params.action == 'delete' && $('#selector a').length == 0) {
  62       buildForm (params);
  63       return;
  64     }
  65     if (params.action == 'create' && $('#selector a').length == 0) {
  66       buildForm (params);
  67       return;
  68     }
  69   }
  70
  71   function runQuery(query) {
  72     var vars = [],
  73     hash,
  74     smarty = '',
  75     php = "$params = array(<br />&nbsp;&nbsp;'version' => 3,",
  76     json = "{",
  77     link = "",
  78     key,
  79     value,
  80     entity,
  81     action,
  82     query = $('#query').val();
  83     var hashes = query.slice(query.indexOf('?') + 1).split('&');
  84     for(var i = 0; i < hashes.length; i++) {
  85       hash = hashes[i].split('=');
  86       key = hash[0];
  87       value = hash[1];
  88
  89       switch (key) {
  90        case 'version':
  91        case 'debug':
  92        case 'json':
  93          break;
  94        case 'action':
  95          action = value.toLowerCase();
  96          $('#action').val(action);
  97          break;
  98        case 'entity':
  99          entity = value.charAt(0).toUpperCase() + value.substr(1);
 100          $('#entity').val(entity);
 101          break;
 102        default:
 103          if (typeof value == 'undefined') {
 104            break;
 105          }
 106          value = isNaN(value) ? "'" + value + "'" : value;
 107          smarty += ' ' + key + '=' + value;
 108          php += "<br />&nbsp;&nbsp'" + key +"' => " + value + ",";
 109          json += "'" + key + "': " + value + ", ";
 110       }
 111     }
 112
 113     if (!entity) {
 114       $('#query').val({/literal}"{ts escape='js'}Choose an entity.{/ts}"{literal});
 115       $('#entity').val('');
 116       window.location.hash = 'explorer';
 117       return;
 118     }
 119     if (!action) {
 120       $('#query').val({/literal}"{ts escape='js'}Choose an action.{/ts}"{literal});
 121       $('#action').val('');
 122       window.location.hash = 'explorer';
 123       return;
 124     }
 125
 126     window.location.hash = query;
 127     $('#result').html('<i>Loading...</i>');
 128     $.post(query,function(data) {
 129       $('#result').text(data);
 130     },'text');
 131     link="<a href='"+query+"' title='open in a new tab' target='_blank'>ajax query</a>&nbsp;";
 132     var RESTquery = CRM.config.resourceBase + "extern/rest.php?"+ query.substring(restURL.length,query.length) + "&api_key={yoursitekey}&key={yourkey}";
 133     $("#link").html(link+"|<a href='"+RESTquery+"' title='open in a new tab' target='_blank'>REST query</a>.");
 134
 135
 136     json = (json.length > 1 ? json.slice (0,-2) : '{') + '}';
 137     php += "<br />);<br />";
 138     $('#php').html(php + "$result = civicrm_api('" + entity + "', '" + action + "', $params);");
 139     $('#jQuery').html ("CRM.api('"+entity+"', '"+action+"', "+json+",<br />&nbsp;&nbsp;{success: function(data) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cj.each(data, function(key, value) {// do something  });<br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}<br />);");
 140
 141     if (action.substring(0, 3) == "get") {//using smarty only make sense for get actions
 142       $('#smarty').html("{crmAPI var='result' entity='" + entity + "' action='" + action + "' " + smarty + '}<br />{foreach from=$result.values item=' + entity + '}<br/>&nbsp;&nbsp;&lt;li&gt;{$' + entity +'.some_field}&lt;/li&gt;<br />{/foreach}');
 143     } else {
 144       $('#smarty').html("smarty uses only 'get' actions");
 145     }
 146     $('#generated').show();
 147   }
 148
 149   var query = window.location.hash;
 150   var t = "#/civicrm/ajax/rest";
 151   if (query.substring(0, t.length) === t) {
 152     $('#query').val (query.substring(1)).focus();
 153   } else {
 154     window.location.hash="explorer"; //to be sure to display the result under the generated code in the viewport
 155   }
 156   $('#entity, #action').change (function() { $("#selector, #extra").empty(); generateQuery(); runQuery(); });
 157   $('#explorer input:checkbox').change(function() {generateQuery(); runQuery(); });
 158   $('#explorer').submit(function() {runQuery(); return false;});
 159   $('#extra').on('keyup', 'input', generateQuery);
 160   $('#extra').on('click', 'a.remove-extra', function() {
 161     $(this).parent().remove();
 162     generateQuery();
 163   });
 164   $('#selector').on('click', 'a', function() {
 165     toggleField($(this).data('id'), this.innerHTML, this.class);
 166   });
 167 });
 168 {/literal}
 169 </script>
 170 <body>
 171 <form id="explorer">
 172 <label>entity</label>
 173 <select id="entity" data-id="entity">
 174   <option value="" selected="selected">Choose...</option>
 175 {crmAPI entity="Entity" action="get" var="entities" version=3}
 176 {foreach from=$entities.values item=entity}
 177   <option value="{$entity}">{$entity}</option>
 178 {/foreach}
 179 </select>
 180 &nbsp;|&nbsp;
 181
 182 <label>action</label>
 183 <select id="action" data-id="action">
 184   <option value="" selected="selected">Choose...</option>
 185   <option value="get">get</option>
 186   <option value="create" title="used to update as well, if id is set">create</option>
 187   <option value="delete">delete</option>
 188   <option value="getfields">getfields</option>
 189   <option value="getactions">getactions</option>
 190   <option value="getcount">getcount</option>
 191   <option value="getsingle">getsingle</option>
 192   <option value="getvalue">getvalue</option>
 193   <option value="getoptions">getoptions</option>
 194 </select>
 195 &nbsp;|&nbsp;
 196
 197 <label for="debug-checkbox">
 198   <input type="checkbox" id="debug-checkbox" data-id="debug" checked="checked" value="1">debug
 199 </label>
 200 &nbsp;|&nbsp;
 201
 202 <label for="sequential-checkbox" title="{ts}sequential is a more compact format, that is nicer and general and easier to use for json and smarty.{/ts}">
 203   <input type="checkbox" id="sequential-checkbox" data-id="sequential" checked="checked" value="1">sequential
 204 </label>
 205 &nbsp;|&nbsp;
 206
 207 <label for="json-checkbox">
 208   <input type="checkbox" id="json-checkbox" data-id="json" checked="checked" value="1">json
 209 </label>
 210
 211 <div id="selector"></div>
 212 <div id="extra"></div>
 213 <input size="90" maxsize=300 id="query" value="{crmURL p="civicrm/ajax/rest" q="json=1&debug=on&entity=Contact&action=get&sequential=1&return=display_name,email,phone"}"/>
 214 <input type="submit" value="GO" title="press to run the API query"/>
 215 <table id="generated" border=1 style="display:none;">
 216   <caption>Generated codes for this api call</caption>
 217   <tr><td>URL</td><td><div id="link"></div></td></tr>
 218   <tr><td>smarty</td><td><code id="smarty" title='smarty syntax (mostly works for get actions)'></code></td></tr>
 219   <tr><td>php</td><td><code id="php" title='php syntax'></code></td></tr>
 220   <tr><td>javascript</td><td><code id="jQuery" title='javascript syntax'></code></td></tr>
 221 </table>
 222 <pre id="result">
 223 You can choose an entity and an action (eg Tag Get to retrieve a list of the tags)
 224 Or your can directly modify the url in the field above and press enter.
 225
 226 When you use the create method, it displays the list of existing fields for this entity.
 227 click on the name of the fields you want to populate, fill the value(s) and press enter
 228
 229 The result of the ajax calls are displayed in this grey area.
 230 </pre>