Incident manager: A cloud business add-in tutorial

By using the Cloud Business Add-in template in Visual Studio, you can create a SharePoint hosted in which mobile users can view, add, and update data from remote locations by using modern, touch-oriented devices such as phones and tablets. In this tutorial, you'll create an add-in for a fictional Contoso Fire Department to handle on-scene incident management. The walkthrough covers the core concepts of building a Cloud Business Add-in as well as more advanced concepts such as integrating SharePoint lists and document libraries.

You can download the Incident Management sample application and associated files from the MSDN Samples Gallery: Incident Manager: A Cloud Business Add-in Tutorial.

Note The name "apps for SharePoint" is changing to "SharePoint Add-ins". During the transition, the documentation and the UI of some SharePoint products and Visual Studio tools might still use the term "apps for SharePoint". For details, see New name for apps for Office and SharePoint.

Prerequisites

This walkthrough requires Visual Studio 2013 Update 1 and Microsoft Developer Tools for Visual Studio 2013 - March 2014 Update.

To host the add-in, you'll also need a SharePoint Developer site on Office 365, which you can get from the Sign up for an Office 365 Developer Site.

Note You can also host a Cloud Business Add-in on a SharePoint site.

Create the Incident Management Application

The Contoso Fire Department responds to fires, medical aid emergencies, motor vehicle accidents and other emergencies. Each emergency incident requires considerable paperwork to document the incident. They currently enter information using paper forms on-scene, and then enter the information into their computer system when they return to the firehouse. They have recently adopted SharePoint for Office 365 for records management, and they have purchased tablets to enable the Incident Commander to enter data on-scene.

You will build the mobile add-in that will be used to enter basic information about the incident. Since many incidents also involve medical aid, the add-in will also need to be able to enter data for multiple patients per incident. In this section you will build the basic application, learning the fundamentals of Cloud Business Add-ins along the way.

To create a project

  1. On the menu bar, choose File, New, Project.

    The New Project dialog box opens.

  2. In the list of templates, expand the Visual Basic or Visual C# node, expand the Office/SharePoint node, choose the Add-ins node, and then choose the Cloud Business Add-in template, as shown in Figure 1.

    Figure 1. Cloud Business Add-in template

Cloud Business App template

  1. In the Name text box, enterIncidentManager, and then choose the OK button.

    The New Cloud Business Add-in wizard opens.

  2. In the New Cloud Business Add-in wizard, enter the URL for your Office 365 Developer site, and then choose the Finish button.

    The URL should take the form https:// MySite.sharepoint.com/sites/Developer/.

    A IncidentManager solution is added to Solution Explorer with four projects: a top-level IncidentManager project, a IncidentManager.HTMLClient project, a IncidentManager.Server project, and a IncidentManager.SharePoint project.

In the next step, you'll add an entity to represent a collection of incidents. The entity creates a SQL Server database table that is intrinsic to the add-in. It will store information about each incident.

To add the Incident entity

  1. On the Start screen, choose the Create New Table hyperlink.

    The entity designer opens.

  2. In the Properties window, in the text box for the Name property, enterIncident.

  3. In the entity designer, choose the link and enterIncidentNumber.

  4. Choose the Enter key, accepting the default Type, String, and leaving the Required checkbox selected.

  5. In the Properties window, select the Include in Unique Index check box.

    The incident number must be unique for each incident.

  6. Choose the link and enterIncidentDate, and then choose the Tab key.

  7. In the Type column, choose Date, and then choose the Tab key twice.

  8. In the Name column enterDispatchTime, and in the Type column choose the DateTime data type.

  9. In the next row enter IncidentType and choose Integer as the data type.

  10. In the next row enter IncidentAddress and choose String as the data type.

  11. In the next row enter ReportingPartyName and choose String as the data type, and then clear the Required check box.

    Sometimes incidents are reported anonymously, so you don't want to require a value in this field.

  12. In the next row enter ReportingPhone and choose the PhoneNumber data type.

    Phone Number is acustom business type that automatically formats and provides validation for telephone numbers.

  13. In the Properties window, choose the Phone Number Formats hyperlink.

    The Phone Number Formats dialog box opens.

  14. In the Phone Number Formats dialog box, choose the appropriate format for your locale, and then choose the Move Up button to move it to the top of the list.

  15. In the Test Phone Number Validation text box, enter a phone number and verify that it's properly formatted, and then choose the Save button.

    The Phone Number business type handles formatting and validation for you on any screen where it appears.

  16. In the next row enter IncidentCommander and choose the Person data type.

    The Person business type provides a connection to the SharePoint User Profile Service, which pulls user information from Active Directory.

    Figure 2 shows the finished entity.

**Figure 2. The Incidents entity**

The Incident entity

In the next step, you'll add a choice list that allows the user to choose from a fixed set of values. In this case, the fire department has a set of common incident types.

To add a list of choices

  1. In the entity designer, choose the IncidentType field, and then in the Properties window choose the Choice List hyperlink.

    The Choice List dialog box opens.

  2. In the Choice List dialog box, choose the Add Value link and enter1.

  3. In the Display Name column, enter Fire - Commercial.

  4. Enter the following values and display names, and then choose the OK button.

Value Display Name
2 Fire - Residential
3 Fire - Single Engine Response
4 Aid - Advanced Life Support
5 Aid - Basic Life Support
6 Motor Vehicle Collision
7 Service Call

At run time, a list of the display names will be presented to the user. When they make a choice, the corresponding Integer value will be stored in the database.

In the next step, you'll add a Patient entity. Many of the fire department's incidents involve medical aid, and a single incident often involves multiple patients.

To add the Patient entity

  1. In Solution Explorer, open the shortcut menu for the Data Sources node and choose Add Table.

  2. In the Properties window, in the text box for the Name property, enterPatient.

  3. In the entity designer, add the following fields as shown in Figure 3:

    Figure 3. The finished Patient entity

The Patient entity

In the next step, you'll define a relationship between the Incident and Patient entities. An incident can have multiple related patients.

To define a relationship

  1. In Solution Explorer, open the shortcut menu for the Incidents.lsml node and choose Open.

  2. On the toolbar, choose the Relationship button.

    The Add New Relationship dialog box appears.

  3. In the Add New Relationship dialog box, in the To column of the Name row, choose Patient.

  4. In the Multiplicity row, in the From column choose Zero or one.

  5. In the To column, choose Many, and then choose the OK button.

    Figure 4 shows the relationship.

**Figure 4. Incidents and Patients relationship**

The relationship between Incident and Patient

This creates a zero or one to many relationship between incidents and patients. An incident record doesn't have to have a patient, but every patient has to have a related incident record.





In the next step, you'll add screens to view, add, and edit both Patient and Incident records.

To add screens

  1. In Solution Explorer, open the shortcut menu for the Incidents.lsml node and choose Open.

  2. In the screen designer, on the Perspective bar, choose the HTML Client tab, and then on the toolbar choose the Screen button.

    The Add New Screen dialog box opens.

  3. In the Add New Screen dialog box, in the Select a screen template list, choose Common Screen Set.

  4. In the Screen Set Name text box, enterIncidents.

  5. In the Screen Data list, choose Incidents.

  6. Select both the Incident Details and Incident Patients check boxes, and then choose the OK button.

    Figure 5 shows the Add New Screen dialog.

**Figure 5. Add New Screen dialog**

The Incidents screen set

Browse, View Details, and Add/Edit screens are added to the HTMLClient project. The Browse screen is automatically set as the home screen for the application, and the necessary commands for launching the View and Add/Edit screens are automatically provided.
  1. On the menu bar, choose Debug, Start Debugging to run the application. If the Connect to SharePoint dialog box appears, enter your user name and password.

  2. If prompted, choose the Trust It button. The add-in will open with a blank screen. Notice that the screen title is IncidentsSet.

  3. Choose the Add button.

    The Incidents dialog box opens. Notice that while you can enter incident data, there's no provision for adding patients. You'll fix that and other design issues by customizing the screens.

In the next step, you'll customize the Browse screen.
  1. Close the Incident dialog box, and then close the browser window to return to design mode.

To customize the browse screen

  1. In Solution Explorer screen, open the shortcut menu for the BrowseIncidentsSet.lsml node and choose Open.

  2. In the Properties window, choose the Display Name property and enterIncidents.

  3. In the screen designer, choose the Rows Layout | rows node, and then expand the Add list and choose Incident Address.

  4. Choose the Dispatch Time node, and then on the toolbar choose the Delete button.

    Figure 6 shows the finished screen layout.

**Figure 6. Browse screen layout**

Browse screen layout

At run time the screen will display a tile for each incident, and each tile will display the incident number, date, and address.





In the next step, you'll customize the Add/Edit screen.

To customize the add/edit screen

  1. In Solution Explorer screen, open the shortcut menu for the AddEditIncidents.lsml node and choose Open.

  2. Choose the Incident Address, Reporting Party Name, and Reporting Phone nodes and drag them to the Rows Layout | left section, below the Incident Type node.

  3. Choose the Dispatch Time node, and in the Properties window clear the Date Picker Enabled check box.

    The date isn't needed since it will always be the same as the incident date.

  4. In the left pane of the screen designer, choose the Add Patients link, as shown in figure 7.

    Figure 7. Add Patients link

The Add Patients link

  1. In the left pane, choose the Patients node and drag it under the Incident Commander node in the center pane.

    Figure 8 shows the finished screen layout.

**Figure 8. The Add/Edit screen layout**

Add/Edit screen layout

In the next step, you'll create a screen to add patient records.

To add a Patients screen

  1. In Solution Explorer screen, open the shortcut menu for the AddEditIncidents.lsml node and choose Open.

  2. In the screen designer, under the Rows Layout | Details (Tab) node, open the shortcut menu for the Command Bar node and choose Add Button.

  3. In the Add Button dialog box, expand the showTab list and in the Patients group choose addAndEditNew, and then choose the OK button.

    The Add New Screen dialog box opens.

  4. In the Add New Screen dialog box, accept the default values and choose the OK button.

    The AddEditPatient screen opens in the screen designer.

  5. In the Properties window, choose the Display Name property and enterAdd Patient.

  6. In the screen designer, choose the Incident node and delete it.

    The Incidents field isn't needed since the patient is already associated with an incident.

    Figure 9 shows the finished screen layout.

**Figure 9. The Add/Edit screen layout**

Add/Edit screen layout

In the next step, you'll run the add-in and add some data.

To test the add-in

  1. On the menu bar, choose Debug, Start Debugging.

  2. In the running add-in, choose the Add button.

    The Incidents Popup opens, as shown in figure 10.

**Figure 10. The Incidents Popup**

The Add Incident Popup

  1. In the Incident Number text box, enter2014-1.

  2. In the Incident Date and Dispatch Time fields, use the Date Picker and Time Picker controls to select a date and time.

  3. In the Incident Type list, choose Aid - Basic Life Support.

  4. In the Incident Address text box, enter a street address in your city.

    Don't include city, state, or postal code. It's assumed that the fire department only serves one city.

  5. In the Incident Commander Person Picker control, enter the name of a user on your SharePoint site.

    Notice that as you type a list of all matching names is displayed.

  6. Choose the Add Patient button.

    The Add Patient Popup opens, as shown in Figure 11.

**Figure 11. The Add Patient Popup**

The Add Patient Popup

  1. Enter information for a patient, and then choose the Save button.

    The name of the patient that you added is displayed on the Incidents Popup. If you want, you can add more patients.

  2. On the Incidents Popup, choose the Save button.

    If you were following instructions, you will see a validation error message. The Reporting Phone field is a required field. Cloud Business Add-ins have built-in validation for required fields.

  3. Enter a phone number and then choose the Save button again.

    A tile is displayed on the home Incidents screen with the incident number, date, and address.

  4. Choose the tile to open the View screen for the incident.

    Notice that the Reporting Phone field is displayed as a hyperlink, providing direct access to your default phone application.

  5. Choose the Edit button to open the AddEditIncidents screen, and the choose the Discard button to return to the View screen.

  6. Choose the Patients tab to display a list of patients, and then choose a patient tile.

    Notice that it doesn't open a view screen for the patient. That's because you haven't created one yet.

  7. Choose the Close button in your browser to return to design mode.

In the next step, you'll add a screen to view patients.

To add a view screen

  1. In Solution Explorer screen, open the shortcut menu for the Patients.lsml node and choose Open.

  2. In the entity designer, on the Perspective bar, choose HTMLClient, and then on the toolbar choose the Screen button.

    The Add New Screen dialog box opens.

  3. In the Add New Screen dialog box, in the Select a screen template list, choose View Details Screen.

  4. In the Screen Name text box, enter ViewPatient, choose Patient in the Screen Data list, and then choose the OK button.

    The ViewPatient screen opens in the screen designer.

  5. In the screen designer, under the Rows Layout | Details (Tab) node, open the shortcut menu for the Command Bar node and choose Add Button.

  6. In the Add Button dialog box, expand the showTab list and in the Patient group choose Edit, and then choose the OK button.

  7. Run the application and verify that you can now view and edit patient records.

You have now built a fully functional incident management add-in, but there's much more you can do with Cloud Business Add-ins. In the next section, you'll learn how to utilize resources on the SharePoint site from the incident management add-in.

Integrate SharePoint Resources

The Contoso Fire Department has started using the Incident Manager add-in, and as is typical in software development projects they are now requesting a new feature. In addition to incident and patient information, they also need to manage resources such as fire apparatus and personnel. They already have lists of apparatus and personnel on their SharePoint site, so you will utilize those lists as another data source for the add-in.

The first step is to add a couple of pre-populated list templates to your developer site.

To add list templates

  1. On the menu bar, choose Debug, Start Debugging to run the add-in.

  2. In the running add-in, on the chrome bar, choose Back to site link to navigate to your SharePoint developer site, as shown in Figure 12.

    Figure 12. The Back to site link

Navigate to the SharePoint developer site

  1. On the Developer page, choose the Site Contents link.

  2. On the Site Contents page, choose the Settings link, as shown in Figure 13.

    Figure 13. The Settings link

Site Settings link

  1. On the Site Settings page, in the Web Designer Galleries list, choose the List templates link as shown in Figure 14.

    Figure 14. The List templates link

List templates list

  1. On the List Template Gallery page, choose the FILES tab, and then on the ribbon choose the Upload Document button.

  2. In the Add a template dialog box, choose the Browse button and then navigate to the Resources folder for the downloaded Incident Management sample.

  3. Choose the ContosoApparatus.stp file and choose the Open button, then choose the OK button.

  4. In the List Template Gallery dialog box, choose the Save button.

  5. Repeat the process and upload the ContosoPersonnel.stp file.

    Figure 15. The uploaded files

The Contoso templates

  1. Choose the Site Contents link, and on the Site Contents page choose the add an add-in tile.

  2. On the Site Contents > Your Add-ins page, choose the Contoso Apparatus tile.

    Note You may need to go to the second page of add-ins to find the Contoso Apparatus tile.

  3. In the Adding Custom List dialog box, choose the Name text box and enterContoso Apparatus, and then choose the Create button.

  4. Repeat the process and add the Contoso Personnel list, enteringContoso Personnel as the name.

  5. On the Site Contents page, verify that the Contoso Apparatus and Contoso Personnel lists now appear.

In the next step, you'll add your SharePoint site as a data source.

To add a SharePoint data source

  1. In Solution Explorer, open the shortcut menu for the Data Sources node and choose Add Data Source.

    The Attach Data Source Wizard opens.

  2. In the Attach Data Source Wizard, choose the SharePoint icon as shown in Figure 16, and then choose the Next button.

    Figure 16. SharePoint data source

SharePoint data source

  1. On the Enter Connection Information page, verify that the URL for your SharePoint developer site is correct, and then choose the Next button.

  2. On the Choose your SharePoint Items page, select the check boxes for the ContosoApparatus and ContosoPersonnel lists as shown in Figure 17, and then choose the Finish button.

    Figure 17. The selected lists

SharePoint lists

The entities are added to a new  **Developer Data** node under the **Data Sources** node in **Solution Explorer**, and the  **ContosoApparatus** entity opens in the entity designer.


 **Note**  You may have noticed that a  **UserInformationLists** entity was also added. This list is used by SharePoint to manage the **CreatedBy** and **ModifiedBy** fields for lists.
  1. In the Properties window, choose the Display Name property and change it toApparatus.
In the next step, you'll define a query to limit the data returned from the  **ApparatusSet** entity. In this case, you only want to see apparatus that are in service.

To define the AvailableApparatus query

  1. In Solution Explorer, open the shortcut menu for the ApparatusSet.lsml node and choose Add Query.

    The query designer opens.

  2. In the Properties window, choose the Name property and enterAvailableApparatus.

  3. In the query designer, choose the Add Filter link, and in the second drop-down list choose Available.

  4. In the last text box, change False to True.

    Figure 18 shows the query.

**Figure 18. The AvailableApparatus query**

The AvailableApparatus query

In the next step, you'll define another query for the  **ContosoPersonnel** entity. In this case, you only want to see personnel that are assigned to the "A" shift.

To define the AvailablePersonnel query

  1. In Solution Explorer, open the shortcut menu for the ContosoPersonnels.lsml node and choose Add Query.

    The query designer opens.

  2. In the Properties window, choose the Name property and enterAvailablePersonnel.

  3. In the query designer, choose the Add Filter link, and in the second drop-down list choose Shift.

  4. In the last text box, enter A.

    Figure 19 shows the query.

**Figure 19. The AvailablePersonnel query**

The Relationship dialog

In the next step, you'll add lists of available apparatus and personnel to the  **ViewIncidents** screen.

To add queries to the screen

  1. In Solution Explorer, open the shortcut menu for the ViewIncidents.lsml node and choose Open.

  2. In the screen designer, open the shortcut menu for the Tab node and choose Add Tab.

  3. In the Properties window, change the Name property toResources.

  4. In the screen designer, on the toolbar, choose Add Data Item.

    The Add Data Item dialog box opens.

  5. In the Add Data Item dialog box, choose the Query option button.

  6. In the list, choose DeveloperData.AvailableApparatus as shown in Figure 20, and then choose the OK button.

    Figure 20. The AvailableApparatus query

Add a query

The  **AvailableApparatus** collection is added to the left pane of the screen designer.
  1. Repeat the process to add the AvailablePersonnel query to the screen.

  2. Under the Rows Layout | Resources node, open the Add list and choose Available Apparatus.

  3. Choose the List | Available Apparatus node, open the List list and choose Tile List.

  4. Delete all of the items under the Rows Layout | Contoso Apparatus node except for Apparatus Number and Apparatus Type.

  5. Under the Rows Layout | Resources node, open the Add list and choose Available Personnel.

  6. Choose the List | Available Personnel node, open the List list and choose Table.

  7. Delete all of the items under the Table Row | Contoso Personnel node except for Name, Rank, and Assignment.

    Figure 21 shows the screen layout.

**Figure 21. The screen layout**

The Resources tab layout

  1. Run the add-in and observe the changes. Choose an incident, and then choose the Resources tab to see a list of available resources.
The changes are now complete. In the next section, you'll learn how add and associate a SharePoint document library with add-in.

Associate a Document Library

On the scene of an incident the Incident Commander has to document many things, some using existing forms and some ad-hoc. The documents created on-scene must be accessible later, and they Must be organized by incident for easy retrieval. For the Incident Management add-in, you can utilize the custom document library feature in SharePoint to associate documents with each incident.

To add a document library to the SharePoint site

  1. On the menu bar, choose Debug, Start Debugging to run the add-in.

  2. In the running add-in, on the chrome bar, choose Back to site link as shown in Figure 22 to navigate to your SharePoint developer site.

    Figure 22. The Back to site link

Navigate to the SharePoint developer site

  1. On the Developer page, choose the Site Contents link.

  2. On the Site Contents page, choose the add an add-in tile.

  3. On the Site Contents > Your Add-ins page, choose the Document Library tile.

  4. In the Adding Document Library dialog box, in the Name text box enterIncident Documents, and then choose the Create button.

  5. On the Site Contents page, choose the Incident Documents tile to open the library, and then choose the LIBRARY tab.

  6. On the Ribbon, choose the Create Column button.

  7. In the Create Column dialog box, in the Column name text box enterIncidentNumber, and then choose the OK button.

    Figure 23 shows the newly added column.

**Figure 23. The Incident Documents document library**

Document library with IncidentNumber column

In order to associate the document library with your add-in, the document library must contain a custom column that maps to a unique field in your entity. In this case the  **IncidentNumber** column maps to the **IncidentNumber** field in the **Incidents** entity.





In the next step, you'll add the document library to your add-in.

To add a document library to a project

  1. In Solution Explorer, open the shortcut menu for the Developer Data node and choose Update Data Source.

  2. On the Choose your SharePoint Items page, in the left pane, choose the Document Libraries list item, and in the right pane, select the IncidentDocuments checkbox as shown in Figure 24, and then choose the Finish button.

    Figure 24. The IncidentDocuments entity

Select the document library

An  **IncidentDocuments.lsml** node is added to Solution Explorer.





In the next step, you'll create a relationship between the document library and the Incidents entity..

To create a relationship across data sources

  1. In Solution Explorer, open the shortcut menu for the IncidentDocuments.lsml node and choose Open.

  2. In the entity designer, on the Perspective bar choose Server, and then on the toolbar choose Relationship.

  3. In the Add New Relationship dialog box, in the To dropdown list, choose Incident as shown in Figure 25.

    Figure 25. The Add New Relationship dialog box

The relationship between entities

  1. In the Foreign key dropdown list, choose the IncidentNumber (String) field from the IncidentDocuments entity.

  2. In the Primary key dropdown list, choose the IncidentNumber (String) field from the Incidents entity, and then choose the OK button.

    Figure 26 shows the Foreign and Primary keys.

**Figure 26. Foreign and primary keys**

The associated fields

In the next step, you'll add the document library to the  **ViewIncidents** screen.

To add a document library to a screen

  1. In Solution Explorer, open the shortcut menu for the ViewIncidents.lsml node and choose Open.

  2. In the screen designer, open the shortcut menu for the Tab node and choose Add Tab.

  3. In the Properties window, change the Name property toDocuments.

  4. In the screen designer, in the left pane, choose the Add IncidentDocuments link.

  5. In the center pane, under the Rows Layout | Documents node, open the Add list and choose Incident Documents.

  6. Under the Rows Layout | Documents node, open the shortcut menu for the Command Bar node and choose Add Button.

  7. In the Add Button dialog box, expand the showTab list and in the IncidentDocuments group choose createOrUploadDocument as shown in Figure 27, and then choose the OK button.

    Figure 27. The Add Button dialog box

Button to create or upload documents

  1. In the Properties window, choose the Display Name property and enterAdd Document.

  2. Expand the Icon property list and choose Attachment.

  3. On the menu bar, choose Debug, Start Debugging to run the add-in.

  4. Choose an incident, choose the Documents tab, and then choose the Add Document button.

    The SharePoint Create a new file dialog box opens, as shown in Figure 28.

**Figure 28. The Create a new file dialog box**

The SharePoint Create a new file dialog

  1. Choose the UPLOAD EXISTING FILE link and choose any file to upload, and then choose the Open button.

    The file is added to the Documents tab.

    Tip If you choose an Office document, you can view it in the add-in.

  2. Choose the Add Document button, and in the Create a new file dialog box, choose Word document.

    A new Word document opens in Word Online.

  3. On the title bar, choose the Document name field as shown in Figure 29 and enterIncident Report.

    Figure 29. The Document name field

The file name

This will be used as the file name for the document.


 **Note**  If you don't enter a file name, it will be saved with the default name  **Document.docx**. Once saved, the file name can only be changed by accessing it in the document library in SharePoint.
  1. Choose the back button in your browser to return to the add-in. The Incident Report document should appear on the Documents tab.

  2. Choose the Close button in your browser to return to design mode.

In the next section, you'll customize the add-in and add some JavaScript code.

Customize the Add-in

The Contoso Fire Department is pleased with the additions to the Incident Management add-in, but there are few more "fit and finish" items on their list. They want to display their logo on the screens instead of the default icon. They don't like the FlipSwitch control for Insured field on the AddEditPatient screen and want it replaced with a check box. Finally, since not all incidents have patients, they don't want the Patients tab on the ViewIncidents screen at appear if there aren't any patients.

  1. In Solution Explorer, in the IncidentManager.HtmlClient project, expand the Content and Images nodes.

  2. Choose the user-logo.png and user-splash-screen.png files as shown in Figure 30 and delete them.

    Figure 30. The files to delete

The logo and splash screen files

  1. Open the shortcut menu for the Images node, choose Add, Existing Item.

  2. In the Add Existing Item dialog box, choose the Browse button and then navigate to the Resources folder for the downloaded Incident Management sample.

  3. Choose the user-logo.png and user-splash-screen.png files, and then choose the Add button.

    The new images will be displayed on the title bar of the add-in and in the splash screen shown when the add-in is loading.

In the next step, you'll replace the  **FlipSwitch** control with a checkbox.

To replace the FlipSwitch control

  1. In Solution Explorer, open the shortcut menu for the AddEditPatient.lsml screen node and choose Open.

  2. In the screen designer, expand the list for the Insured node and choose Custom Control.

  3. In the Properties window, choose the Edit Render Code link.

  4. In the Code Editor, add the following code to the Insured_render method:

  // Create the checkbox and add it to the DOM.
    var checkbox = $("<input type='checkbox'/>")
            .css({
                height: 20,
                width: 20,
                margin: "10px"
            })
            .appendTo($(element));

    // Determine if the change was initiated by the user.
    var changingValue = false;

    checkbox.change(function () {
        changingValue = true;
        contentItem.value = checkbox[0].checked;
        changingValue = false;
    });
    contentItem.dataBind("value", function (newValue) {
        if (!changingValue) {
            checkbox[0].checked = newValue;
        }
    });
This code creates a  **CheckBox** control when the screen is rendered. You'll also need to add code to set an initial value.
  1. In Solution Explorer, open the shortcut menu for the Patients.lsml entity node and choose Open.

  2. In the entity designer, on the Perspective bar, choose the HTMLClient tab.

  3. On the toolbar, expand the Write Code list and choose created.

  4. In the Code Editor, add the following code to the created method:

  entity.Insured = new Boolean();
    entity.Insured = 'true';
This code sets the initial value of the control to checked (true) when the screen is created.





In the next step, you'll add code to hide the  **Patients** tab if no patients exist.

To conditionally hide a tab

  1. In Solution Explorer, open the shortcut menu for the ViewIncidents.lsml screen node and choose Open.

  2. On the toolbar, open the Write Code list and choose created.

  3. In the Code Editor, add the following code to the ViewIncidents_created method:

  screen.getPatients().then(function (results) {
        var queryCount = results.count;
        if (queryCount == 0 ) {
            screen.findContentItem("Patients").isVisible = false;
        }
    });
This code runs the  **GetPatients** query to get a count of **Patients**. If the result is zero, the  **findContentItem** method sets the **isVisible** property of the **Patients** tab to false, hiding it.
  1. On the menu bar, choose Debug, Start Debugging to run the add-in. Notice that the new logo appears on the screens. Open the first incident that you created earlier and edit a patient. Verify that the Insured field is now a checkbox. Add a new incident without any patients, and verify that the Patients tab is hidden on the view screen.
In the final section, you'll publish the finished add-in to SharePoint.

Publish to SharePoint

So far you've only run the add-in in Debug mode, which uses SharePoint to provide authentication and redirects to the local computer's instance of IIS Express. Next you'll publish the add-in as an auto-hosted SharePoint add-in, which will automatically provision space in Office 365 for both the add-in and an intrinsic database. Specifically, the add-in will be hosted in Microsoft Azure and the database in SQL Azure. After you publish your add-in, others can start it from SharePoint on their computers and mobile devices.

To publish the add-in

  1. On the Visual Studio toolbar, open the Debug list and choose Release.

  2. In Solution Explorer, open the shortcut menu for the IncidentManager node as shown in Figure 31, and then choose Publish.

    Figure 31. The IncidentManager node

The IncidentManager node

The  **LightSwitch Publish Application Wizard** appears.
  1. On the SharePoint options page, choose the Autohosted option button as shown in Figure 32, and then choose the Publish button.

    Figure 32. The Autohosted option

The Publish wizard

When your add-in is published,  **File Explorer** appears and displays the **Publish** folder for your project.
  1. In the browser, navigate to your SharePoint Developer site

  2. In the Add-ins in Testing list, choose the ellipsis (???) link next to IncidentManager, and then choose the Remove link, as shown in Figure 33.

    Figure 33. The Remove link

The Apps in Test list

  1. Choose the new add-in to deploy link.

  2. In the Deploy Add-in dialog box, choose the upload link, as shown in Figure 34.

    Figure 34. The upload link

The Deploy App dialog

The  **Upload Add-in** dialog box opens.
  1. In the Upload Add-in dialog box, choose the Browse button and navigate to the Publish folder for your add-in and choose the IncidentManager.SharePoint.app file, choose the Open button, and then choose the OK button.

    Once the file has been uploaded, the Deploy Add-in dialog box opens.

  2. In the Deploy Add-in dialog box, choose the Deploy button.

  3. In the Upload Add-in dialog box, choose the Trust It button.

    The add-in will be installed on your SharePoint site. The process may take a few minutes.

    Figure 35 shows the Add-ins in Testing list as the add-in is installing.

**Figure 35. The Add-ins in Testing list**

App is installing

  1. Choose the Site Contents link.

    Figure 37 shows the Site Contents list as the add-in is installing.

**Figure 37. The add-in is installing**

App is installing

  1. Once the add-in has finished installing, choose the Incident Manager tile to run the add-in.

    Figure 38 shows the Site Contents list after the add-in is installed.

**Figure 38. The add-in is installed**

The app is ready to run

The add-in opens in the browser and looks exactly the same as when you ran the add-in in Debug mode. Notice that the data you entered during development is gone. When deploying the add-in, the database is deployed but not the data.
  1. Enter some data and verify that everything works as expected.

    Figure 39 shows the add-in as displayed in a desktop browser.

**Figure 39. Tile view**

Layout in desktop browser

You can also verify your add-in on a mobile device. Sign in to your SharePoint site from the web browser on your device, and then start the add-in.

Figure 40 shows the add-in as displayed in a mobile browser.


**Figure 40. List view**

Layout on mobile device

Congratulations! You have now finished the tutorial, and you know the basics of a creating a Cloud Business Add-in. Now go and build an add-in of your own - the additional resource below should help you to go further.

Additional resources