Content Comparison

...

1. Add a new JavaScript file to the project under the Scripts folder, named config.js.
2. Add the following code to the file, which includes the various options you can configure (and some example values):

window.genie = window.genie || {};

...

genie.config =

...

                appendColonToLabels: false,

                appSite: 'MySite',

                authenticationMode: 'Alternate',

                backButton: false,

                formmappingFormat: '[p]',

                homePage: 'Home',

                implementationId: '',

                keepActivitiesOpenForSession: true,

                loginPage: 'Login',

                maintenancePage: 'Maintenance',

                messageBundlePath: 'assets/',

                onMaintenance: false,

                showAllMessages: false,

                timeFormat: 12,

...

 {
                appendColonToLabels: false,
                appSite: 'MySite',
                authenticationMode: 'Alternate',
                backButton: false,
                formmappingFormat: '[p]',
                homePage: 'Home',
                implementationId: '',
                keepActivitiesOpenForSession: true,
                loginPage: 'Login',
                maintenancePage: 'Maintenance',
                messageBundlePath: 'assets/',
                onMaintenance: false,
                showAllMessages: false,
                timeFormat: 12,
                urlBlobs: 'http://xxx.com/downloads/blobs/',

...

                urlPrefix: 'https://localhost/GenieService/GenieService.svc/restishssl/',

...

                urlProxy: '/ESAProxy.ashx',

...

                useBundle: true,

...

                useBundle: true,
                xmlNamespace: 'http://www.saasplications.com/GenieService'

...

};

1. Replace the values of the options marked in bold with the correct values for the server application that you are connecting to. Be sure to point the urlPrefix to the restishssl binding on the ESA web service.
2. Add a script reference pointing to this new config.js file, along with the other references that you added to the _Layout.cshtml file (it should be before all the Genie JavaScript SDK references):

<script type="text/javascript" src="~/Scripts/config.js"></script>

Creating the Form Mapping File

...

1. Add a new XML file to your project, named FormMapping.xml.
2. Add the following XML to the file. Note that you will need to replace the attribute values in square brackets with an activity name and style that will map to an existing activity/style combination in your server application.

<activities>

...

  <activity form="Home" default="true"/>

...

  <activity form="DataEntry" name="[activityname]" style="[activitystyle]" />

...

  <activity form="SummaryList" name="[activityname]" style="[activitystyle]" />

...

</activities>

As you add new pages to your application, you will need to ensure that you add a corresponding activity element for it in this file.

...

1. Open the Login.cshtml view that you created earlier under the Views folder.
2. Add the following HTML to the bottom of the existing HTML in the view:

<div bind="login"

...

    <div id="username">

        <label>User Name:</label>

        <input />

    </div>

    <div id="password">                                                        

        <label>Password:</label>

        <input type="password" />

    </div>

    <div>

...

>                                                               
    <div id="username">
        <label>User Name:</label>
        <input />
    </div>
    <div id="password">                                                        
        <label>Password:</label>
        <input type="password" />
    </div>
                               
    <div>
        <button type='submit'>Log In</button>

...

    </div>

...

...

   
    <div bind="messages"></div>

...

</div>

1. Now run your project. Enter a random user name and password into the fields, and click the Log In button. A message should appear below the login form, indicating that access was denied.
2. Now try entering a valid user name and password combination to access your server application, and click the Log In button. The server should validate the credentials, and the browser will navigate to the Home page (because it has the default="true" attribute assigned to its corresponding activity element in the form mapping file).

...

1. Open the _Layout.cshtml view, and add the following HTML directly after the opening body tag:

<div id='menuMainContainer'>

...

    <ul id='menuContainer' bind='menu'></ul>

...

</div>

1. Now run your project. After you log in, you should see a set of bullet point hyperlinks at the top of the page. The menu is rendered as an unordered list, which you can style to suit your needs. Note how the hyperlinks point to the pages we defined earlier, allowing you to navigate through the application.

...

1. Open the SummaryList.cshtml view that we previously created.
2. The first thing we need to do is to define an activity container. This will be a div that has attributes that the SDK will look for.  Add the following HTML to the end of the view:

<div bind="activity" activityname="[activityname]" activitystyle=" [activitystyle] ">

...

</div>

1. Replace the attribute values in square brackets with the values corresponding to an activity in your server application.
2. Now that we have an activity container, you can add a “data control” to it. This is a table which has the bind="data" attribute on it, like so:

...