LightSwitch – Common Core Teacher Evaluations

lsWires-1.0.6-Tiles

Here we’ll show you, via video, an application we’ve written to support the Common Core Standards for Education.  Its an evaluation system that in its current form is about teachers.  But we’ve made it so that with just a bit of terminology change, it can morph into an evaluation system for most anything.  Living or not!

  • Based on TNTP.org simplified rubric
  • Multi-tenant
  • Drag and Drop sorting
  • Tile based menus
  • Role based
  • Analytics with pretty graphs
  • Supports desktops down to smart phones!

Check it out on our tutorial site… TES

You can also see the video and more up on our YouTube Channel.

Tagged , ,

lsWireCore Project Updated v1.0.6

lsWireCore

Updated to lsWires.js v1.0.6

Added Database Project to pre-seed the tiles
Just need to edit the tiles in the browser to add the icons

Added lsWiresExtras folder with the security tile icons
Highly recommend Syncfusions Metro Studio for additional icons.

Updated the CopySolution.ps1 script

Fixed Visual Studio from changing IIS ports on rebuilds

This should be the project that you use our CopySolution on

We’ve moved the repo to https://bitbucket.org/interbay/lsWireCore

Don’t hesitate to holler if something breaks!

Well it broke… Arrrgggg!!  Hopefully easy work around… just do a full rebuild after you download. 
(thanks Michael Washington)

Dale

Tagged , , ,

lsWires.js Updated – 1.0.6

Good day folks,

lsWires.js has been updated, 1.0.6
lsWires.js now embeds its dependencies
lsWires.js repository has moved:  http://bitbucket.org/interbay/lswires
lsWires.js 1.0.6 will most likely break things
lsWires.js documentation will be updated shortly
lsWires.js samples will be converted and moved over to Bitbucket

We’ve also added a new database project that will pre-seed the tiles for managing security.
Have added a folder lsWiresExtras that includes a few icons for the tiles
Updated the CopySolution script, but the better solution to copy is the lsWireCore project due to a naming issue.

We’ve done some pretty significant changes under the covers and we appreciate the patience.  One of the big ones is incorporating “signals” for hooking into the jQuery Mobile Page events.  We’re also providing a much simpler, yet more powerful, tile based menu system.  I think you’ll appreciate its simplicity.  For example:

lsWires-1.0.6-Tiles

We’ll also be posting a new “real application” video that will showcase what you can do with the new 1.0.6.  Which is what the image above is from.  I think you’ll be pleased with what you see and how you can bring excitement to your LOB apps!

Stay tuned!

Tagged , , ,

LightSwitch Tutorial – Create a Multi-Select Pick List

We’ll show you how you can easily create a pick list that allows selecting multiple items, work those items, show what’s selected when you go back into the pick list.  It’ll quickly become part of all your projects!

In this tutorial we show how to take our core project, and change the pick list for adding/removing permissions from Security Roles.  Allowing the Admin to remove/add permissions in one swoop vs. having to keep popping up a pick list for each.

So check it out at our tutorial site:  LightSwitch.CodeWriting.Tips

Here are the screen shots of what you’ll get, open the picker.

RunningPicker1

Select some items, click the save button.

RunningPicker2

Now open the picker back up, notice it preselects.  Go ahead and remove a couple and add others.

RunningPicker3

 

Tagged , ,

LightSwitch Tutorial – How to enable table fixed column headers

Here ya go… our tutorial on how you can enable fixed headers for a table control.  We’ll also show you how you can keep the screen header fixed for when you have a tile or list view.  Its a pretty quick tutorial with the functionality part of lsWires.  We’ll be adding the videos soon.

As always your comments are encouraged.

Check it out…Enable fixed column headers!

LightSwitch Demo – Table Control Fixed Column Headers

Just a quick demo video showing how you can have a standard LightSwitch table control not scroll its column headers off the screen.  Its pretty cool and should have been part of the control from the beginning.  I hope you check it out and come back when we finish the tutorial so you too can do this.

Let me know what you think and that its something you’d be interested in seeing how to do.

LightSwitch Fixed Column Headers

You can test drive a live sample at: http://fixedheaders.samplebuild.com/App/

LightSwitch – Single Production Database, Multiple Applications?

Yes you can!

We’ll show you how you can actually use the same production database for multiple LightSwitch applications.  We’ll also show you how you can share common tables. And we’re not talking by OData endpoints here.

Great for situations where you are limited to the number of databases, not to mention simplifying maintenance.

Check it out on our tutorial site… lightswitch.codewriting.tips  – with videos!

Tagged , ,

LightSwitch – Deploying your application to a shared hosting provider

Are you as annoyed as I am about the cost to host your LightSwitch applications on Azure?  And as your number of applications increase, so does the cost.  Not to mention the annoying spin up time for your application once it has been idled out.

But then again, what are the options?  Visual Studio Publishing Wizard for LightSwitch no longer makes it easy to publish to 3rd party shared hosting.  And even the method it does provide, there is little documentation on how to accomplish this.  And THEN, what documentation is out there, seems to be way out dated and the instructions fail miserably.

What a mess.

Hopefully I can help you get back to being able to use shared hosting.  I’m going to step you thru the process that I use with my own hosting provider.  And show that once you are configured up, its really quite easy.  And fairly inexpensive!

Check it out… Deploying a LightSwitch application to SmarterASP.NET

LightSwitch – Examples of real life applications in service

We’ve added a section on our tutorial site to start showcasing, via video, of some real LightSwitch applications that are actually in service.

First one up is an application for sending emails to recipients that are imported from an Excel file.

  • Email Templates
  • Multiple Mail Servers
  • Column Formatting
  • Excel Formulas supported
  • Multiple Data Files
  • Server Side Queues
  • Image for Header

Check it out… and we’ll be adding more!

And of course our channel on YouTube… We’re just starting to add videos, expect many more to come.

LightSwitch HTML Client – How to gracefully handle session timeouts

Annoyed with session timeouts when using Forms Authentication?

Check out this quick, easy fix that will gracefully handle this situation and send them back to the login page.

No doubt that you’ll add this to every one of your forms authentication application, LightSwitch or not.

Click here to go to our tutorial.

LightSwitch HTML Client – Create your own Starter Kits!

As you have quickly found, Visual Studio does not provide a means to create templates from your LightSwitch HTML solutions.  Which means we are always having to create our new projects from scratch or from another where we have to keep the naming and clutter.

Not anymore!

While its a hack, it should be a hack that you’ll get a lot of use out of.  Here is what it does:

  • Copies the source solution to a new folder
  • Deletes all unnecessary files and folders
  • Renames all relevant files and folders
  • Updates all name references in all files
  • Changes the name of the Client if told
  • Changes the IIS Port if told

What you get out of it, is a clean solution based on the original.

Continue over at our tutorial site:  Create your own Starter Kits

LightSwitch HTML Client – The lsWire Core Project

Our new lsWire Core project will be the basis for all of our tutorials going forward.

Its based on the lsWires framework and is our first tutorial being hosted on our new site, http://lightswitch.codewriting.tips

This is also our first tutorial that we’re providing a “Starter Kit” so that you can not only quickly get going, but that you can create as many new solutions from this core project as needed.

This little item alone will, hopefully, dramatically change the landscape of the LightSwitch ecosystem. By allowing developers to provide their own starter kits from their own amazing solutions.  Especially since Visual Studio has not provided a means for creating templates from LightSwitch Applications.

Click here for a direct link to the tutorial.

Tagged , ,

New Site for my LightSwitch Tutorials and Tips…

We’re moving all our tutorials over to:

http://lightswitch.codewriting.tips

Few things to note about this new platform…

  • Its a LightSwitch application
  • Uses the lsWires framework
  • Allows anonymous visitors
  • Not hosted on Azure… meaning its FAST
  • Ability to change themes on the fly
  • Guests can sign up for Alerts
  • … and a ton of other internal features

LightSwitch 2013 HTML Client – Easily add Multi Item Selection to your Lists and Tables!

Enhancing your LightSwitch List, Tiles and Table controls – Updated!

We have refactored from the earlier build… so please review the new steps!

TableWithPersist
CustomersLimit4

As of May 2014, Out of the Box LightSwitch list, tiles and table controls only allow for selection of a single item.

Until now!

The demo/test drive has been updated showing the new upcoming functionality check it out: MultiSelect Preview

So… we’re like squirrels here, constantly distracted. And so with that said, we’ve nailed down our long term name for the library. Going forward we’ll be branding as LightSwitch Wires, or lsWires for short. Since in reality that’s kind of what we all do. We add the wiring to LightSwitch to make things work or work better. And this naming convention works for our other disciplines like Kendo UI and Syncfusion. We’ll keep the “Wires” branding and just swap out the prefix for the type of wires we’re providing. Thanks for your patience, this is the LAST breaking change.

Now on with it… Within the lsWires library we've provided the functionality to enhance the list and table controls

  • Selection of multiple items
  • Ability to limit the number of selections
  • Select/Unselect all items
  • Get the selected item count
  • Retrieve the data of the selected items
  • Persist selections for the session
  • We no longer take over the ItemTap
  • Multiple lists can be on the same screen
  • Same code base works across all 3 control types

Sounds awesome eh? So lets get started on how to implement this new functionality…

  1. Create a new LightSwitch 2013 HTML Application
  2. Lets name it: itgLsMultiSelect
  3. When at the Start with data screen, click on Attach to external…
  4. Data Source Type: OData Service
  5. OData service endpoint:
    http://services.odata.org/northwind/northwind.svc/
  6. Authentication type: None
  7. Choose the following entities:
    Customer
    Employee
    Product
  8. Name the data source: Northwind
  9. Click the finish button
  10. Close any open editor windows
  11. Save your solution
  12. Over in your your Solution Explorer pain
  13. Add the following NuGet package to the HTML Client project
    lo-dash.js
  14. From our GitHub repository
    Add lsWires.js to your Scripts folder
    Add lsWires.css to your Content folder
  15. Now open up your default.htm file in the client project
  16. Add lo-dash.js followed by lsWires.js to the scripts section
  17. Add the lsWires.css as the last stylesheet
  18. Right click on the Screens folder, select Add Screen…
  19. Select Browse Data Screen
  20. Screen Data: Northwind.Customers
  21. Click ok
  22. Save your solution, run the application
  23. Go ahead and click on items, notice single selection
  24. Stop your application
  25. Click on the Tile List, Customers
  26. Click on Edit PostRender Code in the properties window
  27. To get intellisense, drag from solution explorer the file lsWires.js onto your page
  28. Now we only need ONE line of code to enable multi-select
    // Enable multi-item selection on this tile control
    lsWire.list.enableMultiSelect(contentItem);
    
  29. Before you can run, remove the default ItemTap that LightSwitch automatically adds for the list. We did not create the view screen that the ItemTap is expecting so you’ll get an error when selecting if you don’t.
  30. Save your solution, run your app
  31. BOOM! Multi-Select enabled!
  32. You can also unselect by clicking a selected item
  33. Hmmmm… how do I get the data of the selected items?
  34. Stop your application
  35. Under the Customer List Tab, add a new Group
  36. Move it right under the Command Bar
  37. Change the type to be a Columns Layout
  38. Then add 3 more Rows Layout under the columns layout
  39. For all 3 change the width setting to Fit to Content
  40. Add a new Button into the first rows layout
  41. Select Write my own method, name it: GetSelected
  42. Double click the button to edit the code
  43. We're going to add a few lines
    Get the list contentItem
    Call our method to get the data, which returns an array of entities
    Then we'll display the data
    var list = screen.findContentItem("Customers");
    var count = lsWire.list.selectedCount(list);
    var selected = lsWire.list.selected(list);
    var text = "Customers Selected\n\n";
    _.forEach(selected, function(item) {
          text += item.CustomerID + " - " + item.CompanyName + "\n";
    });
    text += "\n\nCount = " + count;
    window.alert(text);
    
  44. Save and run your application
  45. Select a few items, click on Get Selected
  46. Unselect a few, Get Selected, only selected get returned
  47. Ok lets continue going thru adding functionality
  48. Add two local properties, boolean
  49. Name them SelectAll and SetLimits
  50. Drag the SelectAll under the second Rows Layout
  51. Change the control type to be of a Custom Control
  52. Over in the properties window, set the label position to None
  53. Then click on Edit Render Code and add the following
    	// Render a checkbox
    	lsWire.checkbox.render(element, contentItem);
    
    	// When the checkbox changes state, either select all or not
    	contentItem.dataBind("screen.SelectAll", function (newValue) {
    		if (newValue != undefined) {
    			var list = contentItem.screen.findContentItem("Customers");
    			lsWire.list.selectAll(list, newValue);
    		}
    	});
    
  54. Now drag the SetLimits property under your 3rd Rows Layout
  55. Change the control type to be of a Custom Control
  56. Change its Display Name to: Limit of 4
  57. Change the label position to None
  58. Then click on Edit Render Code and add the following for this one, its a bit more lengthy as we’re adding in some cool features
    	// Render our checkbox
    	lsWire.checkbox.render(element, contentItem);
    
    	// When the checkbox changes state, set or remove our limits
    	contentItem.dataBind("screen.SetLimits", function (newValue) {
    		
    		if (newValue !== undefined) {
    
    			// Our dependent item
    			var selectAll = contentItem.screen.findContentItem("SelectAll");
    
    			// Get our list
    			var list = contentItem.screen.findContentItem("Customers");
    
    			// Current count of selected items
    			var count = lsWire.list.selectedCount(list);
    
    			// If the checkbox is selected, limit to 4 items
    			if (newValue != undefined && newValue === true) {
    
    				// Set our limit, returns the limit count
    				var ttl = lsWire.list.totalSelectionsAllowed(list, 4);
    
    				// if select all was set, checked
    				if (selectAll.value === true)
    
    					// set the property to false, dataBinding will do the rest
    					contentItem.screen.SelectAll = false;
    
    				// Else is the current count greater than our limit?
    				else if (count > ttl) {
    
    					// Count is greater, so unselect all items
    					lsWire.list.selectAll(list, false);
    				}
    
    				// Since we are limiting, disable the select all checkbox
    				selectAll.isEnabled = false;
    			} else {
    
    				// Limit was unselected, renable select all and remove limits
    				selectAll.isEnabled = true;
    				lsWire.list.totalSelectionsAllowed(list, null);
    			}
    		}
    	});
    
    
  59. Its that easy!
  60. Save and run your application
  61. Toggle your limits
  62. Select your 4 items, try and select a 5th
  63. No can do! Now unselect a selected and select another
  64. Notice the Select All is no longer a valid option
  65. Uncheck the Limit of 4
  66. Test again, notice the limitations were removed
  67. So what happens if this was a list vs a Tile List?
  68. Stop your application
  69. In the screen designer, change the control type to List
  70. Run your app, test the functionality
  71. As you see, same code, different control type, same results!
  72. Now you ask… table too?
  73. Yep! Go ahead and change it to a table control
  74. Run and test the app
  75. Same code, works as expected on all 3 controls!

So there you go… an easy, reproduceable method of enabling multi-select on your LightSwitch list controls. You can even have multiple lists on the same screen, each will behave independently. We'll leave that up to you to go play around and test. Our sample project already has a multi-list screen if you want to go check it out.

We’ve added functionality to persist selections for a session. Its also a key part for a table control if you are going to allow your clients to change the sort order by clicking on the columns. You’ll set the control to persistSelections and it won’t be a problem. Check out the sample project for the code, its quite simple. Also check out the live preview on how it works.

Obviously if you are using an ItemTap to get to an edit/view screen, you would not implement this, but you could, since we no longer take that over and we do allow for persistent selections. But for most, selection and batch processing, this is the ticket.

One final note regarding the Select All functionality. We are selecting and working with rendered items. So with virtual scrolling, not all items from a query have been returned and rendered. Which means if you do a Select All, scroll and more data comes down, the new data is not selected. Of course one could go and press the Select All button again, or you could do a dataBind and fire off another Select All. But I don't see many instances of where that is appropriate. But you could.

Enjoy! More to come…

LS2013 – Easily add Checkboxes to your project!

This quick tutorial will show you how to turn a LightSwitch boolean property into a checkbox.

  • Cross browser
  • No text checkbox
  • Custom CSS for checked/unchecked
  • Still use the power of LightSwitch dataBind
  • Aligns with existing LightSwitch controls
  • … its free…

Checkboxes

You can download the code and sample project from our repository at GitHub.
You’ll find the Stylesheet and JavaScript for this tutorial in the Assets folder..

Project Setup

  1. Create a new Visual Studio LightSwitch HTML Client
  2. Create a new Table named Test with the following properties
    • Boolean1, Boolean, not required
    • Boolean2, Boolean, not required
    • Boolean3, Boolean, not required
    • Boolean4, Boolean, not required
  3. Create the associated Browse/Add/Edit screens for your table
  4. Save and build your solution
  5. Run your app, add some records
  6. Close the app, return to Visual Studio
  7. Right click on the HTML Client project Content folder
  8. Add existing item, navigate to the Assets folder and add itgLsCheckbox.css
  9. Right click on the HTML Client project Scripts folder
  10. Add existing item, navigate to the Assets folder and add itgLsCheckbox.js
  11. Add both to your default.htm in their corresponding sections
  12. Open up the Add/Edit screen
  13. Change the screen to not Show As Dialog, or not
  14. Delete everything under the Details tab
  15. Now under the Details tab create the following structure
    1. Columns Layout – Group
      1. Rows Layout – Col1, width fit to content, min width 100
        • Boolean1, change to custom control
        • Boolean2, change to custom control
        • Boolean3, change to custom control
        • Boolean4, change to custom control
      2. Rows Layout – Col2, width fit to content, min width 100
        • Boolean1, change to flip switch
        • Boolean2, change to flip switch
        • Boolean3, change to flip switch
        • Boolean4, change to flip switch
      3. Rows Layout – Col3, width min of 100, max width 200
        • Boolean1, change to text box
        • Boolean2, change to text box
        • Boolean3, change to text box
        • Boolean4, change to text box
  16. Save and build your solution

Edit Custom Controls

  1. In the Properties tab for each of the controls in Rows Layout – Col1
    • Boolean1, Description: Hello World!
    • Boolean2, Description: My favorite color is blue
    • Boolean3, Description: I like water
    • Boolean4, Description: Leave blank
  2. Again for each of the controls in Rows Layout – Col1
  3. In the Properties tab, click on the Edit Render Code
  4. Once you’ve done all 4, go into the associated JavaScript code behind file
  5. For each of the render methods, add the following code
    itgLs.ui.checkbox.render(element, contentItem);
    

  6. Save and build your solution
  7. Run your application
  8. Navigate to your add/edit screen
  9. You should see a column with checkboxes, one with flip switches, and one with textboxes
  10. Start clicking around, you’ll notice they all get updated no matter where the data changes
  11. Notice how you can have the top label and text as different and showing at the same time
  12. Now for each custom control go change the Label Position property to “none”
  13. Go rerun your app
  14. Hmmm… notice number 4 has text. Here is the order of how we get the text for a control
    • Text property passed in the options object of the function (overrides all)
    • Description field of the control properties
    • Display Name field of the control properties (only if the Label Position is set to None)

Adding Custom CSS

  1. Open up the file: user-customization.css
  2. Add the following to the end of the file
  3. /* These are used for testing our checkboxes */
    .red-small-bold {
        color: red;
        font-size: 10px !important;
        font-weight: bold;
    }
    
    .green-bold {
        color: green;
        font-weight: bold;
    }
    
    .blue-bold {
        color: blue;
        font-weight: bold;
    }
    
  4. Save the file

Customizing Boolean1

  1. Open up your JavaScript code behind file for your Add/Edit screen
  2. We are going to customize the rendering of Boolean1
  3. The following properties can be passed as options to the render method
    • text – Text to display to the right of the checkbox itself
    • checkedCssClassForText – A CSS class to be used on the text when the box is checked
    • uncheckedCssClassForText – A CSS class to be used on the text when the box is unchecked
    • onChange – function to run when the checkbox is clicked and changed
  4. There are no dependencies between options. You can pass all, a single, or none.
  5. Lets make Boolean1 do some fancy stuff when its checked/unchecked
  6. Change the itgLs.ui.checkbox.render function with the following code
  7. // Render our custom control as a checkbox
    itgLs.ui.checkbox.render(element, contentItem, {
        text: contentItem.value ? "This is true" : "This is False",
        checkedCssClassForText: "green-bold",
        uncheckedCssClassForText: "red-small-bold"
    });
    
  8. The code is only for the initial rendering of the control. So for example this is setting the default text to display based on the initial value of the contentItem. Which will override the Description property of the control.
  9. The CSS Classes we added will persist and be used as such until changed
  10. Now add some dataBind code for when the actual data changes, right under our render code
  11. // We will change both Text and CSS when the value changes
    contentItem.dataBind("value", function(newValue) {
    
    	// Make sure the view (html) has been rendered before we try to modify it
    	if (contentItem._view.isRendered) {
    
    		// Create new text for displaying, if desired
    		var txt = newValue ? "This is True" : "This is False";
    
    
    		// Call our helper function to set the text
    		itgLs.ui.checkbox.setText(contentItem, txt);
    
    	}
    });
    
  12. Pretty explanatory with the comments so I won’t repeat here
  13. Save, build and run your solution
  14. Click on the checkbox, click on the flip switch, change the textbox value to 1 or 0 or true or false
  15. Notice how not only the text changes, but also the CSS kicks in.

Customizing Boolean2

  1. Open up your JavaScript code behind file for your Add/Edit screen
  2. We are going to customize the rendering of Boolean2
  3. Remember, the following properties can be passed as options to the render method
    • text – Text to display to the right of the checkbox itself
    • checkedCssClassForText – A CSS class to be used on the text when the box is checked
    • uncheckedCssClassForText – A CSS class to be used on the text when the box is unchecked
    • onChange – function to run when the checkbox is clicked and changed
  4. And remember, there are no dependencies between options. Pass all, a single, or none.
  5. Change the itgLs.ui.checkbox.render function with the following code
  6. // Render our custom control as a checkbox
    itgLs.ui.checkbox.render(element, contentItem, {
        text: contentItem.value ? "My favorite color is green" : "My favorite color is blue",
        checkedCssClassForText: "green-bold",
        uncheckedCssClassForText: "blue-bold"
    });
    
  7. The code is only for the initial rendering of the control. So for example this is setting the default text to display based on the initial value of the contentItem. This will override the Description property of the control.
  8. The CSS Classes we added will persist and be used as such until changed
  9. Now add some dataBind code for when the actual data changes
  10. // We will change both Text and CSS when the value changes
    contentItem.dataBind("value", function(newValue) {
    
    	// Make sure the view (html) has been rendered before we try to modify it
    	if (contentItem._view.isRendered) {
    
    		// Create new text for displaying, if desired
    		var txt = newValue ? "My favorite color is green" : "My favorite color is blue";
    
    		// Call our helper function to set the text
    		itgLs.ui.checkbox.setText(contentItem, txt);
    
    	}
    });
    
  11. Pretty explanatory with the comments so, again, I won’t repeat here
  12. Save, build and run your solution
  13. Click on the checkbox, click on the flip switch, change the textbox value to 1 or 0 or true or false
  14. Notice the new changes when clicked!

Customizing Boolean3

Ha! We are going to do nothing more with Boolean3.
This will demonstrate how you can easily render a simple checkbox.

Customizing Boolean4

  1. Open up your JavaScript code behind file for your Add/Edit screen
  2. We are going to customize the rendering of Boolean4
  3. Change the itgLs.ui.checkbox.render function with the following code
  4. // Render our custom control as a checkbox
    itgLs.ui.checkbox.render(element, contentItem, {
        text: ""
    });
    
  5. This simple code will create a checkbox with no labels. Remember the passed text property overrides all
  6. Save, build and run your solution
  7. Click on the checkbox, click on the flip switch, change the textbox value to 1 or 0 or true or false

Final Thoughts

  1. You can also have a no label checkbox without passing an empty text property by the following method
    • No text in the controls Description property
    • A single space for the Display Name property for the control
  2. Notice resizing the browser works as expected
  3. Remove the other labels from the other controls, notice alignment is as expected
  4. Works as expected on IE and Chrome
  5. Has not been tested yet on IOS
  6. There is additional functionality for updating the text and CSS
  7. Uh… its been tested heavily, but there is no bug free! :)
    • setText(contentItem, text, classToAdd, classToRemove)
    • addCssClassForText(contentItem, cssClass)
    • removeCssClassForText(contentItem, cssClass)
    • initializeCss(element, css)

Based on the work of the following folks, many thanks go out to them, please frequent their blogs:

Jewel Lambert and Mike Droney

Follow

Get every new post delivered to your Inbox.

Join 194 other followers