Signed-In Part 2 – Upcoming Events Screen (Andy Kung)

Signed-In Part 2 – Upcoming Events Screen (Andy Kung)

Rate This
  • Comments 11

In the last post, we gave an overview of the Signed-In app we are going to build. We created a LightSwitch project and set up our data. In case you missed it:

Signed-In Part 1 – Introduction

Now, we’re ready to start designing the UI.

Create the First Screen

Right click on HTMLClient node and select Add Screen.

clip_image001

In the Add New Screen dialog, choose:

  • Template: Browse Data Screen
  • Screen Name: UpcomingEvents
  • Screen Data: GroupEvents

Click OK.

clip_image003

The Screen Designer will appear. The tree on the right side is called a screen content tree. It represents the visual elements on the screen. On the left side are the data members. They are the data behind the visual elements. For example, the GroupEvents data member (on the left side) is visualized as a List control (on the screen content tree).

clip_image004

Now let’s see what we’ve got. Press F5 key to run the application. The app will launch in your default browser.
clip_image006

Obviously we don’t have any event data yet. So let’s add a dialog to create events. Return the Visual Studio by closing the browser.

Create an Add Dialog

Let’s first place a button on the screen that will be used to launch the dialog. Expand the Command Bar node and click Add.

clip_image007

In the Add Button dialog, keep Choose an existing method selected. Select addAndEditNew under GroupEvents in the method dropdown menu. This tells the system that we’d like to add a new item to the GroupEvents data member.

clip_image008

You’ll notice that there is a Navigate To dropdown menu. We will keep it as New Screen. Basically, dialogs are also screens, just visualized within a modal dialog. So it is asking us which screen to show as a dialog when the add button is clicked. Since we haven’t created a screen for the add dialog, we will let the dialog guide us in creating a new screen. Click OK.

clip_image009

The familiar Add New Screen dialog will appear. Name the screen AddEvent and click OK.

clip_image011

The newly created AddEvent screen will show in the Screen Designer.

clip_image013

Notice if you select the Screen root node, there is a Show As Dialog checkbox in the Properties window. This is what’s used to determine whether to visualize a screen as a full screen or dialog.

Now press the F5 key and run the app. Click the Add Group Event button and you will see the Add Event dialog.

clip_image014

Okay. We’re getting somewhere. But we can tweak the UI a bit. Let’s make the fields in the dialog show up in one column instead of two. Also, we can use a better icon for the Add Group Event button.

Return to Visual Studio by closing the browser.

Use Rows Layouts vs. Columns Layout

In the Add Event screen, you will see that there is a Columns Layout hosting two groups of Rows Layout, each serves as a column. Since we don’t have that many fields, we don’t really need two columns.

Select both Title and Event Time (use CTRL+Click to multi-select).

image

Drag them out of Columns Layout.

image

Repeat the same for Location, and Description.

clip_image016

Finally, delete columns node.

image

Now we have all 4 fields under one Rows Layout (which means there is only one column).

Let’s also change Description’s control from Text Box to Text Area.

clip_image018

Change Command Icon

We also want to change the icon for the add button on the home screen. Double click on UpcomingEvents screen from the Solution Explorer. Select the Add Group Event button.

clip_image019

In the Properties window, change its Display Name property to, simply, Add Event. Also, in the Icon dropdown menu, you will see a list of built-in icons for you to choose from. Select Add.

clip_image020

Now press F5 key to try the application. You will see the new Add icon.

clip_image021

The Add Event dialog now has one column.

clip_image023

Use the dialog to add several test events to the list!

clip_image025

When you’re done. Close the browser and return to Visual Studio.

Customize Screen Query

We want make sure we only show upcoming events (not all events) and have them sorted by event time.

Next to GroupEvents data member, click Edit Query.

clip_image026

The Screen Query Designer will appear. Use it to filter and sort by EventTime like the following. We are indicating that we only want to show events greater or equal to Today in Ascending order.

clip_image028

Click the Back button to go back to Screen Designer when you’re done.

clip_image029

Customize the List Row

If you look at the Group Events list, you will see there is a Group Event (singular) node under it. It represents the UI of each individual entry in the list. By default, it is using the Summary control, which simply displays the first text property of the entry. In our case, the first text property is event’s Title. That’s why you see event titles in the list.

clip_image030

Let’s customize it so it shows the date of the event as well. Change Group Event’s control from Summary to Rows Layout.

clip_image031

Delete Location and Description.

clip_image032

Select the Title node. In Properties window, change the Font Style property to Large. Similarly, change Event Time’s Font Style property to Small.

Press F5 to run the app. It now looks like this.

clip_image034

Get the hang of it? Now return to Visual Studio for another cool trick.

Use Tile List

In some scenarios, you might prefer to use a tile list to save some space. For example, each event list item has a lot of unused space to the right. Let’s try a Tile List instead.

Select Group Events node, change its control from List to Tile List.

clip_image035

Now press F5 again.

clip_image037

Mind blown yet?

What’s Next?

In this post, we created our first list screen and add dialog. We learned how to customize screen query, list, and layout.

Next time, I will show you how to create the Guest List screen.

-andy (Program Manager, LightSwitch Team)

Go to next article --> Signed-In Part 3 – Guest List Screen                    

Leave a Comment
  • Please add 6 and 6 and type the answer here:
  • Post
  • Andy,

    How do I customize the save button on the dialog to allow me to transfer to a second page for a multi-step wizard like experience?

  • I saw that I can hide the save buttons if I change the screen mode to view instead of edit, and I can show a screen from javascript, but not sure how to close the current dialog in that process or if there is a better way to approach this.

  • @Dave - This is what you can try... Instead of building multiple screens to create a multi-step wizard like experience, you can have one screen with multiple screen tabs, each representing a step. You can hide the screen tab titles (Hide Tab Titles property) and put a "Next" button to go to the next screen tab (use screen.showTab API) at each step. In the last step, you can write a "Save" button (myapp.commitChanges) which will save everything and close the dialog.

  • Hello Andy,

    I don't see the Command Bar node to create and Add Dialog, Any clue?

    Thanks in advance!

  • Hi Horving,

    You will need to install Visual Studio 2012 Update 2 CTP4 to see the latest features including the command bar. See this post on how to install and get started: blogs.msdn.com/.../getting-started-with-lightswitch-in-visual-studio-2012-update-2-ctp4.aspx

    HTH,

    -Beth

  • @Horving - Are you using the latest preview (found in Visual Studio 2012 Update 2 - CTP 4)? Also, the command bar is only available on group controls that are used as tabs.

  • Beth and Just you both nailed it!!! Thank you once again.

    Good Coding!!!

    Horving

  • Fantastic post (and the series)!!  Thanks!!  Some "guidance" on how to use the features was badly needed... :-)

  • Tried this on the iPad (IOS 6.1.3) Safari browser.  Problems when adding a new event.  The event date/time entry only gives dropdowns.  So one is unable to actually type in a "day" as it only gives a dropdown of "DD" as the only option.  Anyone have a workaround without custom controls?

  • Re the DD of adding a new event... same issue on the Windows Phone 7.

  • Two TS Tips - #1 - make sure you have Java installed or you get a error that will not tell you that you are missing it. #2 Please update the "Screen Query Designer "screen shot into included "how" to get to the "today" value. - Thanks.

Page 1 of 1 (11 items)