Commit | Line | Data |
---|---|---|
6a488035 TO |
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 /> '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 />  '" + 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> "; | |
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 /> {success: function(data) {<br /> cj.each(data, function(key, value) {// do something });<br /> }<br /> }<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/> <li>{$' + entity +'.some_field}</li><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 | | | |
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> | |
14a366bd | 186 | <option value="create" title="used to update as well, if id is set">create</option> |
6a488035 TO |
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> | |
6a488035 TO |
194 | </select> |
195 | | | |
196 | ||
197 | <label for="debug-checkbox"> | |
198 | <input type="checkbox" id="debug-checkbox" data-id="debug" checked="checked" value="1">debug | |
199 | </label> | |
200 | | | |
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 | | | |
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> |