For other posts in this series, see our series list.

Recently I saw a question about how you can pass data between screens, which is something we do a lot of in our system – so I thought I would share details on how we do it. There is a number of ways to do this, so we will start this series with a simple way of passing a string.

As with each part of this series, the code can be found on GitHub.

Example 1: Passing a string

1. For the first example what we will do is pass a hard coded string from a button on screen to a second screen. We start off by adding a button (called Pop) to a screen.

2. We then create a screen for it, in our example the screen is called Weasel.

3. On the new screen we add a custom control and set the data to be Screen.

4. The core of this method is first to add a new data item. For this example we will specify it as follows

• Screen Member Type: Local Property
• Type: String
• Is Required: True
• Name: data

5. After you click OK, click on the data item in the right hand side and go to the properties and tick the check box: Is Parameter

6. For the execute event for the Pop button we add the following code: myapp.showWeasel(“pop goes the weasel”);

We are using the out of the box JavaScript here to launch the code, but if you have never done this before let us look into what that simple line has:

• myapp: This is the namespace for our app. This is the same in every LightSwitch app.
• showWeasel: This is the method to launch the window. LightSwitch uses the pattern of show followed by the screen name.
• “pop…”: This is the data we want to pass across. We get this property on the method as we created the data item above and set it to be a parameter.

7. Finally we just need to show the string on the Weasel screen. To do that we need to add two events – first we will add the created event for the screen. The code we add here is to first put a variable outside the event (named d) and then in the event we add the following: d = screen.data;

In short, when the screen is created, we read the data property from the screen and set a global variable d to be that result.

8. Secondly, we select the custom control we added in step 3 and edit its render code.

In the render code we just set element.innerText = d;

This just renders the string, it isn’t important for passing the data other than to show what we got.

9. The final code will look like the following. One note, in the example below, it says screen.myData – but that should be screen.data as out data item is named data.

And that’s it! That is how to pass a simple string.