LightSwitch Integration

[Stefano Bottaro]

Hi to all,

I'm integrating your NavigationDrawer in my Main menù of an HTML5 LightSwitch application.

How can I to call my internal page from Drawer? below a piece of code:

i've create a js function

function createMenu() {

     $("#home").show();

        $("#navpane").ejNavigationDrawer({ type: "overlay", direction: "left", enableListView: true, listViewSettings: { width: 200, mouseDown: 'slideMenuClick' }, position: "fixed" });

        function slideMenuClick(e) {

            $("#navpane").ejNavigationDrawer("close");

            $("#container .subpage").hide();

            $("#" + e.text.toLowerCase()).show();

            $(".e-header h2").text(e.text);

        }

        $("#butdrawer").click(function () {

            $("#navpane").ejNavigationDrawer("open");

        });   

};

in my default page I have....

...........................

  <!--Navigation Drawer Control-->

                        <div id="navpane">

                            <ul>

                                <li data-ej-imageurl="Content/Images/00House.png" data-ej-text="Home"

                                    id="navhome"></li>

                                <li data-ej-imageurl="Content/Images/01People.png" data-ej-text="Clienti"

                                    id="navpeople"></li>

                                <li data-ej-imageurl="Content/Images/02Project.png" data-ej-text="Prodotti"

                                    id="navprofile"></li>

                                <li data-ej-imageurl="Content/Images/08Clock.png" data-ej-text="Appuntamenti"

                                    id="navphotos"></li>

                                <li data-ej-imageurl="Content/Images/12Resources.png" data-ej-text="Risorse"

                                    id="navcommunities"></li>

                                <li data-ej-imageurl="Content/Images/05Graph.png" data-ej-text="Statistiche"

                                    id="navlocation"></li>

                                <li data-ej-imageurl="Content/Images/06Configuration.png" data-ej-text="Configurazione"

                                    id="navconfig"></li>

                            </ul>

                        </div>

...............................

tks in advance

[Arun Kumar S]

Hi Stefano,

Thanks for your interest in Syncfusion products.

Please follow the steps described in the below link to achieve your requirement.

UG Link: http://help.syncfusion.com/ug/js/default.htm#!documents/createyourfirstnavig.htm

We have created a simple sample for the same and attached in the link below.

Sample Link: NavigationDrawer.zip

Please check this and let us know if you need any further assistance.

 
Regards,
Arun Kumar S

[Stefano Bottaro]

Tks Arun,

now i need to call  my internal page...... something about:

http://localhost:50512/HTMLClient/#/BrowseCustomers/[e15999] .....this url is dinamicaly composed by framework html5 Lightswitch

can you help me ?

[Arun Kumar S]

Hi Stefano,

Thanks for the update.

Yes, We can navigate to the internal page by using ajax. You could find the below steps to achieve your scenario.

First, we have to create an internal pages from which we are going to get the content while clicking the items in the drawer. Once, we have done with creating pages we can render navigation drawer with mousedown event to handle the ajax post as in below the code snippets below.

[default.html]

<div class="navi">

        <div id="target" class="icon-target">

            Drawer

        </div>

    </div>

    <div id="navpane">

        <ul>

            <li data-ej-imageclass="icon-home" data-ej-text="Home"></li>

            <li data-ej-imageclass="icon-profile" data-ej-text="Profile"></li>

            <li data-ej-imageclass="icon-photo" data-ej-text="Photos"></li>

            <li data-ej-imageclass="icon-locations" data-ej-text="Location"></li>

        </ul>

    </div>

    <!-- Default Page Content-->

    <div id="render">

        This page displays the content of the item in drawer on click.

    </div>

    <script type="text/javascript">

        $(function () {

            $("#navpane").ejNavigationDrawer({ enableListView: true, targetId: "target", listViewSettings: { mouseDown: 'slideMenuClick', persistSelection: true } });

        });

   </script>

Now, we have to handle $.ajax() function to load the internal page content to the current page. Please find the below code snippets.

[script]

function slideMenuClick(args) {

            $.ajax({

                url: "ajaxpages/" + args.text + ".html", //To get internal page url

                type: "POST",

                success: function (e, status, response) {

                    //Success handler of content loading while list click happens

                    $('#render').html(response.responseText);

                    $('#target').html(args.text);//To change the header based on the internal page content

                    $("#navpane").ejNavigationDrawer("close");

                },

                error: function (error) {

                    alert("error");

                }

            })

        }

For your convenience, We have created a simple sample and attached it in the below link.

Sample Link: Sample.zip

Please check this and let us know if you need further assistance.
 
Regards,
Arun Kumar S

[Stefano Bottaro]

Tks for your assistence, I 've modified the  slideMenuClick function .
Below the row updated for Lightswitch implementation

function slideMenuClick(args) {
    switch (args.text) {
        case "Home":
            scr = "DashBoard";                                //the  Lightswitch screen neme
            break;
      ...................
    };   
    msls.application.showScreen(scr, null, null);    // this row is most important ............. compose the url in LS format
    $("#navpane").ejNavigationDrawer("close");
}

thank to all for the great work
I'll come back alive with new requests for clarification on the other components that I'm testing :-)
have you a god day

[Arun Kumar S]

Hi Stefano,

Thanks for the update. We will wait to hear from you.
 
Regards,
Arun Kumar S