Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Tuesday, November 11, 2014

Steps to configure - Custom Error Pages in IIS

IIS Version shown in the below post : 























Before setting up the custom error message in the IIS, the below message is shown.

















Follow the below steps to suppress error messages:
  • Goto Cordys Instance in the IIS.
  • Expand the Instance, there you will find the cordys folder inside.
  • Select the cordys folder & 
  • Double click the Configuration Editor (as shown in the picture below.)



Now, change the default selected mode to "Application Host as show in the below picture" and make sure Section selected is "System.webServer/httpErrors".
This helps us to change the properties shown below.

Now change the properties as shown in the below picture.
Follow the steps below :

Change the properties as suggested below

  • allowAbsolutePathWhenDelegated = True
  • errormode = Custom
  • Click Apply which will be on the right side of the configuration page under Actions



Now change the mode back to "CORDBOP4312/cordys web.config" and properties as shown in the below.
  • From  as CORDBOP4312/cordys web.config (CORDBOP4312 is the instance name here)
  • errormode as Custom
  • Click Apply


After setting all the properties, now set the path of the HTM Page in the error Pages as shown in the below picture:

  • Double click the Error Pages of the cordys folder
  • Double click 404 row item (Select any error status code which you want to configure, I have configured custom 404 page for my cordys site)
  • Unchcek the check box
  • Set the path of the HTM page
  • Click OK (Refer screenshot for above steps)

Restart the Cordys Site

Now Test the same throw browser and it shows like below



You can find the same explanation in a document which is shared here

--------------------------------------------
Credits : Kacham Naresh

Monday, July 21, 2014

Call a web service from html using JQuery

Adding to the earlier post of mine http://learnings.joshikiran.com/2014/05/call-web-service-from-html.html I wanted to show a way to call a web service using JQuery in this post.

So the pre-requisites remains same i.e., you must know which web service you want to call (Method + Namespace) and also a gateway URL (URL to which you want to POST/GET).

The example I am trying here is executing the below SOAP request

<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">
<SOAP:Body>
<GetXMLObject xmlns="http://schemas.cordys.com/1.0/xmlstore">
<key version="">/OAuthIntegration/RedirectorContent.xml</key>
</GetXMLObject>
</SOAP:Body>
</SOAP:Envelope>

Gateway URL which I am using is : /cordys/com.eibus.web.soap.Gateway.wcp? 

(For Ppl who understand the architecture of cordys : This is a SOAP request intended to be executed under system organization context. If you want a service to be executed under any organization context you need to append the Organization dn also to the gateway)

By taking references from cordys API, I have created a wrapper on $.ajax call to call a webservice. The wrapper which i have created is something like $.joshi.ajax which is on similar lines with $.cordys.ajax

This works exactly similar way what I have explained in the similar post (request as string and posting to the gateway URL) but this using ajax calls of JQuery.

A utility js file should be as mentioned below, this utility file then be imported where ever you want to use,

<<NameOfJSFile : joshiJQuery which you can view it html page while importing>>

$.joshi = function(){
$.joshi={};
}
$.joshi.ajax = function(options){
var opts = $.extend({}, $.joshi.ajax.defaults);
opts = ajaxExtend(opts, options);
opts.url = configureGatewayUrl(opts.url, opts);
if (!opts.url) return null;
if (typeof (opts.data) === "undefined" && opts.method && opts.namespace) {
var dataStrings = [];
dataStrings.push("<SOAP:Envelope xmlns:SOAP='http://schemas.xmlsoap.org/soap/envelope/'><SOAP:Body><");
dataStrings.push(opts.method);
dataStrings.push(" xmlns='");
dataStrings.push(opts.namespace);
dataStrings.push("'>");
if (opts.parameters) {
dataStrings.push(getParameterString(opts.parameters, opts));
}
dataStrings.push("</" + opts.method + ">");
dataStrings.push("</SOAP:Body></SOAP:Envelope>");
opts.data = dataStrings.join("");
}
debugger;
return $.ajax(opts);
}
function getParameterString(parameters, settings) {
var pStrings = [];
if ($.isArray(parameters)) {
for (var i = 0, len = parameters.length; i < len; i++) {
var par = parameters[i];
pStrings.push("<" + par.name + ">");
pStrings.push((typeof (par.value) === "function" ? par.value() : par.value));
pStrings.push("</" + par.name + ">");
}
} else if (typeof (parameters) === "object") {
if ($.cordys.json) pStrings.push($.cordys.json.js2xmlstring(parameters));
else {
for (var par in parameters) {
pStrings.push("<" + par + ">");
pStrings.push((typeof (parameters[par]) === "function" ? parameters[par]() : parameters[par]));
pStrings.push("</" + par + ">");
}
}
} else if (typeof (parameters) === "function") {
if (typeof (settings.context) === "object") {
pStrings.push(parameters.call(settings.context, settings));
} else {
pStrings.push(parameters(settings));
}
} else if (typeof (parameters) === "string") {
pStrings.push(parameters);
}
return pStrings.join("");
}
function configureGatewayUrl(url, options) {
return url ? url.replace(/^http:\//, window.location.protocol + "/").replace(/\/localhost\//, "/" + window.location.host + "/") : "com.eibus.web.soap.Gateway.wcp";
}
function ajaxExtend(target, src) {
var key, deep, flatOptions = jQuery.ajaxSettings.flatOptions || {};
for (key in src) {
if (src[key] !== undefined) {
(flatOptions[key] ? target : (deep || (deep = {})))[key] = src[key];
}
}
if (deep) {
jQuery.extend(true, target, deep);
}
return target;
}
$.joshi.ajax.defaults = {
url: "",
async: true,
isMock: false,
type: "POST",
contentType: "text/xml; charset=\"utf-8\"",
dataType: "json"
} 

And finally the html which you have to write should be something similar to below

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="joshiJQuery.js"></script>
<script type="text/javascript">
function callWebService()
{
debugger;
var xmlKey="";
var xmlKey=$('#key').val();
$.joshi.ajax({
 url : "http://dhl-hyd1024/cordys/com.eibus.web.soap.Gateway.wcp",
 method :"GetXMLObject",
 namespace: "http://schemas.cordys.com/1.0/xmlstore",
 parameters : "<key version=''>"+xmlKey+"</key>",
 complete : function(data){
debugger;
$('#responseOfService').html(data.responseText.replace(/</g,"&lt;").replace(/>/g,'&gt;'));
 }
});
}
</script>
</head>
<body class='default'>
<input type="input" id="key" style="width:400px;" value="/bFOIntFrameWork/RedirectorContent.xml"/>
<input type="button" value="Fire Web Service" style="width:200px;" onclick="callWebService()"></input>
<br/><br/>
<div id="responseOfService" style="
font-family: Trebuchet ms;
font-size: 0.9em;
width: 700px;
border: 1px solid red;
">
</div>
</body>

</html>


Wednesday, May 28, 2014

Call a web service from HTML

Goal :
The goal for this post is to know how exactly we call a web service in html page (Service and HTML should be hosted in the same server).

Pre-Requisites :

  • There should be a web service which is hosted in the server. 
  • One should have knowledge on what are the parameters to be sent to call a web service or at least know how to use a SOAP UI to call a web service.
  • Basic html knowledge.
Explanation :
  • Know the web service to be called
You have to know the parameters of the web service to be called. Below are the parameters which are to be known (Assuming the web service is in the same server where the html file is being developed),
1. End point
2. SOAP Request
3. Content Type

If the above parameters are not known these can be taken from soap UI or from Fiddler as shown below

Below picture gives a brief idea on how to get End Point and SOAP Request from SOAP UI



Below picture gives information on how to get End Point, SOAP Request and Content Type from Fiddler.


There are other ways of getting these information like network tab of chrome's developer tools etc., These are just few ways of getting these information. However the goal here is to get the parameters not how do we get. Once we have this information we go ahead by writing simple html page.
  • Write a simple HTML Page
Below is the sample page how do we write it.

  • Write a function which calls a web service and display it on the browser

function soap() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open('POST', 'http://dhl-hyd1024/cordys/com.eibus.web.soap.Gateway.wcp?', true);
            // build SOAP request
            var sr =             
                '<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">'+
'<SOAP:Body>'+
                        '<sty:GetXMLObject xmlns:sty="http://schemas.cordys.com/1.0/xmlstore">' +
                            '<sty:key version="isv">/OAuthIntegration/RedirectorContent.xml</sty:key>' +
                        '</sty:GetXMLObject>' +
' </SOAP:Body>'+
'</SOAP:Envelope>';
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
            xmlhttp.send(sr);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
document.getElementById('responseXML').innerHTML = xml_to_string(xmlhttp.responseXML);
                        alert('done use firebug to see response');
                    }
                }
            }
        }

Note : xml_to_string here is a function which is irrelevant here.

Highlighted sections are variable parameters (important variable parameters). These parameters should be replaced by the parameters what we have collected in the previous sections.

However this way of communication is not JQuery based which I would suggest to use in order to be in recent industrial terms.

Tuesday, December 17, 2013

Java Script : Date Format Utilities

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
Date.prototype.monthNames = [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
];

Date.prototype.getMonthName = function() {
return this.monthNames[this.getMonth()];
};
Date.prototype.getShortMonthName = function () {
return this.getMonthName().substr(0, 3);
};

function convert(dateObj,fromFormat,toFormat) {
/*default the values 
dateObj default it to new Date();
fromFormat default it to UTC;
toFormat default it to UTC;
*/
var dateObj = dateObj;
var fromFormat = fromFormat;
var toFormat = toFormat;
if(!dateObj || dateObj=="")
dateObj = new Date();
debugger;
//if both fromFormat and toFormat is null
dateObj = new Date(Date.parse(dateObj));
if(!toFormat || toFormat=='' || toFormat=='CORDYS')
{
//return the dateObj in UTC Format
return dateObj.toISOString();
}
if(toFormat=='dd-MM-yyyy'){
var formattedDT = dateObj.getDate()+"-"+dateObj.getMonth()+"-"+dateObj.getFullYear();
return formattedDT;
}
if(toFormat=='yyyy-MM-dd'){
var formattedDT = dateObj.getFullYear()+"-"+dateObj.getMonth()+"-"+dateObj.getDate();
return formattedDT;
}
if(toFormat=='UTC'||toFormat=='GMT'){
return dateObj.toUTCString();
}
if(toFormat=='dd/MM/yyyy'){
var formattedDT = dateObj.getDate()+"/"+dateObj.getMonth()+"/"+dateObj.getFullYear();
return formattedDT;
}
if(toFormat=='yyyy/MM/dd'){
var formattedDT = dateObj.getFullYear()+"/"+dateObj.getMonth()+"/"+dateObj.getDate();
return formattedDT;
}
if(toFormat=='dd-MMM-yyyy'){
var formattedDT = dateObj.getDate()+"-"+dateObj.getShortMonthName()+"-"+dateObj.getFullYear();
return formattedDT;
}
if(toFormat=='dd MMM yyyy'){
var formattedDT = dateObj.getDate()+" "+dateObj.getShortMonthName()+" "+dateObj.getFullYear();
return formattedDT;
}
var format = dateObj.getFullYear()+"-";
format += dateObj.getMonth()+"-";
format += dateObj.getDate();
return dateObj.toJSON();
}
function convertDate(){
$("#convertedFormat").html(convert($('#custDate').val(),'',$('#ipDateFormat').val()));
}
</script>
</head>
<body>
<font style="font-family:Trebuchet MS;font-size:14px;width:100%;">Date Format <input id="ipDateFormat"></input></font><br/>
<input id="custDate" type="date" title="Please enter Date"></input><br/>
<button id="convertFormat" onclick="convertDate()">Convert Format</button><br/>
<div id="convertedFormat" style="font-family:Trebuchet MS;font-size:14px;width:100%;"><div>
</body>
</html>

HTML : Sample table usage

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<table>
<tr><td style="border:1px solid;color:#FF0000;background-color:#FF0000">A</td><td style="padding-left:15px;">Aborted</td></tr>
<tr><td style="border:1px solid;color:#FF9933;background-color:#FF9933">W</td><td style="padding-left:15px;">Waiting</td></tr>
<tr><td style="border:1px solid;color:#0066FF;background-color:#0066FF">R</td><td style="padding-left:15px;">Running</td></tr>
<table>
</body>
</html>