|
1 | | -# JavaScript Sample Browser |
2 | 1 |
|
3 | | -## Adding New Sample |
4 | 2 |
|
5 | | -Create your new folder in 'src' location and name the folder as control name. Example: “button” or "list-view". |
| 3 | +## Installing |
6 | 4 |
|
7 | | -Add your sample order in the `src/common/sampleOrder.json` with corresponding category. |
8 | | - |
9 | | -**Note:** Do not use whitespace at any cause in the folder’s name. Use “-” instead of space. |
10 | | - |
11 | | - |
12 | | -### Configure the folder and sample |
13 | | - |
14 | | -Create the “sample.json” file inside of your control folder. Create your sample html and js file in same folder also the html and js files should have the same names. |
15 | | - |
16 | | -**Note:** Do not use whitespace at any cause in the file’s name. Use “-” instead of space. |
17 | | - |
18 | | - |
19 | | -### Configure Sample JSON |
20 | | - |
21 | | -Configure your sample json file as like below code snippet. |
| 5 | +To install all dependent packages, use the below command |
22 | 6 |
|
23 | 7 | ``` |
24 | | -{ |
25 | | - "name": "Grid", |
26 | | - "directory": "grid", |
27 | | - "category": "Grid", |
28 | | - "samples": [ |
29 | | - { "url": "localdata", "name": "Local Data", "category": "Data Binding" }, |
30 | | - { "url": "remotedata", "name": "Remote Data", "category": "Data Binding" }, |
31 | | - { "url": "autowrap", "name": "AutoWrap Column Cells", "category": "Columns" }, |
32 | | - { "url": "showhide", "name": "Show or Hide Column", "category": "Columns" } |
33 | | - ], |
34 | | - "dataSourcePath": "src/grid/datasource.js" |
35 | | -} |
| 8 | +npm install |
36 | 9 | ``` |
37 | | -**Note:** To exculde a sample in the device you need to set `hideOnDevice` as true for the sample json file. |
38 | | - |
39 | | -**Fields Description:** |
40 | | - |
41 | | -* _name :_ It can be any string that you want to show a component name. |
42 | | - |
43 | | -* _directory :_ Specifies that your sample's directory name. |
44 | | - |
45 | | -* _category :_ Specify that your sample comes under which category. |
46 | | - |
47 | | -* _dataSourcePath :_ Specify that your data source file Path (Optional). |
48 | | - |
49 | | -* _samples :_ Specify array of samples in your control. |
50 | | - |
51 | | -* _samples.url :_ specifies the file name without extension. |
52 | | - |
53 | | -* _samples.name :_ It can be any string that you want to show a sample name. |
54 | | - |
55 | | -* _samples.category :_ Specify that your sample comes under which category. |
56 | | - |
57 | | - |
58 | | -## Adding datasource components |
59 | 10 |
|
60 | | -To add datasource file for the component, you need to include the `dataSourcePath` option which need to map the datasource file path in the component's sample.json. |
| 11 | +## Building |
61 | 12 |
|
62 | | -refer the below link for config |
63 | | - |
64 | | -https://gitlab.syncfusion.com/essential-studio/ej2-javascript-samples/blob/7a32bea49aca215fdef1fe432e4135fa07ff3c83/src/grid/sample.json#L9 |
65 | | - |
66 | | -The sample datasource file need to store the json in window variable. |
67 | | - |
68 | | -Each component's datasource window variable name must be unique. |
69 | | - |
70 | | -For example datasource for grid must be stored as `window.gridData`. |
71 | | - |
72 | | -Refer the below below datasource file for further reference |
73 | | - |
74 | | -https://gitlab.syncfusion.com/essential-studio/ej2-javascript-samples/blob/19761f5590b4af5b2ea1cb90bed33d8dfa496de9/src/grid/datasource.js |
75 | | - |
76 | | -**Note:** Each component should include one datasource file only. |
77 | | - |
78 | | -## Run the sample browser |
79 | | - |
80 | | -We can run the sample browser with two commands |
81 | | - |
82 | | -1. **gulp _serve_** – run the sample browser alone. |
83 | | -2. **gulp _watch_** – run the sample browser and monitor typescript as well. This will help at development time. If any changes detect means it will automatically compile and browser will reloaded. |
| 13 | +To compile the source files, use the below command |
84 | 14 |
|
85 | 15 | ``` |
86 | | -gulp serve |
| 16 | +npm run build |
87 | 17 | ``` |
88 | 18 |
|
| 19 | +## Running |
89 | 20 |
|
90 | | -**Access URLs:** |
91 | | - |
92 | | -Local URL is works only in your machine. |
| 21 | +To run the samples, use the below command |
93 | 22 |
|
94 | 23 | ``` |
95 | | -http://localhost:3000 |
96 | | -``` |
97 | | - |
98 | | -External URL is works in all locally connected LAN. (You can use to see sample browser in mobile). |
99 | | - |
100 | | -``` |
101 | | -http://your-ip-address:3000 |
102 | | -``` |
103 | | - |
104 | | -**Note:** Here, The mentioned IP is your local machine IP Address. |
105 | | - |
| 24 | +npm run serve |
| 25 | +``` |
0 commit comments