Please correct me if I'm wrong...
I write a code with no errors, in before edit this post.
but after i read a comment about how to create a Minimal, Complete, and Verifiable example. I'm very confuse, because my minimal script before didn't work, i cann't include complete code, because my complex code, and I don't have verifiable example.
I just need to know how to create autocomplete from google.maps.places to autocomplete my textfield in EXTJS.
Thanks before..
I've solved this question from #Rob Schmuecker answers.
So, the focus of this question about using an appropriate proxy to call the json from google like using :
addressModel.getProxy().setExtraParam('url', 'http://maps.google.com/maps/api/geocode/json?address=' + queryString + '&sensor=false');
to set the params dynamically, from this data model :
addressModel = Ext.define("Addresses", {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url: 'https://jsonp.nodejitsu.com',
reader: {
type: 'json',
root: 'results',
totalProperty: 'totalCount'
}
},
fields: ['formatted_address']
});
after that you can create a combobox and add listener to the combobox each keyup to call the extraparam in your proxy.
this is the demo from #Rob Schmuecker :
https://fiddle.sencha.com/#fiddle/g70
and this is for the complete answer from Rob, who solved my problem :
Check This...
I've figured out a way to solve this using the Google Places-Library.
My Solution using Ext JS 3.4
1) Integrate the Google Places API
2) Create a custom Proxy (I've had extended the Ext.data.DataProxy)
2a) Set the proxy api (read: true)
2b) override the doRequest method. there you can make the calls to i.e. google.maps.PlacesService.textSearch
2c) Handle the Places Request using a Reader (I've created my custom reader)
3) store your data in a store (I've created my custom store)
4) create component that consumes data from the store
Be aware that your application has to comply to the Google Maps/Google Earth APIs Terms of Service! (You Have to show the logos, third party right holders, ect.)
There you have it!
Related
I know I am reopening an old one (Perform filter on expanded entity with SAP Cloud SDK), but it was a while ago and was referencing the Java version of the API used to consume an S/4 HANA service.
I'm testing the Javascript version of the API against the SuccessFactors OData API, which is indeed able to perform filters on expanded entities, like so:
<API_HOST>/odata/v2/PerPerson?$filter=personalInfoNav/firstName eq 'MARCO'&$expand=personalInfoNav&$select=personalInfoNav/firstName, personalInfoNav/lastName&$top=20
Translated into the SDK, it would be (TypeScript):
const personList: Array<PerPerson> =
await PerPerson.requestBuilder().getAll().top(20)
.select(
PerPerson.DATE_OF_BIRTH,
PerPerson.PERSONAL_INFO_NAV.select(
PerPersonal.PERSON_ID_EXTERNAL,
PerPersonal.FIRST_NAME,
PerPersonal.LAST_NAME,
PerPersonal.GENDER
)
).filter(PerPersonal.FIRST_NAME.equals('MARCO'))
.execute({ destinationName: this.configService.get<string>('ACTIVE_DESTINATION') });
But this code does not compile because of the incompatibility of types for the filter function, which here expects a "PerPerson" type and not "PerPersonal".
I was not able to find anything about this.
Considering that the plain OData query works perfectly, anyone has been able to make this work?
Update:
I didn't initially understand that Successfactors offered this functionality on top of the protocol. There are two possible workarounds I can think of:
use new Filter, e.g.:
PerPerson.requestBuilder().getAll().top(20)
.select(
...
).filter(
new Filter('personalInfoNav/firstName', 'eq', 'MARCO')
)
...
If this doesn't work, you can call build on the request builder instead of execute, which gives you the ODataRequest object from which you can get the URL, which you'd then have to manipulate manually. Then you should be able to use the executeHttpRequest function to execute this custom request object against a destination.
Let me know if one of these work for you!
Original answer:
filtering on expanded entities on OData v2 is only possible if the relationship between the two entities is 1:1. In the case the code would look like this:
PerPerson.requestBuilder().getAll().top(20)
.select(
PerPerson.DATE_OF_BIRTH,
PerPerson.PERSONAL_INFO_NAV.select(
PerPersonal.PERSON_ID_EXTERNAL,
PerPersonal.FIRST_NAME,
PerPersonal.LAST_NAME,
PerPersonal.GENDER
)
).filter(
PerPerson.PERSONAL_INFO_NAV.filter(
PerPersonal.FIRST_NAME.equals('MARCO')
))
...
If, however, the relationship is 1:n, filtering is not possible.
Hope that helps!
I'm using OData v4 to load data from my backend to my frontend (developed with SAP UI5) and I am using a form to display a detail page. When I click the "edit" button I'm able to edit the data. My implementation is similar to this example: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.layout.sample.Form354/code/Page.controller.js
When editing something, the data is directly edited at the model and, therefore, updated at the backend. However, I want to be able to choose if I want to save the changes or if I want to cancel the edit before it is updated at the backend.
I read on other questions that one can copy the ODataModel to a JSONModel and use that copy instead, by doing something like:
var oModel = this.getView().getModel();
var oModelJson = new sap.ui.model.json.JSONModel();
oModel.read("/Data", {
success: function(oData, response) {
oModelJson.setData(oData);
sap.ui.getCore().setModel(oModelJson, "oJSONModel");
alert("Success!");
},
error: function(response) {
alert("Error");
}
});
However, the read method seems not to be available for OData v4. the code of my controller where the data is loaded looks like following:
onInit: function() {
this.oModel = new ODataModel({
groupId : "$direct",
synchronizationMode : "None",
serviceUrl : '/odata/'
});
this.getView().setModel(this.oModel, 'oModel');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("details").attachPatternMatched(this._onObjectMatched, this);
this._showFormFragment("display");
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/Data(" + oEvent.getParameter("arguments").dataPath + ")",
model: "oModel"
});
//I want to copy the data from the ODataModel to the JSONModel here
},
What's the best way to accomplish this? And how to do it with OData v4?
I suppose you want to resetChanges in case user cancels the save.
For V2 ODataModel, there is deferedGroup concept which you can use to resetChanges or submitChanges.
I have not much experience with V4. Though from the documentation, it is possible.
Please try to pass a updateGroupId in the constructor. Then you can choose resetChanges or submitBatch by group Id.
mParameters.updateGroupId? The group ID that is used for update requests. If no update group ID is specified, mParameters.groupId is used. Valid update group IDs are undefined, '$auto', '$direct' or an application group ID, which is a non-empty string consisting of alphanumeric characters from the basic Latin alphabet, including the underscore.
Thank you!
I'm using Swagger to produce the documentation of my REST API. According to what is written around, the Swagger UI does not offer support for basic authentication (differently from the online editor). My problem is that one of my APIs is a POST that require digest (not even basic) authentication.
A possible solution I found around is to add a fixed user:pass authentication header in the request via javascript code. This should be easily done according to the Swagger UI documentation (see Custom Header Parameters). I report the incriminated code line:
swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "XXXX", "header"));
Unfortunately it doesn't work. The swaggerUi.api field results uninitialised (null) after I initialise the SwaggerUi object, and as a consequence swaggerUi.api.clientAuthorizationsis undefined. I tried initialising such fields in different way, failing every time. I tried also similar calls to the API I found in threads discussing this topic, but none of them has worked. Does anyone have an idea about that? The documentation is not particularly clear about that.
For completeness, I report the js snippet where I initialise the Swagger UI
var urlPush = "./doc_push.yaml";
window.swaggerUiPush = new SwaggerUi({
url: urlPush,
dom_id: "swagger-ui-container-push",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "list",
jsonEditor: false,
defaultModelRendering: 'model',
showRequestHeaders: false,
});
Try using SwaggerClient.PasswordAuthorization instead of SwaggerClient.ApiKeyAuthorization -
var username = $('#input_username').val();
var password = $('#input_password').val();
var basicAuth = new SwaggerClient.PasswordAuthorization('basic', username, password);
window.swaggerUi.api.clientAuthorizations.add("basicAuth", basicAuth);
Can't seem to figure out a way to disable filtering with typeahead. Basically I just need the autocomplete (or rather drop-down search hint) functionality of it. I am doing a zip code search and resulting postal codes don't necessarily match the queried ones. How do I make it show all matches without doing extra filtering on those again?
Below is the code I have:
var dealers = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/form/find-dealer?postalCode=',
prepare: function (query, settings) {
settings.url += encodeURIComponent(query);
settings.type = 'POST';
settings.contentType = "application/json; charset=UTF-8";
return settings;
}
}
});
$('input[name=postalCode]').typeahead({
minLength: 3
}, {
name: 'dealers',
display: function (data) {
return data.title;
},
source: dealers.ttAdapter()
});
Note: I know it seems a bit awkward to do a zip code search that way, but the purpose of the designer was for users to search interchangeably by dealer name and zip code.
Additional Info: typeahead.bundle.js - v0.11.1
It seems showing all without any (matching) query isn't possible:
https://github.com/twitter/typeahead.js/issues/1308
Though some are trying it with minlength=0 like this:
https://github.com/twitter/typeahead.js/issues/1251
And it looks it was possible in an older version:
https://github.com/twitter/typeahead.js/pull/719
Btw the plugin is no longer being developed and the manual is incomplete. An improved one can be found at this fork: https://github.com/corejavascript/typeahead.js/tree/master/doc
Having said that, you may be better off with another autosuggest, or a plugin like select2, which does show results by default and can use external sources.
If you want send a query to AJAX & get data from your database & add all JSON result for result of typehead (You have a data filter with database & send clean data with AJAX & JSON, But type head has extra filtering & don't show anything or some of your data), You must do it :
Open bootstrap-typeahead.js & find
item.toLowerCase().indexOf(this.query.toLowerCase())
And replace it to :
item.toLowerCase().indexOf(item.toLowerCase())
Will you can show all results from Ajax JSON ...
Not pretty, since the library has been forked and no longer oficially supported by the creator, but this fix did it for me https://github.com/twitter/typeahead.js/pull/1212 . Basically when in remote mode, it returns all matches, which is actually the proper behavior as I see it.
This SO thread helped twitter typeahead ajax results not all shown
I am very new to angualr js. I have found a very useful article about how to connect to API and use their information to show into our app using angular JS.
http://austinknight.net/weather-app-with-angular-js/
Only limitation is this weather forecast for US only. I can find many API which provided world wide forecast but I can't connect with them the way author has done here.
$http.get('https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22' + zip + '%22&format=json&diagnostics=true&callback=')
Can someone please help me to write up such a query string based API call for any country ?
I have done sufficient research but couldn't find anything similar.
Please help.
You can pass params like this
$http.get('https://query.yahooapis.com/v1/public/yql', {
params: {
q: 'your query',
format: 'json',
diagnostics: true,
callback: ''
}
});