I am doing sample example using sapui5. I want to pass URL service dynamically and load ODATA service, but I really new with sapui5 and I don’t know how to do it.
This code below is what i tried to do but it is not working. Thanks a lot for your help.
createContent : function(oController) {
var oLayout = new sap.ui.commons.layout.AbsoluteLayout({width:"340px",height:"150px"});
oLayout.addStyleClass("CustomStyle"); //Add some additional styling for the border
var oLabel = new sap.ui.commons.Label({text:"Service Url"});
var oUrlInput = new sap.ui.commons.TextField({width:"190px"});
oLabel.setLabelFor(oUrlInput);
oLayout.addContent(oLabel, {right:"248px",top:"20px"});
oLayout.addContent(oUrlInput, {left:"110px",top:"20px"});
var oLabel = new sap.ui.commons.Label({text:"Service"});
var oSvcInput = new sap.ui.commons.TextField({width:"190px"});
oLabel.setLabelFor(oSvcInput);
oLayout.addContent(oLabel, {right:"248px",top:"62px"});
oLayout.addContent(oSvcInput, {left:"110px",top:"62px"});
var loadData =new sap.ui.commons.Button({
text : "load",
width:"133px",
press: function() {
oController.load();
}});
oLayout.addContent(loadData, {left:"110px",top:"104px"});
return oLayout;
}
// Controller
load: function(oEvent){
var url = sap.ui.getControl("oUrlInput").getValue();
var svc = sap.ui.getControl("oSvcInput").getValue();
var oModel = new sap.ui.model.odata.OdataModel(url + "/" + svc ,false);
var mylist = new sap.ui.model.ListBinding(oModel);
return mylist;
}
// index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("simpleform");
var view = sap.ui.view({id:"idsimpleForm1", viewName:"simpleform.simpleForm", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
You have to give your controls an id to access them in the controller. Like this:
// create controls with id
var oLabel = new sap.ui.commons.Label("oLabelId", {text:"Service Url"});
var oUrlInput = new sap.ui.commons.TextField("oUrlInputId", {width:"190px"});
// then to get reference to the control later
var oLabel = sap.ui.getCore().byId("oLabelId");
var oUrlInput = sap.ui.getCore().byId("oUrlInputId");
Make sure, that you use the right Url:
var oModel = new sap.ui.model.odata.OdataModel("/sap/opu/odata/sap/" + svc ,false);
Make sure following.
Change the case of odataModel to ODataModel
Ensure the Service URL also correct
Obtain the reference of the control As described by kjokinen
Regards
Related
I am trying to use javascript to extract data from the URL parameter 'utm_source' and add it to a field on a form so that it is stored in my contact database for tracking purposes.
I had previously accomplished this on another site, but when trying to reuse the code it is not working for me.
The page is here (with the included URL parameter to be extracted):
https://members.travisraab.com/country-guitar-clinic-optin-1-1?utm_source=youtube&utm_medium=description
The desired result if for the 'traffic_source' field on my form to be populated with the value from the 'utm_source' URL parameter, in this case 'youtube'.
Here is the code I am using:
<script type="text/javascript">
function addSource() {
var fieldToChange = document.getElementsByName("form_submission[custom_4]");
var source = trafficSource();
fieldToChange.value = source;
}
var trafficSource = function() {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == "utm_source"){
return pair[1];
} else if (pair[0] == "gclid") {
return 'google';
}
}
return 'unknown';
}
document.onload = addSource();
</script>
fieldToChange is a NodeList so if you want to change the value property you need to specify the index number
So this should fix your code
fieldToChange[0].value = source;
You can take all the query params using new URLSearchParams(window.location.search) and get the particular query param using searchParams.get('utm_source') and then, store the value of utm_source in form field using document.getElementById("utmsource").value = param;.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="utmsource" />
<script>
let searchParams = new URLSearchParams(window.location.search)
let param = searchParams.get('utm_source')
document.getElementById("utmsource").value = param;
</script>
</body>
</html>
{$userinfo.create_account_date}
This returns me date in the following format: Oct-3-2017
I want to parse it to: DD/MM/YYY (03/10/2017)
The source code is encrypted. Is there a way to parse it through front-end only?
Front-end, assuming JavaScript. In most simple style.
function reformatDate(datumStr) {
var monthsArr = [];
monthsArr['Jan'] = '01';
// add missing months here
monthsArr['Oct'] = '10';
var dArr = datumStr.split('-');
return [dArr[1], monthsArr[dArr[0]], dArr[2]].join('/');
}
console.log(reformatDate('Oct-3-2017'));
Output:
3/10/2017
Addition to Karen's comment below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function reformatDate(datumStr) {
var monthsArr = [];
monthsArr['Jan'] = '01';
// add missing months here
monthsArr['Oct'] = '10';
var dArr = datumStr.split('-');
return [dArr[1], monthsArr[dArr[0]], dArr[2]].join('/');
}
function elRfr(idName, datumStr) {
var id = document.getElementById(idName);
id.innerHTML = reformatDate(datumStr);
}
</script>
</head>
<body>
<div id="ourDate"><script type="text/javascript">elRfr('ourDate', 'Oct-3-2017');</script></div>
</body>
</html>
Karen, this is simplified example with just one DIV. In your case you should replace 'Oct-3-2017' with {$userinfo.create_account_date}, I guess.
If I assume correctly that your code is Salesforce Apex code.
Create a new var, initialize the date string as a new Date:
var d = new Date('Oct-3-2017');
Then manipulate it however you want with Date methods.
I'm a newbie in Javascript and Angular JS programming and I'm trying to make a currency converter using Yahoo Finance API, but also I want to input directly the initial value in the script without clicking the button or pressing enter, so i figured that using Angular JS would be great. But it doesn't work properly and I think the problem might be in function calculate($scope). Please, can you help me?
<html ng-app>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function currencyConverter(currency_from,currency_to,currency_input){
var yql_base_url = "https://query.yahooapis.com/v1/public/yql";
var yql_query = 'select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("'+currency_from+currency_to+'")';
var yql_query_url = yql_base_url + "?q=" + yql_query + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
var http_response = httpGet(yql_query_url);
var http_response_json = JSON.parse(http_response);
return http_response_json.query.results.rate.Rate;
}
//The problem starts here?
function calculate($scope)
{
$scope.total= function(){
var currency_from = "USD";
var currency_to = "INR";
var rate = currencyConverter(currency_from,currency_to,$scope.currency_input);
return rate;
};
}
</script>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="calculate">
<div style="float:left;">
<form>
<input type="text" ng-model="currency_input" value="0"/> =
</form>
</div>
<div style="float:left">
{{total()}}
</div>
</div>
<div style="clear: both;"></div>
</body>
</html>
There are a few erros in your code using AngularJS. You forgot to start your application module and add a controller.
I made a few corrections and I tested, it is working:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<div style="float:left;">
<form>
<input type="text" ng-model="currency_input" ng-change="total()" value="0"/> =
</form>
</div>
<div style="float:left">
{{ rate }}
</div>
</div>
<div style="clear: both;"></div>
<script>
angular.module('app', [])
.controller('MyController', function($scope, $http) {
function currencyConverter(currency_from,currency_to) {
var yql_base_url = "https://query.yahooapis.com/v1/public/yql";
var yql_query = 'select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("'+currency_from+currency_to+'")';
var yql_query_url = yql_base_url + "?q=" + yql_query + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$http.get(yql_query_url).then(function(response) {
$scope.rate = $scope.currency_input*response.data.query.results.rate.Rate;
});
}
$scope.total = function() {
var currency_from = "USD";
var currency_to = "INR";
currencyConverter(currency_from, currency_to);
};
});
</script>
</body>
</html>
I don't recommend you to use jquery to make http calls. Use $http instead!
One problem, which should be the first to be corrected and go from there, is that you are referencing an angular concept $scope in your scripts before you actually declare the angular library.
To correct this, move your angular library script tag up above your other script tag (but below the jquery script tag.
You should take a look at services (https://docs.angularjs.org/guide/services).
With that you can just create a service and put all of your 'Yahoo' related functions in one place. Then just inject it into your directive/controller.
ex:
.service('yahooRelatedLogicSrvc', function () {
return {
httpGet: function httpGet(theUrl) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
}
})
.controller('sampleCtrl', function ($scope, yahooRelatedLogicSrvc) {
var url = 'http://yahoo.com';
$scope.httpGet = yahooRelatedLogicStvc.httpGet(url);
}
And you can just put returns of your service functions as $scope properties etc.
I really can see why you should use in line javascript in that scenario.
Angular makes something like this much easier than what you're attempting. There's an $http service for performing a GET, for one, so you can leave out jquery and create something much simpler like ConverterService in my example.
Since your input is bound to a scope variable, you don't need to set value="0", simply set $scope.currency_input to your default value in your controller. I created a convert function on the scope, which will update the output whenever its called. It's called once at the bottom of the controller, but could be bound to a button in your html by simply doing something like this: <button ng-click="convert()">Convert value</button>
var app = angular.module('calc', []);
app.controller('MainCtrl', function($scope, ConverterService) {
// default your currency input
$scope.currency_input = 10;
var currency_from = "USD";
var currency_to = "INR";
$scope.convert = function() {
ConverterService.getConversions(currency_from, currency_to)
.then(function(response) {
// put your logic to convert the value here
var convertedVal = null; // = $scope.currency_input * response.something etc...
$scope.result = convertedVal;
});
};
$scope.convert();// run once when the controller loads to get defaulted input conversion
});
app.factory('ConverterService', function($http) {
return {
getConversions: function(from, to, val) {
var endpoint = ''; // build your endpoint here
return $http.get(endpoint);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="calc">
<div ng-controller="MainCtrl">
<input type="text" ng-model="currency_input">= {{result}}
</div>
</html>
edit1= clearifying sample code
edit2= well this is getting embarassing, now I will post the actual code
I am trying to make a custom interior streetview. I am attempting to convert custom interior shot to be relative to arbitrary starting position by substituting the argument of the function below with variable, but would break the streetview. I am not familiar with javascript.
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(54.156654,69.696969)
runs fine.
var demolat = 34.995348; // declared at beginning of function
var demolon = 135.7395;
var wlat = demolat;
var wlon = demolon;
.. lots of code .. // lots of code goes here
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(wlat,wlon)
does not work.
full code
the script would not work properly when replaced line described above.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
<script type="text/javascript" code="maps_code">
var initPosPanoID,initPosPanoData,streetView,map_canvas;
function initialize(){
var neeclat = 35.564157;
var neeclon = 139.714947;
//var demolat = 34.995138;
//var demolon = 135.739689;
var demolat = 34.995348;
var demolon = 135.7395;
var wlat = demolat;
var wlon = demolon;
swbound = new google.maps.LatLng(wlat-0.0003,wlon-0.0003);
nebound = new google.maps.LatLng(wlat+0.0003,wlon+0.0003);
var initPos=new google.maps.LatLng(wlat,wlon);
var mapOptions={zoom:14,center:initPos,mapTypeId:google.maps.MapTypeId.ROADMAP};
var mapDiv=document.getElementById("map_canvas");
map_canvas=new google.maps.Map(mapDiv,mapOptions);
var bounds=new google.maps.LatLngBounds(swbound,nebound);
var overlay=new google.maps.GroundOverlay("./5Bc3IIj.jpg",bounds);
overlay.setMap(map_canvas);
var streetViewOptions={pov:{zoom:1,heading:161,pitch:-2.6}};
var streetViewDiv=document.getElementById('streetview_canvas');
streetViewDiv.style.fontSize="15px";
streetView=new google.maps.StreetViewPanorama(streetViewDiv,streetViewOptions);
streetView.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(mapDiv);
google.maps.event.trigger(map_canvas,"resize");
map_canvas.setStreetView(streetView);
streetView.registerPanoProvider(getCustomPanorama);
var streetViewInitPos=new google.maps.LatLng(wlat,wlon);
// var streetViewInitPos=new google.maps.LatLng(34.995348,135.7395);
var streetviewService=new google.maps.StreetViewService();
var radius=50;
streetviewService.getPanoramaByLocation(streetViewInitPos,radius,function(result,status){
if(status==google.maps.StreetViewStatus.OK){
initPosPanoID=result.location.pano;
initPosPanoData=result;
streetView.setPosition(result.location.latLng);
map_canvas.panTo(result.location.latLng);
}
}
);
google.maps.event.addListener(streetView,"links_changed",createCustomLink);
var map_marker=new google.maps.Marker({map:map_canvas});
google.maps.event.addListener(streetView,"position_changed",function(){
var position=this.getPosition();
var map_bounds=map_canvas.getBounds();
map_canvas.panTo(position);
});
}
function getCustomPanoramaTileUrl(panoID,zoom,tileX,tileY){
return"./"+panoID+'/'+tileX+'-'+tileY+'_s1.jpg';
}
function getCustomPanorama(panoID){
var streetViewPanoramaData={
links:[],copyright:'',tiles:{
tileSize:new google.maps.Size(2048,1024),worldSize:new google.maps.Size(2048,1024),centerHeading:0,getTileUrl:getCustomPanoramaTileUrl
}
};
switch(panoID){
case initPosPanoID:
return initPosPanoData;
case"Position_S":
//var tmp = new google.maps.LatLng(wlat,wlon);
streetViewPanoramaData["location"]={
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(3,3)
};
streetViewPanoramaData["copyright"]=""
break;
case"Position_SW":
streetViewPanoramaData["location"]={
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(3,3)
};
streetViewPanoramaData["copyright"]=""
break;
}
if("location"in streetViewPanoramaData){
streetViewPanoramaData.location.pano=panoID;
return streetViewPanoramaData;
}
}
function createCustomLink(){
var links=streetView.getLinks();
var panoID=streetView.getPano();
var currentPos=streetView.getPosition();
switch(panoID){
case initPosPanoID:
links.push({description:"テストエリアへ",pano:"Position_S"});
break;
case"Position_S":
links.push({description:"外へ",pano:initPosPanoID});
links.push({description:"SWへ",pano:"Position_SW"});
break;
case"Position_SW":
links.push({description:"Sへ",pano:"Position_S"});
break;
}
if(links.length){ //compute directional pointer label.
var linkPano;
for(var i=0;i<links.length;i++){
linkPano=getCustomPanorama(links[i].pano);
if(linkPano!==undefined){
links[i].heading=google.maps.geometry.spherical.computeHeading(currentPos,linkPano.location.latLng);
}
}
return links;
}
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
<style type="text/css">html,body{width:100%;
height:100%;
margin:0;
position:absolute}#frame,#streetview_canvas{width:100%;
height:100%;
position:relative}#map_canvas{width:250px;
height:250px;
border:2px solid gray;
background-color:#fff}</style>
</head>
<body>
<div id="streetview_canvas"></div>
<div id="map_canvas"></div>
</body>
</html>
I have a swf file created by EasyPano tourweaver software. the outpout is a swf file with some .bin files to config the swf and other files such as .jpg, .js and so on.
The software create a html file to add the swf but i have to load the swf using flash and AS3. the HTML and JavaScript that the software create is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mahan</title>
</head>
<body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
To view virtual tour properly, Flash Player 9.0.28 or later version is needed.
Please download the latest version of Flash Player and install it on your computer.
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("twviewer.swf", "sotester", "100%", "100%", "9.0.0", "#000000");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "resources/talarmahan_1_firstpage.jpg");
so.addVariable("lwBgColor", "255,255,255,255");
so.addVariable("lwBarBgColor", "255,232,232,232");
so.addVariable("lwBarColor", "255,153,102,153");
so.addVariable("lwBarBounds", "-156,172,304,8");
so.addVariable("lwlocation", "4");
so.addVariable("lwShowLoadingPercent", "false");
so.addVariable("lwTextColor", "255,0,0,204");
so.addVariable("iniFile", "config_TalarMahan.bin");
so.addVariable("progressType", "0");
so.addVariable("swfFile", "");
so.addVariable("href", location.href);
so.write("flashcontent");
// ]]>
</script>
</body>
</html>
Please Help me!
Thanks
The answer is URLVariables passed to the URLRequest feed into load method of Loader:)
example:
var loader:Loader = new Loader();
var flashvars:URLVariables = new URLVariables()
flashvars["lwImg"] = "resources/talarmahan_1_firstpage.jpg";
flashvars["lwBgColor"] = "255,255,255,255";
flashvars["lwBarBgColor"] = "255,232,232,232";
flashvars["lwBarColor"] = "255,153,102,153";
flashvars["lwBarBounds"] = "-156,172,304,8";
flashvars["lwlocation"] = "4";
flashvars["lwShowLoadingPercent"] = "false";
flashvars["lwTextColor"] = "255,0,0,204";
flashvars["iniFile"] = "config_TalarMahan.bin";
flashvars["progressType"] = "0";
flashvars["swfFile"] = "";
flashvars["href"] = this.loaderInfo.url;
var request:URLRequest = new URLRequest("twviewer.swf");
request.data = flashvars;
loader.load(request);
addChild(loader);
also with following helper method you can get main SWF parameters (from it's html wrapper) and pass it to the loaded SWF:
public function getFlashVars(li:LoaderInfo):URLVariables
{
var vars:URLVariables = new URLVariables();
try
{
var params:Object = li.parameters;
var key:String;
for(key in params)
{
vars[key] = String(params[key]);
}
}
catch(e:Error)
{
}
return vars;
}
then
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest("twviewer.swf");
request.data = getFlashVars(this.loaderInfo);
loader.load(request);
addChild(loader);
For SecurityError: Error#2000 and here - there are many reasons behind this error