|
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