Aug 2

Written by: Michael Washington
8/2/2015 1:09 PM 

ComponentOne has released four new Wijmo controls for LightSwitch. These controls, called Cloud Business App (CBA) controls, use pure JavaScript client side code, with no internal dependencies on jQuery.

The four new controls are:

• FlexChart for LightSwitch CBA
• FlexPie for LightSwitch CBA
• Gauges for LightSwitch CBA
• BulletGraph for LightSwitch CBA

Note that FlexGrid for LightSwitch CBA is part of the package but was released earlier.

You can see a live demo at this link: http://lsdemo.componentone.com/studiocba/htmlclient/

You can get more information at this link: http://www.componentone.com/Studio/Platform/LightSwitch

Set-Up

After installing the controls, we enable them in each project using the Extensions panel.

Next, we right-click on the HTML project and select Manage NuGet Packages.

We search for ComponentOne Studio - Cloud Business App Edition and install it.

Pie Chart Example

To see how easy the controls are to use, let’s look at the Pie Chart.

We can use a WCF RIA Service to format the data.

        [Query(IsDefault = true)]
        public IQueryable<WCFGameBoardNumber> GetWCFGameBoardNumber()
        {
            var colWCFGameBoardSpace = (from objGameBoardSpace in this.Context.GameBoardSpaces
                                        group objGameBoardSpace by objGameBoardSpace.SpaceType into grouping
                                        select new WCFGameBoardNumber
                                        {
                                            SpaceType = grouping.Key,
                                            TotalCount = grouping.Count()
                                        }).ToList();
            List<WCFGameBoardNumber> colFinalCollection = new List<WCFGameBoardNumber>();
            foreach (var item in colWCFGameBoardSpace)
            {
                WCFGameBoardNumber objWCFGameBoardNumber = new WCFGameBoardNumber();
                objWCFGameBoardNumber.SpaceType = "Space Type: " + item.SpaceType;
                objWCFGameBoardNumber.TotalCount = item.TotalCount;
                colFinalCollection.Add(objWCFGameBoardNumber);
            }
            return colFinalCollection.AsQueryable();
        }

 

Now, we can right-click on the Screens folder and select Add Screen…

We can choose one of the Wijmo templates and select our data source.

The screen will be created.

When we run the project the interactive chart will display.

Links

http://www.componentone.com/Studio/Platform/LightSwitch

Live Demo

Cloud Business App Edition Online Help

Exploring The GrapeCity Wijmo 5 FlexGrid

Using D3 Controls in ComponentOne Studio for LightSwitch HTML Client

LightSwitch Employee Vacation Tracker Using The ComponentOne HTML Scheduler Control

Sneak Peek: Wijmo Creates Custom JavaScript In LightSwitch HTML Client

Creating LightSwitch HTML Reports using ComponentOne Active Reports

Creating a LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data)

Creating Multiple Reports in a Single Project Using ActiveReports

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

You must have Visual Studio 2015 (or higher) with LightSwitch installed to run the code (if you have Visual Studio Community Edition see How To Get Visual Studio LightSwitch For Free)

(You must have an active ComponentOne Studio trial or the full product installed to run the code)