Page 1 of 1

Javascript Grid..

PostPosted: Mon Apr 25, 2016 6:05 am
by TinTin
Hi all,

Am needing a grid for use in an app, there's not a native one, but I'm sure it's possible to use a JS grid ie:

http://js-grid.com/

I've tried to find some reference to adding JS libraries and how to reference them, I've added the .js and the .css to my main
app within project / properties and libraries and files.. how would one reference this within NAB to init ./ create / update the grid?


Thanks
AJ

Re: Javascript Grid..

PostPosted: Mon Apr 25, 2016 8:03 am
by Gaev
AJ:

how would one reference this within NAB to init ./ create / update the grid?

1) According to this page ... http://js-grid.com/getting-started/ ... you also need to include the jQuery library (see Step 2) as it depends on it.

2) You need to have a DIV element (perhaps inside a Container) with the id of "jsGrid"

3) If the Grid content is static, their code in Step 5 would be specified in the Start section of the App ... otherwise, there are several methods in the documentation that show you how to dynamically change the content values etc.

Re: Javascript Grid..

PostPosted: Mon Apr 25, 2016 8:32 am
by TinTin
Thanks Gaev, I'll give it a go.

Re: Javascript Grid..

PostPosted: Mon Apr 25, 2016 9:04 am
by TinTin
Hi Gaev,

I've added the jquery lib to NAB (in App Properties)

Created a DIV in Container referencing the ID of the Grid as suggested, I tried to just test the example 1st from step 5 (pasted into Startup within a JS block) but can't seem to get it showing in NAB, am just about to try an example within
a standalone HTML file to see if that shows their example code.

I really like the idea of using 3rd party JS libraries because I think there's a lot that can be added later on - once I get passed this bit I'll have a go at writing a plugin around it.

Cheers
AJ

Re: Javascript Grid..

PostPosted: Tue Apr 26, 2016 12:26 am
by luishp
TinTin, take theese steps to make it work:

1) Install the PowerApp plugin
2) In Project -> App Events ->Start-Up write this code (it loads the required libraries from a public CDN):

Code: Select all
slLoadJS "https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.js"
slLoadCSS "https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.css"
slLoadCSS "https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid-theme.min.css"


3) Add a container the the stage and rename it to "jsGrid" (be carefull as "id's" are case sensitive)
4) Add a Push Button to the stage.
5) Double click the button and write this code into the code editor:

Code: Select all
BeginJS
    var clients = [
        { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
        { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
        { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
        { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
    ];

    var countries = [
        { Name: "", Id: 0 },
        { Name: "United States", Id: 1 },
        { Name: "Canada", Id: 2 },
        { Name: "United Kingdom", Id: 3 }
    ];

    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        inserting: true,
        editing: true,
        sorting: true,
        paging: true,

        data: clients,

        fields: [
            { name: "Name", type: "text", width: 150, validate: "required" },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
EndJS


Test your publication :)

You don't need to add JQuery as it is already part of NAB.

Re: Javascript Grid..

PostPosted: Tue Apr 26, 2016 12:46 am
by luishp
I have uploaded the sample to our server:

http://sinlios.com/neoappbuilder/jsgrid

Source and demo:

http://sinlios.com/neoappbuilder/jsgrid.zip

Good luck!

Re: Javascript Grid..

PostPosted: Tue Apr 26, 2016 3:22 am
by farhad2008
hi,
very good
thank you very much
regards farhad

Re: Javascript Grid..

PostPosted: Tue Apr 26, 2016 1:55 pm
by TinTin
Luis,

Thanks very much - I didn't check forum today and to my surprise you have worked wonders! I'll put it to the test tomorrow.

Thanks again and for your plugins work

Cheers

Re: Javascript Grid..

PostPosted: Wed Apr 27, 2016 6:49 am
by TinTin
Luis,

Can we do something like this for the libraries rather than fetch from server?


slLoadJS "file://C:/JsGrid/jsgrid.min.js"
slLoadCSS "file://C:/JsGrid/jsgrid.min.css"
slLoadCSS "file://C:/JsGrid/jsgrid-theme.min.css"

It works on the local dev machine, but when it comes to compiled app I don't think there's a way to reference their deployed location.

Cheers

Re: Javascript Grid..

PostPosted: Wed Apr 27, 2016 11:20 am
by luishp
TinTin, if you prefer a local copy of the libraries you don't need PowerApp plugin.
Just add the files (.js and .css) in:
Project -> App properties -> Libraries/Files

That's all!

Re: Javascript Grid..

PostPosted: Wed Apr 27, 2016 12:18 pm
by TinTin
ahh that was easy, didn't realise NAB would include in the manifest.. lots of possibilities for 3rd party libraries now.


Thanks Luis

Re: Javascript Grid..

PostPosted: Wed Apr 27, 2016 12:48 pm
by TinTin
Managed to add records to the grid.. (modified for 3 columns for now/ Fruit / Description / Colour)

BeginJS
$("#jsGrid").jsGrid("insertItem", { "Fruit": "Apple", "Description": "Nice Apple", "Colour": "Green" })
EndJS

I'm wanting to update an existing record, I and got to this...

BeginJS
$("#jsGrid").jsGrid("updateItem", item, { "ID": "1", "Fruit": "Pear", "Description": "Nasty Pear", "Colour": "Brown" })
EndJS

But it's having none of it.. I would have imagined that would update row 1.. :roll:

Re: Javascript Grid..

PostPosted: Sun May 08, 2016 2:35 am
by PaulTomo
I have just been taking a look at this, very interesting.

I guess this could be used to load data direct from a database direct in to a grid of an app for editing, adding and deleting, rather than as the demo shows just producing a list that loads from a variable each time the app is run.

I can get the "sample variable data code" examples to work fine but would prefer to work with some live data that then saves as per the changes once edited, they all save for that session but are gone once you exit. I have messed around most of the day and although something happens with my own loaded data, I either get many empty lines in the grid or the exact right number of lines but again all the data fields are blank.

I just wondered if anyone has succeeded in getting any data in to the grid from a text file or maybe even from a database on a server or saved locally to load data directly in to the grid of a test app, managed to add, edit or make a change and then save these for the next time the app runs and if so, could you post some example code?

Re: Javascript Grid..

PostPosted: Sun May 08, 2016 5:30 am
by Gaev
TinTin:

According to the documentation here ... http://js-grid.com/docs/#updateitemitem ... em-promise ... there are three different formats for this method ... assuming that you meant to use ...
Code: Select all
// update specified item with particular data (row DomNode or row jQueryElement can be used instead of item reference)
$("#grid").jsGrid("updateItem", item, { ID: 1, Name: "John", Age: 25, Country: 2 })

1) what is the value of the item object/variable ?

2) the ID key is meant to have a numeric value ... so try specifying the value without the double quotes ...
Code: Select all
BeginJS
$("#jsGrid").jsGrid("updateItem", item, { "ID": 1, "Fruit": "Pear", "Description": "Nasty Pear", "Colour": "Brown" })
EndJS

Re: Javascript Grid..

PostPosted: Sun Jun 12, 2016 8:29 am
by TinTin
I've only got round to looking at this again, I also spent quite a few hours trying to get my data from variables to update the grid, and failed miserably...! I just ended up getting the spinning loading icon.

I'm going to have a look around for some other grids, I used to use nsbasic app studio which used jquery library so maybe that's an option, am quite surprised there's no grid in NAB yet!!