Get start

In this example, we go step by step to setup and run simple example by basis core.

Note

For create this example access to internet needed for get some js file.

At first create new file and name it test.html. Open file in your favorite text editor and add this bellow content to it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
   </body>
</html>

Now add link to basiscore.min.js and alasql.min.js to bellow of created document. This file add BasisCore client side processing and rendering engine , and setup Client Context when document load in browser.

Tip

You can download this two file, save and use locally in offline mode, without use of BasisCore cdn servers.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
      <br/>

      <script src="http://cdn.basiscore.net/_js/alasql.min.js"></script>
      <script src="http://cdn.basiscore.net/_js/basiscore.min.js"></script>
   </body>
</html>

In the next step, add a simple DbSource command to document. dbsource is a one /Fundamentals/Commands/Source. For more information about commands, see Commands:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
      <br/>

      <basis core='dbsource' name='db' run='atclient' source='basiscore' mid='10' lid='1' userid='122504' ownerid='7660' rkey='289979947718473-59625461925771' dmnid='4312'>
         <member name='product-list' type='list' link='/owner_profile.bc' propertyid='8139,8140,87816,87817,87881' order='id desc' perpage='30' pageno='1' />
      </basis>

      <script src="http://cdn.basiscore.net/_js/alasql.min.js"></script>
      <script src="http://cdn.basiscore.net/_js/basiscore.min.js"></script>
   </body>
</html>

Now must add setting to document for determine config for connection to servers. For more information about setting client side, see Client Configuration. This setting add as a json object like bellow:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
      <br/>

      <basis core='dbsource' name='db' run='atclient' source='basiscore' mid='10' lid='1' userid='122504' ownerid='7660' rkey='289979947718473-59625461925771' dmnid='4312'>
         <member name='product-list' type='list' link='/owner_profile.bc' propertyid='8139,8140,87816,87817,87881' order='id desc' perpage='30' pageno='1' />
      </basis>

      <script>
         var host = {
             Logging: false,
             Settings: {
                 'basiscore': 'http://185.44.36.122:8080',
                 'default.dbsource.verb': 'post',
                 'default.dmnid': '4312'
             }
         }
     </script>

      <script src="http://cdn.basiscore.net/_js/alasql.min.js"></script>
      <script src="http://cdn.basiscore.net/_js/basiscore.min.js"></script>
   </body>
</html>

As you can see in above, in host setting, value http://185.44.36.122:8080 set form basiscore attribute in Settings. Now source attribute of Source Commands can use basiscore as value to find out information about how to connect to data provider. Now in member`tag of :class:`dbsource command, add preview with value true. Then save document and open it in browser.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
      <br/>

      <basis core='dbsource' name='db' run='atclient' source='basiscore' mid='10' lid='1' userid='122504' ownerid='7660' rkey='289979947718473-59625461925771' dmnid='4312'>
         <member name='product-list' type='list' link='/owner_profile.bc' preview='true' propertyid='8139,8140,87816,87817,87881' order='id desc' perpage='30' pageno='1' />
      </basis>

      <script>
         var host = {
             Logging: false,
             Settings: {
                 'basiscore': 'http://185.44.36.122:8080',
                 'default.dbsource.verb': 'post',
                 'default.dmnid': '4312'
             }
         }
      </script>

      <script src="http://cdn.basiscore.net/_js/alasql.min.js"></script>
      <script src="http://cdn.basiscore.net/_js/basiscore.min.js"></script>
   </body>
</html>

Render result in browser.

../_images/0001.jpg

Now add a simple Print Command command. print is a one Renderable Commands. Also remove preview attribute added in previous step.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
      <br/>

      <basis core='dbsource' name='db' run='atclient' source='basiscore' mid='10' lid='1' userid='122504' ownerid='7660' rkey='289979947718473-59625461925771' dmnid='4312'>
         <member name='product-list' type='list' link='/owner_profile.bc' propertyid='8139,8140,87816,87817,87881' order='id desc' perpage='30' pageno='1' />
      </basis>

      <basis core='print' run='atclient' datamembername='db.product-list'>

         <layout>
            <ul>
               @child
            </ul>
         </layout>

         <face>
            <li>@title</li>
         </face>

      </basis>

      <script>
         var host = {
             Logging: false,
             Settings: {
                 'basiscore': 'http://185.44.36.122:8080',
                 'default.dbsource.verb': 'post',
                 'default.dmnid': '4312'
             }
         }
      </script>

      <script src="http://cdn.basiscore.net/_js/alasql.min.js"></script>
      <script src="http://cdn.basiscore.net/_js/basiscore.min.js"></script>
   </body>
</html>

And result in browser:

../_images/0002.jpg

Use Data In Javascript

One important feature of Client Context is communication with javascript easily. In some scenario, it is important that access to loaded data from Source Commands. Now let add some javascript to document to show way of communication between BasisCore command and javascript code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Test</title>
   </head>
   <body>
      <h1>Test</h1>
      <br/>

      <basis core='dbsource' name='db' run='atclient' source='basiscore' mid='10' lid='1' userid='122504' ownerid='7660' rkey='289979947718473-59625461925771' dmnid='4312'>
         <member name='product-list' type='list' link='/owner_profile.bc' propertyid='8139,8140,87816,87817,87881' order='id desc' perpage='30' pageno='1' />
      </basis>

      <script>
         var host = {
             Logging: false,
             Settings: {
                 'basiscore': 'http://185.44.36.122:8080',
                 'default.dbsource.verb': 'post',
                 'default.dmnid': '4312'
             }
         }
      </script>

      <script src="http://cdn.basiscore.net/_js/alasql.min.js"></script>
      <script src="http://cdn.basiscore.net/_js/basiscore.min.js"></script>

      <script>
         Context.Current.WaitToGetDataSourceAsync("db.product-list").then(source => {
            console.table(source.Data);
         });
      </script>
   </body>
</html>

For simplicity, remove print command. As you can see, in bottom of document, we add a script tag and in it , use WaitToGetDataSourceAsync() method to add wait call-back handler. In handler we simply print data source in console window using console.table() method. Save and load document in browser. If move to console window, see this:

../_images/0003.jpg