jensbits

Output SQL Server Reporting Services (SSRS) Report as PDF from URL with VB.NET or C#.NET

jen — Mon, 23 Jan 2012 20:55:32 +0000

Outputting an existing SQL Server Reporting Services (SSRS) report to a PDF via a web URL is a convenient way to distribute SSRS reports, invoices, or anything else from SSRS. This post focuses on an existing report; however, links to the basic set up for a report are included. The code to output an existing report as PDF are given and uses a ReportViewer control.

You can skip to the PDF Output section if your server is all set up with the ReportViewer controls.

The pieces and parts to output an SSRS report as a PDF were culled from several disparate sources. All sources are given appropriate credit for their work.

As an added bonus, VB.NET and C#.NET versions are shown.

Add Report Viewer Redistributable to Server

The ReportViewer controls need to be installed on the server and Microsoft provides the redistributable for that in their download center.

The Microsoft Report Viewer 2008 Redistributable Package includes Windows Forms and ASP.NET Web server controls for viewing reports designed using Microsoft reporting technology.

Add HTTP Handler Web Server

The server has to know what it is dealing with when it is asked to generate a ReportViewer control. To help the server out, add the appropriate handlers.

Brite Global provides some excellent instructions on how to add the handlers.

Create Report on SSRS Server

The “Who Needs SQL Server’s Reporting Services?” article by DataSprings is an excellent tutorial for getting started with your first report.

Add Generic User to Report Server

For security reasons, a generic user will need to be added to the SSRS server. These credentials will be used by the .aspx page to access the report.

Give this user “Browser – May view folders, reports and subscribe to reports” only rights.

This generic (aka anonymous) user’s credentials will be stored in a separate config file and pulled into the web.config. That way if they change, you are not mucking about in the web.config file.

Create a appSetting.config and add the following information:

Pop it into the web.config as such:

The authorization is handled by using the IReportServerCredentials Interface which “allows applications to provide credentials for connecting to a Reporting Services report server.”

PDF Output

Add the ReportViewer control the an .aspx page by adding an assembly reference and the control itself:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="YOUR-FILE_NAME.vb" Inherits="YOUR-INHERITS" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

The code behind page got a lot of help from Viral at Beyond Relational’s post “Generating and exporting SSRS reports programatically using Report Viewer Control” and using Microsoft’s IReportServerCredentials Interface that was mentioned earlier:

VB.NET

Imports System.Net
Imports System.IO
Imports System.Security.Principal
Imports Microsoft.Reporting.WebForms

Partial Class YOUR_PAGE_CLASS
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        SetReportParameters()
    End Sub

    Private Sub SetReportParameters()
        'Set Processing Mode
        ReportViewer1.ProcessingMode = Microsoft.Reporting.WebForms.ProcessingMode.Remote
        ' Set report server and report path
        ReportViewer1.ServerReport.ReportServerUrl = _
           New Uri(SSRS)

        ReportViewer1.ServerReport.ReportPath = _
           "/YOUR-REPORT-PATH"

        Dim paramList As New Generic.List(Of ReportParameter)
        Dim pInfo As ReportParameterInfoCollection
        pInfo = ReportViewer1.ServerReport.GetParameters()

        'if you have report parameters - add them here
        paramList.Add(New ReportParameter("PARAM1-EXAMPLE", "1", True))
        paramList.Add(New ReportParameter("PARAM2-EXAMPLE", "2", True))

        ReportViewer1.ServerReport.SetParameters(paramList)

        ' Process and render the report
        ReportViewer1.ServerReport.Refresh()

        'output as PDF
        Dim returnValue As Byte()
        Dim format As String = "PDF"
        Dim deviceinfo As String = ""
        Dim mimeType As String = ""
        Dim encoding As String = ""
        Dim extension As String = "pdf"
        Dim streams As String() = Nothing
        Dim warnings As Microsoft.Reporting.WebForms.Warning() = Nothing

        returnValue = ReportViewer1.ServerReport.Render(format, deviceinfo, mimeType, encoding, extension, streams, warnings)
        Response.Buffer = True
        Response.Clear()

        Response.ContentType = mimeType

        Response.AddHeader("content-disposition", "attachment; filename=YOUR-OUTPUT-FILE-NAME.pdf")

        Response.BinaryWrite(returnValue)
        Response.Flush()
        Response.End()
    End Sub

    Protected Sub Page_Init(ByVal sender As Object, _
                            ByVal e As System.EventArgs) _
                            Handles Me.Init

        ReportViewer1.ServerReport.ReportServerCredentials = _
            New MyReportServerCredentials()

    End Sub
End Class

 _
Public NotInheritable Class MyReportServerCredentials
    Implements IReportServerCredentials
    Public userName As String = ConfigurationManager.AppSettings("rvUser")
    Public password As String = ConfigurationManager.AppSettings("rvPassword")
    Public domain As String = ConfigurationManager.AppSettings("rvDomain")

    Public ReadOnly Property ImpersonationUser() As WindowsIdentity _
            Implements IReportServerCredentials.ImpersonationUser
        Get
            'Use the default windows user.  Credentials will be
            'provided by the NetworkCredentials property.
            Return Nothing
        End Get
    End Property

    Public ReadOnly Property NetworkCredentials() As ICredentials _
            Implements IReportServerCredentials.NetworkCredentials
        Get
            'Read the user information from the web.config file.
            'By reading the information on demand instead of storing
            'it, the credentials will not be stored in session,
            'reducing the vulnerable surface area to the web.config
            'file, which can be secured with an ACL.

            If (String.IsNullOrEmpty(userName)) Then
                Throw New Exception("Missing user name from web.config file")
            End If

            If (String.IsNullOrEmpty(password)) Then
                Throw New Exception("Missing password from web.config file")
            End If

            If (String.IsNullOrEmpty(domain)) Then
                Throw New Exception("Missing domain from web.config file")
            End If

            Return New NetworkCredential(userName, password, domain)

        End Get
    End Property

    Public Function GetFormsCredentials(ByRef authCookie As Cookie, _
                                        ByRef userName As String, _
                                        ByRef password As String, _
                                        ByRef authority As String) _
                                        As Boolean _
            Implements IReportServerCredentials.GetFormsCredentials

        authCookie = Nothing
        userName = Nothing
        password = Nothing
        authority = Nothing

        'Not using form credentials
        Return False

    End Function

End Class

C#

using System;
using System.Configuration;
using System.Net;
using System.Security.Principal;
using Microsoft.Reporting.WebForms;
partial class YOUR_PAGE_CLASS : System.Web.UI.Page
{
    public string SSRS = ConfigurationManager.AppSettings["SSRS"];
    protected void Page_Load(object sender, System.EventArgs e)
    {
        SetReportParameters();
    }
    private void SetReportParameters()
    {
        //Set Processing Mode
        //ReportViewer1.ProcessingMode = ProcessingMode.Remote
        ReportViewer1.ProcessingMode = Microsoft.Reporting.WebForms.ProcessingMode.Remote;
        // Set report server and report path
        ReportViewer1.ServerReport.ReportServerUrl = new Uri(SSRS);

        ReportViewer1.ServerReport.ReportPath = "/YOUR-REPORT-PATH";

        System.Collections.Generic.List paramList = new System.Collections.Generic.List();
        ReportParameterInfoCollection pInfo = default(ReportParameterInfoCollection);
        pInfo = ReportViewer1.ServerReport.GetParameters();

        //if you have report parameters - add them here
        paramList.Add(new ReportParameter("PARAM1-EXAMPLE", "1", true));
        paramList.Add(new ReportParameter("PARAM1-EXAMPLE", "2", true));

        ReportViewer1.ServerReport.SetParameters(paramList);

        // Process and render the report
        ReportViewer1.ServerReport.Refresh();

        //output as PDF
        byte[] returnValue = null;
        string format = "PDF";
        string deviceinfo = "";
        string mimeType = "";
        string encoding = "";
        string extension = "pdf";
        string[] streams = null;
        Microsoft.Reporting.WebForms.Warning[] warnings = null;

        returnValue = ReportViewer1.ServerReport.Render(format, deviceinfo, out mimeType, out encoding, out extension, out streams, out warnings);
        Response.Buffer = true;
        Response.Clear();

        Response.ContentType = mimeType;

        Response.AddHeader("content-disposition", "attachment; filename=YOUR-OUTPUT-FILE-NAME.pdf");

        Response.BinaryWrite(returnValue);
        Response.Flush();
        Response.End();
    }

    protected void Page_Init(object sender, System.EventArgs e)
    {
        ReportViewer1.ServerReport.ReportServerCredentials = new MyReportServerCredentials();

    }
    public YOUR-PAGE-CLASS()
    {
        Init += Page_Init;
        Load += Page_Load;
    }
}
[Serializable()]
public sealed class MyReportServerCredentials : IReportServerCredentials
{
    public string userName = ConfigurationManager.AppSettings["rvUser"];
    public string password = ConfigurationManager.AppSettings["rvPassword"];

    public string domain = ConfigurationManager.AppSettings["rvDomain"];
    public WindowsIdentity ImpersonationUser
    {

        //Use the default windows user.  Credentials will be
        //provided by the NetworkCredentials property.

        get { return null; }
    }

    public ICredentials NetworkCredentials
    {

        get
        {
            //Read the user information from the web.config file.
            //By reading the information on demand instead of storing
            //it, the credentials will not be stored in session,
            //reducing the vulnerable surface area to the web.config
            //file, which can be secured with an ACL.

            if ((string.IsNullOrEmpty(userName)))
            {
                throw new Exception("Missing user name from web.config file");
            }

            if ((string.IsNullOrEmpty(password)))
            {
                throw new Exception("Missing password from web.config file");
            }

            if ((string.IsNullOrEmpty(domain)))
            {
                throw new Exception("Missing domain from web.config file");
            }

            return new NetworkCredential(userName, password, domain);

        }
    }

    public bool GetFormsCredentials(out Cookie authCookie,
               out string userName, out string password,
               out string authority)
    {
        authCookie = null;
        userName = null;
        password = null;
        authority = null;

        // Not using form credentials
        return false;
    }

}

Now just run your URL in a browser (http://YOUR-DOMAIN.com/YOUR-PAGE.aspx) and the File Download warning box will pop up for the PDF.

PDF Layout Tips and Things to Look Out For

Set Report PageSize to 8.5in, 11in for portrait or 11in, 8.5in for landscape.
Set the Report Margins as you would like.
Make sure your Report Body (white staging area in Visual Studio) does not exceed your Report PageSize minus your margins.
Remove any unused white space in Report Body no matter what you set the sizes at.

No related posts.

Demos

jen — Thu, 19 Jan 2012 18:55:09 +0000

Skip the post. Go straight to the demo.

Google Analytics Core Reporting API (Data Export) with Google Chart Visualizations

You can punch into the Google Analytics Core Reporting (Data Export) API, pull out some stats, and stuff them into some nice graphical charts using Google Chart Visualizations.
Authenticating with OAuth 2.0 for Google API Access with PHP

Google is leading developers to OAuth 2.0 for access to its API’s
Google API Offline Access Using OAuth 2.0 Refresh Token

Offline access for Google APIs is achieved through a refresh token that is issued when a user first visits the app and grants offline access.
Using jQuery Autocomplete to Populate Another Autocomplete – ASP.NET, ColdFusion, and PHP Examples

Using one jquery autocomplete to populate another jquery autocomplete on the same page.
jQuery.ajax and jQuery.post Form Submit Examples with PHP

Two jQuery functions that allow for the submission of form are the jQuery.ajax function and the jQuery.post function.
Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties

Modal dialog box that confirms submission of a form.

No related posts.

Google API Offline Access Using OAuth 2.0 Refresh Token

jen — Mon, 09 Jan 2012 19:22:31 +0000

Offline access for Google APIs is achieved through a refresh token that is issued when a user first visits the app and grants offline access. Essentially, you have to ask for offline access, Google warns them that you are asking for it, and then they have to grant it. The return contains the ~~golden ticket~~ refresh token.

The first time a given user’s browser is sent to this URL, they see a consent page. If they grant access, then the response includes an authorization code which may be redeemed for an access token and a refresh token.

Once a refresh token is obtained, it can be used to access Google APIs that the user has access to without re-authorizing.

See Google’s documentation on OAuth 2 for web apps for more information.

Asking for Offline Access

Parameters for Login URL

Client id and client secret are set by Google when the app is registered for api access in the Google APIs Console.

The redirect uri is a location on the server that the user is sent to after authenticating. This uri is registered in the Google APIs Console during app registration.

These values can be included as a separate file so the values can easily be swapped out on a per app basis.

$client_id = "1111111111111.apps.googleusercontent.com"; //your client id
$client_secret = "xXasdfd212312_dfdf dfxxdf"; //your client secret
$redirect_uri = "http://YOUR-SITE.com/YOUR-PATH/";
$scope = "https://GOOGLE-SCOPE-TO-ACCESS"; //google scope to access
$state = "profile"; //optional - could be whatever value you want
$access_type = "offline"; //optional - allows for retrieval of refresh_token for offline access

User Login URL

The login URL will prompt the user for permission to access their Google content via the app and a “code” request variable will be returned in the URL. See Forming the URL for more detailed information.

$loginUrl = sprintf("https://accounts.google.com/o/oauth2/auth?scope=%s&state=%s&redirect_uri=%s&response_type=code&client_id=%s&access_type=%s", $scope, $state, $redirect_uri, $client_id, $access_type);

Login with Google account using OAuth 2.0

Returned URL example (http://YOUR-SITE.com/YOUR-PATH/ is your redirect uri):


http://YOUR-SITE.com/YOUR-PATH/?state=profile&code=1/fFBGRNJru1FQd44AzqT3Zg

Get Access Token and Refresh Token

They said “Yes!” Initial consent received for offline access and a “code” was returned as a request parameter:

//Initial grant for access approved by user returns 'code' URL param
if(isset($_REQUEST['code'])){
    $accessToken = get_oauth2_token($_REQUEST['code'],"online");
}

The get_oauth2_token does double duty. It will return an access token for either online or offline access grants.

For the initial grant, if a refresh token is returned, the function puts the refresh token into ‘global $refreshToken’

Why not store the refresh token here instead of putting it in a var? Because there is no reference for the refresh token at this point other than the scope of the grant request. You don’t know who it belongs to. The initial access token returned with the refresh token can be used to query the API and get data to associate with the refresh token for the database.

If there is a known value (like it belongs to you) to associate with the refresh token that can be used to retrieve it later on, put a call to the database save function in here.

//returns session token for calls to API using oauth 2.0
//set global refreshToken var if refresh token is returned
function get_oauth2_token($grantCode,$grantType) {
	global $client_id;
	global $client_secret;
	global $redirect_uri;

	$oauth2token_url = "https://accounts.google.com/o/oauth2/token";
	$clienttoken_post = array(
	"client_id" => $client_id,
	"client_secret" => $client_secret);

	if ($grantType === "online"){
		$clienttoken_post["code"] = $grantCode;
		$clienttoken_post["redirect_uri"] = $redirect_uri;
		$clienttoken_post["grant_type"] = "authorization_code";
	}

	if ($grantType === "offline"){
		$clienttoken_post["refresh_token"] = $grantCode;
		$clienttoken_post["grant_type"] = "refresh_token";
	}

	$curl = curl_init($oauth2token_url);

	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_POSTFIELDS, $clienttoken_post);
	curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

	$json_response = curl_exec($curl);
	curl_close($curl);

	$authObj = json_decode($json_response);

	//if offline access requested and granted, get refresh token
	if (isset($authObj->refresh_token)){
		global $refreshToken;
		$refreshToken = $authObj->refresh_token;
	}

	$accessToken = $authObj->access_token;
	return $accessToken;
}

Storing the Refresh Token

The refresh token will need to be stored for retrieval in the future. This example puts it in a MySQL database.

If a refresh token has been granted, store it in a database. Otherwise, retrieve a refresh token from the database. And, use the refresh token to set an access token for API calls.

//get name on account to use as reference in database for retrieving the refresh token
//can be done with data from primary API that is being queried

$googleUserInfoAPI = "https://www.googleapis.com/oauth2/v1/userinfo";

if (isset($accessToken)){
    //got access token, get data
    $accountObj = call_api($accessToken, $googleUserInfoAPI);
    $account_name =  $accountObj->name;
}

//refresh token handling - save to db if returned with access token
//or retrieve from db if needed for app
if(isset($refreshToken)){
    $accessToken = dbRefreshToken($account_name,$demo_scope,$refreshToken);
} else {
    $accessTokenFromRefresh = dbRefreshToken('ACCT_NAME_HERE',$demo_scope);
}

‘ACCT_NAME_HERE’ is a string that is used to identify for retrieval the refresh token you want to use.

The dbRefreshToken function for saving or retrieving from database and returning an access token:

function dbRefreshToken($name,$scope,$refreshToken = ""){
    global $serverpath;
    $path = $serverpath."/config/token_config.php";
    include_once($path);
    $path = $serverpath."/config/db.php";
    include_once($path);

    if ($conn){
	if (strlen($refreshToken)){
	//if refreshToken in param list, save to db
	    $query = "INSERT INTO tokens (name, scope, token) VALUES (:name, :scope, :refreshToken)";
	    $result = $conn->prepare($query);
	    $result->bindValue(':name', $name, PDO::PARAM_STR);
	    $result->bindValue(':scope', $scope, PDO::PARAM_STR);
	    $result->bindValue(':refreshToken', $refreshToken, PDO::PARAM_STR);
	    $result->execute();
	    $token = $refreshToken;
       } else {
        //else retrieve refresh token from db
	    $query = "SELECT token from tokens where name = :name and scope = :scope";
	    $result = $conn->prepare($query);
	    $result->bindValue(':name',$name, PDO::PARAM_STR);
	    $result->bindValue(':scope', $scope, PDO::PARAM_STR);
	    $result->execute();
	    $row = $result->fetch(PDO::FETCH_ASSOC);
	    $token = $row["token"];
        }

    mysql_close($conn);

    $accessTokenfromRefresh = get_oauth2_token($token,"offline");
    return $accessTokenfromRefresh;
   }
}

Note that config.php contains your database configuration parameter (username, password, database name) and db.php contains the actual connection string. Put them in a folder and restrict web browsing to that folder.

The table is called ‘tokens’ and the columns are name, scope, and token.

Demo

Download code

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

Google API Requests with OAuth 2.0 Access Token

jen — Thu, 29 Dec 2011 19:42:00 +0000

In the Authenticating with OAuth 2.0 for Google API Access with PHP post, an access token was retrieved for calls to Google APIs for data. In this post, the user’s name will be retrieved from their account.

To do that, the access token needs to be sent as a header param or query param with the call to the userinfo Google API. See Calling a Google API for more information. The header param method is shown below.

A PHP object containing the account info will be returned by a call to “call_api” function with the access token and API URL passed in:

$accountObj = call_api($_SESSION['accessToken'],"https://www.googleapis.com/oauth2/v1/userinfo");

“call_api” calls the api and gets the data:

function call_api($accessToken,$url){
	$curl = curl_init($url);

	curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	$curlheader[0] = "Authorization: Bearer " . $accessToken;
	curl_setopt($curl, CURLOPT_HTTPHEADER, $curlheader);

	$json_response = curl_exec($curl);
	curl_close($curl);

	$responseObj = json_decode($json_response);

	return $responseObj;
}

From the account object, the name can be accessed;

$your_name =  $accountObj->name;

echo "The name on your Google account is: " . $your_name . "";

Demo

Download code

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

Authenticating with OAuth 2.0 for Google API Access with PHP

jen — Wed, 21 Dec 2011 00:21:22 +0000

Google is leading developers to OAuth 2.0 for access to its API’s:

Given the security implications of getting the implementation correct, we strongly encourage developers to use OAuth 2.0 libraries when interacting with Google’s OAuth 2.0 endpoints (see Client libraries for more information). Over time, more features will be added to these libraries.

Steps

Register the app with Google
Create login URL and retrieve “code”
Exchange “code” for access token
Send access token with API requests (details in this post)

Google details the instructions in Using OAuth 2.0 to Access Google APIs.

Steps for registering your app can be found in APIs Client Library for PHP.

Google scope values for its API’s can be found in the OAuth 2.0 Playground.

Create Login URL and Retrieve “Code”

Parameters for Login URL

Client id and client secret are set by Google when the app is registered for api access in the Google APIs Console.

The redirect uri is a location on the server that the user is sent to after authenticating. This uri is registered in the Google APIs Console during app registration.

These values can be included as a separate file so the values can easily be swapped out on a per app basis.

$client_id = "1111111111111.apps.googleusercontent.com"; //your client id
$client_secret = "XxxXXxxXXxXXxXxXXXxXXXX"; //your client secret
$redirect_uri = "http://YOUR-SITE.com/YOUR-PATH/";
$scope = "https://GOOGLE-SCOPE-TO-ACCESS"; //google scope to access
$state = "profile"; //optional
$access_type = "offline"; //optional - allows for retrieval of refresh_token for offline access

User Login URL

$loginUrl = sprintf("https://accounts.google.com/o/oauth2/auth?scope=%s&state=%s&redirect_uri=%s&response_type=code&client_id=%s&access_type=%s", $scope, $state, $redirect_uri, $client_id, $access_type);

Login with Google account using OAuth 2.0

Returned URL example (http://YOUR-SITE.com/YOUR-PATH/ is your redirect uri):


http://YOUR-SITE.com/YOUR-PATH/?state=profile&code=1/fFBGRNJru1FQd44AzqT3Zg

Exchange “Code” for Access Token

If access type was set to “offline” in the login URL, a refresh token will be sent with the access token so the data can be accessed without prompting the user again.

//Oauth 2.0: exchange token for session token so multiple calls can be made to api
if(isset($_REQUEST['code'])){
	$_SESSION['accessToken'] = get_oauth2_token($_REQUEST['code']);
}

//returns session token for calls to API using oauth 2.0
function get_oauth2_token($code) {
	global $client_id;
	global $client_secret;
	global $redirect_uri;

	$oauth2token_url = "https://accounts.google.com/o/oauth2/token";
	$clienttoken_post = array(
	"code" => $code,
	"client_id" => $client_id,
	"client_secret" => $client_secret,
	"redirect_uri" => $redirect_uri,
	"grant_type" => "authorization_code"
	);

	$curl = curl_init($oauth2token_url);

	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_POSTFIELDS, $clienttoken_post);
	curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

	$json_response = curl_exec($curl);
	curl_close($curl);

	$authObj = json_decode($json_response);

	if (isset($authObj->refresh_token)){
        //refresh token only granted on first authorization for offline access
        //save to db for future use (db saving not included in example)
		global $refreshToken;
		$refreshToken = $authObj->refresh_token;
	}

	$accessToken = $authObj->access_token;
	return $accessToken;
}

You now have an access token to present to the Google API of your choice (specified in the scope) for data.

Demo

Download code

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

Jquery Datepicker with Masked Input and Current Time

jen — Thu, 22 Sep 2011 18:43:49 +0000

Examples of using a jquery ui datepicker with masked input and current time as input values. Input is editable for manual change of date and/or time.

Help in this post can from Adding time to jQuery UI Datepicker by Derek Allard and the Masked Input Plugin 1.3 by Josh Bush.

There are two functions:

getTimeAmPm – formats time for standard AM/PM display
getTime24 – format time for 24-hour display (sometimes called military time)

function getTimeAmPm() {

    var date_o = new Date();

    var date_mins = date_o.getMinutes() < 10 ? "0" + date_o.getMinutes() : date_o.getMinutes();

    var date_hours = date_o.getHours() > 12 ? "0" + (date_o.getHours() - 12) : date_o.getHours();

    var date_am_pm = date_o.getHours() < 12 ?  " AM" : " PM";

    // handle midnight
    date_hours = date_hours === 0 ? 12 : date_hours;

    return "'" + date_hours + ":" + date_mins + " " + date_am_pm + "'";
}

function getTime24() {

    var date_o = new Date();

    var date_hours = date_o.getHours() < 10 ? "0" + date_o.getHours() : date_o.getHours();

    var date_mins = date_o.getMinutes() < 10 ? "0" + date_o.getMinutes() : date_o.getMinutes();

    return "'" + date_hours + ":" + date_mins + "'";
}

The datepickers concatenate on the result from one of the time format functions and they both have the mask jquery plugin function by Josh applied to them:

$(".datepicker").datepicker({dateFormat: 'yy-mm-dd ' + getTimeAmPm()});

$(".datepicker").mask("9999-99-99 99:99 aa");

$(".datepicker24").datepicker({dateFormat: 'yy-mm-dd ' + getTime24()});

$(".datepicker24").mask("9999-99-99 99:99");

The HTML just has a couple of inputs for the examples:

 AM / PM


 24 hour

Demo

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

No related posts.

Breaking Development 2011 Nashville – Mobile Goodness

jen — Wed, 21 Sep 2011 15:15:58 +0000

On September 12th, 2011 the Breaking Development conference rolled into Nashville. With two full days of talks and one full day of workshops, this single-track, superbly organized event did not disappoint. Previously in Dallas, Breaking Development: Nashville focused on new, emerging techniques for web development and design for mobile devices. Topics of the talks included responsive design, resource and page optimization, designing mobile web experiences, designing for touch, building mobile apps with web technology, and native mobile apps versus mobile web apps.

This was simply the best conference I have attended. Every session had real-world, immediately applicable techniques and ideas.

Some of the featured concepts included:

Mobile is minefield. Ground is still shifting.
Mobile apps are good at certain type of activity but porting to multiple devices is painful.
Visual design on mobile is about usability not pixel perfection.
People are accessing your content on phone web browser whether you want them to or not so make it good because clients want positive experience with brand.
Every unoptimized mobile link perpetuates negative perception.
80% of mobile web users would access web content more often if experience was good.
80% of branded apps achieve less than 1,000 downloads and whether or not users keep app on phone is up to them.
Create best experience for most devices. And superior support for top devices to site.
Mobile is the most important technology since the printing press.

View the presentation slides and session descriptions.

Next Breaking Development conference is in Orlando. Worth your time and money. Updates for Orlando can be found on Lanyrd.

No related posts.

Using jQuery Datepicker and Dialog Box To Select Date Range

jen — Tue, 06 Sep 2011 14:46:58 +0000

Using a jquery datepicker in a jquery dialog box to select a date range is a handy, slick way of having users input dates. Date handling and validation in forms when input by the user can be tricky at best.

Here a modal dialog box will be used to allow the user to select a date range. That date range will be validated to ensure that it goes from a start date that is prior to the end date. Also, an alternate field will be populated by the datepicker that formats the dates in a specific way. This can be helpful if you are using the dates in a database query or other call that requires a certain format.

First we put a button to open the dialog box and the dialog box itself on the page:

	 



	
    Start Date
    
    End Date

A message div is in the dialog box to send the user success or error messages related to their date selection. The input boxes are set to readonly so the user cannot type in a date; they must use the datepicker.

Then the jquery to set the datepicker to the appropriate input box in the dialog box, specify the alternate field and format, and specify min and max dates:

$("#startdate").datepicker({altField: '#start_alternate',altFormat: 'yy-mm-dd',minDate: '-1y',maxDate: -1});

$("#enddate").datepicker({altField: '#end_alternate',altFormat: 'yy-mm-dd',minDate: '-1y',maxDate: -1});

The minDate is set to a year from today (user cannot go back more than a year) with ‘-1y’ and the maxDate is set to yesterday (user cannot pick today or a future date) with -1. Check the jQuery documentation on the datepicker min and maxDates for further explanation.

And, of course, the code for the button that opens our dialog box:

$('button#selectDateRange').click(function(){
		$('#dialog').dialog('open');
	});

The dialog box code does several things including:

Closing the datepicker when the dialog closes
Checking for values in the input boxes
AJAX post to validate the date range (alternate javascript validation of date range included below)
Displaying a message to the user after validating the date range
Sets the additional dialog close button functions

$('#dialog').dialog({
    autoOpen: false,
    width: 400,
    modal: true,
    resizable: false,
    close: function() {
        $('#message').html("");
	    $('#dateRangeForm :input').each(function() {
	    $(this).val('');
	});
    },
    buttons: {
        "Close": function() {
            $(this).dialog("close");
	        $('#message').html("");
	        $('#dateRangeForm :input').each(function() {
	        $(this).val('');
	    });
	},
	"Submit": function() {
	    var errors = 0;
        $('#dateRangeForm :input').each(function() {
	        if($(this).val() == ''){
		       $(this).prev().prev().css("color", "red");
		       $(this).prev().val('Click box and use calendar to enter date.');
		       errors++;
		   } else {
		       $(this).prev().css("color", "black");
		   }
	   });

	  if (errors == 0){
	      dataString = $('form').serialize();
            $.ajax({
			    type: "POST",
			    url: "dateRange.php",
			    data: dataString,
			    dataType: "json",
			    success: function(data) {
			        if(data.error == "invalid"){
				    $('#message').html("Date range is invalid.");
			        } else {
				    $('#message').html("Date range is valid.");
			        }
               } //end of success
            }); //end of ajax
         } //end of if(errors == 0)
      } //end of Submit button function
    } //end of buttons:
}); //end of dialog

Alternate method using javascript (no ajax call) to validate dates:

$('#dialog').dialog({
		autoOpen: false,
		width: 400,
		modal: true,
		resizable: false,
		close: function() {
			$('#message').html("");
			$('#dateRangeForm :input').each(function() {
				$(this).val('');
			});
		 },
		buttons: {
			"Close": function() {
				$(this).dialog("close");
				$('#message').html("");
			     $('#dateRangeForm :input').each(function() {
				$(this).val('');
					 });
			},
			"Submit": function() {
				var errors = 0;

				$('#dateRangeForm :input').each(function() {
					if($(this).val() == ''){
						$(this).prev().prev().css("color", "red");
						$(this).prev().val('Click box and use calendar to enter date.');
						errors++;
					} else {
						$(this).prev().css("color", "black");
					}
				 });

				if (errors == 0){
					var start_date = new Date($("#startdate").val());
					var end_date = new Date($("#enddate").val());
					if(end_date < start_date){
						$('#message').html("Date range is invalid.");
					}else{
						$('#message').html("Date range is valid.");
					}
         } //end of if(errors == 0)
      } //end of Submit button function
   } //end of buttons:
}); //end of dialog

The daterange.php is pretty straightforward:

 $end_date){
    $return_json = '{"error":"invalid"}';
}else{
    $return_json = '{"error":"valid"}';
}

echo $return_json;
?>

Now, it entirely possible that you can validate the dates without a trip to the server; however, this example sets you up to use the dialog datepicker in more advanced processing or database calls on the server.

Targeting Dynamic Element IDs with jQuery

jen — Thu, 01 Sep 2011 15:40:33 +0000

When elements are added dynamically through a scripting language (usually by a database pull) they can have sequential identifiers in one or more of their attributes. For this example, a series of checkboxes that, when checked, will populate an input box by matching up the numeric portion of the id attribute.

To make the matching easier to set up and understand, setting the id’s should be consistent. In this example the id’s will have a pattern of prefix_00. The elements to be matched will have the same pattern.

red
green
blue

color 01

color 02

color 03

The jquery/javacript will strip off the prefix of an element’s id to grab the numeric value. It will then concatenate the numeric value onto the prefix of the matching element.

The function to grab the number:

function getNum(element, attrPrefix) {
    //set prefix, get number
    var prefix = attrPrefix;
    var num = element.attr("id").substring((prefix.length));
    return num;
}

A checkbox change function calls the getNum function and concatenates the id for the matching element. Then it sets the value of the matched element.

$(":checkbox").change(function() {
    var num = getNum($(this), "checkbox_");
    if ($(this).is(":checked")) {
        $("#color_" + num).val($(this).val());
    } else {
        $("#color_" + num).val("");
    }
});

Fiddle Demo:

Using jQuery Autocomplete When Remote Source JSON Does Not Contain ‘Label’ or ‘Value’ Fields

jen — Wed, 24 Aug 2011 17:52:15 +0000

If the jQuery autocomplete plugin uses a remote datasource, the autocomplete expects it to return json data with a ‘label’ and/or a ‘value’ field. If you return one, either ‘label’ or ‘value’, the autocomplete uses it for both the suggestion menu and the value of the input box. If you return both, it uses the ‘label’ for the suggestion menu and the ‘value’ for the value of the input box.

What happens when the remote source returns neither a ‘label’ or ‘value’ and you cannot change the returned json of the remote source? Or, better yet, it does return them but you want different values used in the autocomplete?

For example, the remote source json string below has neither a ‘label’ or a ‘value’ field. Using this would result in the autocomplete not functioning at all.

[{"id":"3","state":"Alaska","abbrev":"AK"},{"id":"4","state":"Alabama","abbrev":"AL"},{"id":"9","state":"California","abbrev":"CA"}]

You can work around this by modifying the ‘source’ option of the autocomplete to assign one or both of the ‘label’ and ‘value’ fields values found in the json result.

To modify the ‘source’ option of the autocomplete, we add an ajax call to the source and, in the ‘success’ callback, we assign the values of all the variables we want the autocomplete to use.

$("#state").autocomplete({
				source: function( request, response ) {
				$.ajax({
					url: "states_remote.php",
					dataType: "json",
					data: {term: request.term},
					success: function(data) {
            					response($.map(data, function(item) {
                				return {
									label: item.state,
									id: item.id,
									abbrev: item.abbrev
									};
            				}));
						}
					});
				},
				minLength: 2,
				select: function(event, ui) {
					$('#state_id').val(ui.item.id);
					$('#abbrev').val(ui.item.abbrev);
				}
			});

To break this down, the ajax function has the following options:

url: url of page that returns the json; subject to same origin policy (you should use jsonp for cross-domain url’s)
dataType: sets the data coming back to the ajax function as json
data: sets the query parameter of ‘term’ to the value of ‘request.term’ which is what the user types into the input box
success: callback function that maps the returned json and sets the variables that the autcomplete will use

In this example, the ‘select’ option of the autocomplete sets the label field used by the autocomplete in the suggest menu and as the value of the input box. It also sets the values of some additional fields in the form. They are returned to the page in the demo to verify that they are set. ‘id’ is a hidden field in the form and ‘abbrev’ populates a read-only input box in the form.

And, if the json result does set the ‘label’ and/or ‘value’ fields but you don’t want those values in the autocomplete, you can adjust the ‘return’ of the ‘success’ function in th ‘ajax’ call:

return {
    label: item.value,
    yourVar1: item.id,
    yourVar2: item.label
};
// or however you want it as long as a 'label' and/or 'value' field is set

Remember, the autocomplete needs a ‘label’ or ‘value’. Don’t forget to set one, the other, or both.

Demo

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

jQuery UI Autocomplete: Search from Beginning of String

jensbits

Output SQL Server Reporting Services (SSRS) Report as PDF from URL with VB.NET or C#.NET

Add Report Viewer Redistributable to Server

Add HTTP Handler Web Server

Create Report on SSRS Server

Add Generic User to Report Server

PDF Output

VB.NET

C#

PDF Layout Tips and Things to Look Out For

Demos

Google API Offline Access Using OAuth 2.0 Refresh Token

Asking for Offline Access

Parameters for Login URL

User Login URL

Get Access Token and Refresh Token

Storing the Refresh Token

Google API Requests with OAuth 2.0 Access Token

Authenticating with OAuth 2.0 for Google API Access with PHP

Steps

Create Login URL and Retrieve “Code”

Parameters for Login URL

User Login URL

Exchange “Code” for Access Token

Jquery Datepicker with Masked Input and Current Time

Recommended

Demo

Breaking Development 2011 Nashville – Mobile Goodness

Using jQuery Datepicker and Dialog Box To Select Date Range

Recommended:

Targeting Dynamic Element IDs with jQuery

Using jQuery Autocomplete When Remote Source JSON Does Not Contain ‘Label’ or ‘Value’ Fields