Source language: Translate to:

Javascript Grid..

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Javascript Grid..

Postby TinTin » Mon Apr 25, 2016 6:05 am

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
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby Gaev » Mon Apr 25, 2016 8:03 am

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.
User avatar
Gaev
 
Posts: 3716
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Javascript Grid..

Postby TinTin » Mon Apr 25, 2016 8:32 am

Thanks Gaev, I'll give it a go.
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby TinTin » Mon Apr 25, 2016 9:04 am

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
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby luishp » Tue Apr 26, 2016 12:26 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 357
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Javascript Grid..

Postby luishp » Tue Apr 26, 2016 12:46 am

I have uploaded the sample to our server:

http://sinlios.com/neoappbuilder/jsgrid

Source and demo:

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

Good luck!
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 357
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Javascript Grid..

Postby farhad2008 » Tue Apr 26, 2016 3:22 am

hi,
very good
thank you very much
regards farhad
The Words I Love You
farhad2008
 
Posts: 48
Joined: Tue Apr 01, 2008 1:15 am
Location: usa

Re: Javascript Grid..

Postby TinTin » Tue Apr 26, 2016 1:55 pm

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
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby TinTin » Wed Apr 27, 2016 6:49 am

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
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby luishp » Wed Apr 27, 2016 11:20 am

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!
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 357
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Javascript Grid..

Postby TinTin » Wed Apr 27, 2016 12:18 pm

ahh that was easy, didn't realise NAB would include in the manifest.. lots of possibilities for 3rd party libraries now.


Thanks Luis
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby TinTin » Wed Apr 27, 2016 12:48 pm

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:
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Javascript Grid..

Postby PaulTomo » Sun May 08, 2016 2:35 am

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?
Last edited by PaulTomo on Sun May 08, 2016 10:19 am, edited 2 times in total.
User avatar
PaulTomo
 
Posts: 62
Joined: Tue Apr 28, 2009 1:15 am
Location: UK

Re: Javascript Grid..

Postby Gaev » Sun May 08, 2016 5:30 am

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
User avatar
Gaev
 
Posts: 3716
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Javascript Grid..

Postby TinTin » Sun Jun 12, 2016 8:29 am

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!!
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 1 guest