Documentation(1013149): Update the getting start content for javascript and typescript

Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md

@@ -7,69 +7,47 @@ control: Getting started
 documentation: ug
 ---
 
-# Getting started in EJ2 TypeScript Spreadsheet control
+# Getting Started with EJ2 TypeScript Spreadsheet control
 
 This section explains the steps to create a simple Spreadsheet component using Essential<sup style="font-size:70%">&reg;</sup> JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
 
 > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
 
-## Dependencies
+## Prerequisites
 
-The following list of dependencies are required to use the Spreadsheet component in your application:
+To get started, ensure the following software is installed on your machine:
 
-```js
-|-- @syncfusion/ej2-spreadsheet
-   |-- @syncfusion/ej2-base
-   |-- @syncfusion/ej2-dropdowns
-   |-- @syncfusion/ej2-navigations
-   |-- @syncfusion/ej2-grids
+- [Visual Studio Code](https://code.visualstudio.com/)
+- Node `v14.15.0` or higher
 
-```
-
-## Set up development environment
+## Create the TypeScript application
 
-Open the command prompt from the required directory, and run the following command to clone the Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (Essential<sup style="font-size:70%">&reg;</sup> JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-).
+Create a simple TypeScript application using the Essential<sup style="font-size:70%">&reg;</sup> JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
 
-{% tabs %}
-{% highlight bash tabtitle="CMD" %}
+**Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub.
 
+```bash
 git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
+```
 
-{% endhighlight %}
-{% endtabs %}
-
-After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder.
-
-{% tabs %}
-{% highlight bash tabtitle="CMD" %}
+**Step 2:** Navigate to the `ej2-quickstart` folder.
 
+```bash
 cd ej2-quickstart
+```
 
-{% endhighlight %}
-{% endtabs %}
-
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript packages
-
-Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (Essential<sup style="font-size:70%">&reg;</sup> JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (Essential<sup style="font-size:70%">&reg;</sup> JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control.
-
-The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt.
-
-{% tabs %}
-{% highlight bash tabtitle="NPM" %}
+**Step 3:** Install the dependent npm packages.
 
+```bash
 npm install
+```
 
-{% endhighlight %}
-{% endtabs %}
-
-## Import the Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
-
-Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript controls to match the style of your application by referring to one of the built-in themes.
+## Add CSS references
 
-The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: 
+The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below:
 
 {% tabs %}
-{% highlight css tabtitle="style.css" %}
+{% highlight css tabtitle="styles.css" %}
 
 @import "../../node_modules/@syncfusion/ej2/material.css";
 
@@ -78,11 +56,9 @@ The quickstart application is preconfigured to use the `Material` theme in the `
 
 > You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme/) section to know more about built-in themes and CSS reference for individual controls.
 
-## Add Spreadsheet component
-
-Add the HTML `div` element with ID attribute as `element` in your `index.html` file.
+## Add the Syncfusion® Spreadsheet Editor component to the application
 
-`[src/index.html]`
+Add the HTML `div` element with ID attribute as `element` in your `index.html` file, and initialize the Spreadsheet control in `app.ts`.
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
@@ -105,14 +81,7 @@ Add the HTML `div` element with ID attribute as `element` in your `index.html` f
 </html>
 
 {% endhighlight %}
-{% endtabs %}
-
-Now, import the Spreadsheet component into your `app.ts` to instantiate a spreadsheet and append the spreadsheet instance to the `#element`.
-
-`[src/app/app.ts]`
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
+{% highlight ts tabtitle="index.ts" %}
 
 import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
@@ -125,6 +94,9 @@ spreadsheet.appendTo('#element');
 {% endhighlight %}
 {% endtabs %}
 
+
+> **Note:** The [openUrl](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#openurl) and [saveUrl](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveurl) properties are used to connect the Spreadsheet control to a server-side service for Excel import and export operations. For development and production use, we recommend configuring your own local or hosted service instead of relying on demo endpoints. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services).
+
 ## Run the application
 
 The `quickstart` project is configured to compile and run the application in the browser. Use the following command to run the application.
@@ -150,7 +122,6 @@ The following example shows a basic Spreadsheet component.
 
 {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1" %}
 
-> You can refer to our [JavaScript Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/javascript/#/tailwind3/spreadsheet/default.html) that shows you how present and manipulate data, including editing, formulas, formatting, importing, and exporting.
 
 ## See Also
 

Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js

@@ -1,5 +1,8 @@
-// Initialize the Spreadsheet componenet.
-var spreadsheet = new ej.spreadsheet.Spreadsheet({});
+// Initialize the Spreadsheet component
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet.
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.ts

@@ -2,8 +2,11 @@
 
 import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
-// Initialize the Spreadsheet control
-let spreadsheet: Spreadsheet = new Spreadsheet();
+// Initialize the Spreadsheet component
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.js

@@ -1,5 +1,8 @@
-// Initialize the Spreadsheet componenet.
-var spreadsheet = new ej.spreadsheet.Spreadsheet({});
+// Initialize the Spreadsheet component
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet.
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.ts

@@ -3,7 +3,10 @@
 import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
 // Initialize the Spreadsheet component
-let spreadsheet: Spreadsheet = new Spreadsheet();
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.js

@@ -1,5 +1,8 @@
-// Initialize the Spreadsheet componenet.
-var spreadsheet = new ej.spreadsheet.Spreadsheet({});
+// Initialize the Spreadsheet component
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet.
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.ts

@@ -2,8 +2,11 @@
 
 import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
-// Initialize the Spreadsheet control
-let spreadsheet: Spreadsheet = new Spreadsheet();
+// Initialize the Spreadsheet component
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.js

@@ -1,5 +1,8 @@
-// Initialize the Spreadsheet componenet.
-var spreadsheet = new ej.spreadsheet.Spreadsheet({});
+// Initialize the Spreadsheet component
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet.
 spreadsheet.appendTo('#element');

Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts

@@ -3,7 +3,10 @@
 import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
 // Initialize the Spreadsheet component
-let spreadsheet: Spreadsheet = new Spreadsheet();
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
+});
 
 // Render initialized Spreadsheet
 spreadsheet.appendTo('#element');