Thursday, 19 December 2013

Change Event in LightSwitch HtmlClient

Change Event in LightSwitch HtmlClient?

While Developing an application in Lightswitch HtmlClient I faced a problem that how can we get the price of selected Product when a sales person sales an item. We can do this thing on change event of the product selection. But in Lightswitch HtmlClient Application we can call the change event with the help of addChangeListener function. Following are the steps to resolve this problem.

Problem:

 How to fetch the Price of selected Product in text field.

 
Resolution: 

Step 1: write the following code on the Created event of the current screen.

myapp.AddEdittbOrderLineItem.created = function (screen) {
    // Write code here.
    screen.tbOrderLineItem.addChangeListener("tbProduct", function (e) {
        var contentItem = screen.findContentItem("tbProduct");
        screen.tbOrderLineItem.ProductPrice = contentItem.details.value.Price;
    });
  
};


Result: Now you are able to get the selected Product price.



Monday, 18 November 2013

SharePoint Site does not appear to be a valid site. SharePoint 2010 (or later) with an installation of WCF Data Services is required.

When we are trying to add the SharePoint data source to our project then if we get  the error SharePoint Site does not appear to be a valid site. SharePoint 2010 (or later) with an installation of WCF Data Services is required. We can resolve this by enable SharePoint to our project. Following is the step by step solution.

Step1: Adding SharePoint data source to project

  

Step2: Add SharePoint site address


Step3: Getting an error Message


Solution 

Step4: To Enable SharePoint by right click on the project as shown below


 Step5: It will add the SharePoint section to the project


Step6: Now you are able to add the SharePoint data shource to your project.

Friday, 8 November 2013

How to Upload an Image using LightSwitch htmlclient in sql server and in SharePoint List?

In LightSwitch we can upload an image. If we are using sqlserver then we can upload an image and store this image in database. But If we are using Sharepoint list then we have to create list of Document Library, Image will upload to this list and storing the path of the Image to general list. Like this we can solve Image uploading problem.

Storing Image in Sql Server

I am using the student master example. I have created a table of a student master which is storing student pic. and I am trying to Upload this image in the database.

Steps: 1. Create a master screen using this table 

2. Now create an PopUp Dialog and a  button as shown below. Also set that button to Use the Created Popup Dialog.



3. Now we have to do the Important part of our application. We have to download  two files and add them to the following Location. Also add the reference of java script file to the default.htm file. 

image-uploader.js
image-uploader-base64-encoder.aspx

<script type="text/javascript" src="Scripts/image-uploader.js"></script>

4. In the Properties window, choose the Edit Render Code hyperlink or select the “Write Code” button at the top right of the designer and select the _render method.

myapp.StudentMasters.Pic1_render = function (element, contentItem) {
    // Write code here.
    createImageUploader(element, contentItem, "max-width: 500px; max-height:300px");
};

Hit the F5 button and we are able to upload the file to the database



Storing Image in SharePoint List

Upcoming

Friday, 27 September 2013

Select current user in Lightswitch HTMLClient dropdown?

We need to do this to protect the OData service points. Only setting this on the client side code (shown later) is not enough. A user could access the OData service point directly and alter the value. Using the code above prevents this.

 However, the UserName is not populated when we run the application.

To fix this, we first switch to File View.

We add a page to the Server project using the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace LightSwitchApplication.Web
{
    public class GetUserName : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            using (var serverContext = ServerApplicationContext.CreateContext())
            {
                context.Response.ContentType = "text/plain";
                context.Response.Write(serverContext.Application.User.Name);
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


We switch back to Logical View, select the Entity, Client (tab), Write Code, and then the created method.
We add the following code:

myapp.PromiseOrders.created = function (entity) {
    // Set the default date for the Order
    entity.OrderDate = new Date();
    // Using a Promise object we can call the CallGetUserName function
    msls.promiseOperation(CallGetUserName).then(function PromiseSuccess(PromiseResult) {
        // Set the result of the CallGetUserName function to the 
        // UserName of the entity
        entity.UserName = PromiseResult;
    });
};
// This function will be wrapped in a Promise object

function CallGetUserName(operation) {
    $.ajax({
        type: 'post',
        data: {},
        url: '../web/GetUserName.ashx',
        success: operation.code(function AjaxSuccess(AjaxResult) {
            operation.complete(AjaxResult);
}) }); }
 

The UserName is now retrieved. 

Now how to select current user in Lightswitch HTMLClient dropdown?
change the following code with the above code

msls.promiseOperation(CallGetUserName).then(function PromiseSuccess(PromiseResult) {
      
myapp.activeDataWorkspace.ApplicationData.SalePersonMasters_SingleOrDefault(PromiseResult).execute().then(function (result) {
            entity.SalePersonMaster = result.results[0];
        });
    });
};

function CallGetUserName(operation) {
    $.ajax({
        type: 'post',
        date: {},
        url: '../web/GetUserName.ashx',
        success: operation.code(function AjaxSuccess(AjaxResult) {
            operation.complete(AjaxResult);
        })

    });
}


Current Sales Person is selected in the sales person drop down.

 
Whats new in Visual Studio 2013 for lightswitch Applications?