Skip to content

Commit

Permalink
Add documentation for the new theming mechanism (#6697)
Browse files Browse the repository at this point in the history 
* Add Theme Editor documentation

* Add a link to the demos

* Use Fetch API

* Apply suggestions from code review

Co-authored-by: annnke <anna.bakulina@devexpress.com>

---------

Co-authored-by: annnke <anna.bakulina@devexpress.com>
  • Loading branch information
@RomanTsukanov @annnke
RomanTsukanov and annnke committed Aug 14, 2023
1 parent 6e1f27e commit 8d7ccbf
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 113 deletions.
36 changes: 21 additions & 15 deletions docs/get-started-angular.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ npm install survey-angular-ui --save
## Configure Styles

SurveyJS ships with the Modern and Default V2 UI themes illustrated below.
SurveyJS Form Library is shipped with several predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.

![Themes in SurveyJS Form Library](images/survey-library-themes.png)

Open the `angular.json` file and reference a style sheet that implements the required theme:
To add SurveyJS themes to your Angular application, open the `angular.json` file and reference the Form Library style sheet:

```js
{
Expand All @@ -64,10 +64,7 @@ Open the `angular.json` file and reference a style sheet that implements the req
// ...
"styles": [
"src/styles.css",
// Default V2 theme
"node_modules/survey-core/defaultV2.min.css",
// Modern theme
// "node_modules/survey-core/modern.min.css"
],
// ...
}
Expand All @@ -78,7 +75,9 @@ Open the `angular.json` file and reference a style sheet that implements the req
}
```

For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
This style sheet applies the Default theme. If you want to apply a different predefined theme or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).

> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
## Create a Model

Expand Down Expand Up @@ -276,16 +275,23 @@ export class AppComponent implements OnInit {
}

function saveSurveyResults(url, json) {
const request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.addEventListener('load', () => {
// Handle "load"
});
request.addEventListener('error', () => {
// Handle "error"
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(json)
})
.then(response => {
if (response.ok) {
// Handle success
} else {
// Handle error
}
})
.catch(error => {
// Handle error
});
request.send(JSON.stringify(json));
}
```

Expand Down
44 changes: 24 additions & 20 deletions docs/get-started-jquery.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,26 @@ As a result, you will create a survey displayed below:

## Link SurveyJS Resources

SurveyJS Form Library ships with a script and several style sheets that implement the Modern and Default V2 themes illustrated below:

![Themes in SurveyJS Form Library](images/survey-library-themes.png)

Insert links to the script and one of the style sheets within the `<head>` tag on your HTML page _after_ the jQuery link:
SurveyJS Form Library resources include a script and a style sheet. Insert links to them within the `<head>` tag on your HTML page _after_ the jQuery link:

```html
<head>
<!-- ... -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Default V2 theme -->
<link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">

<!-- Modern theme -->
<!-- <link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet"> -->

<script type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
<!-- ... -->
</head>
```

For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
The style sheet above applies the Default theme. SurveyJS Form Library is shipped with several more predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.

![Themes in SurveyJS Form Library](images/survey-library-themes.png)

If you want to apply a predefined theme different from Default or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).

> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
## Create a Model

Expand Down Expand Up @@ -200,16 +197,23 @@ function surveyComplete (sender) {
}

function saveSurveyResults(url, json) {
const request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.addEventListener('load', () => {
// Handle "load"
});
request.addEventListener('error', () => {
// Handle "error"
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(json)
})
.then(response => {
if (response.ok) {
// Handle success
} else {
// Handle error
}
})
.catch(error => {
// Handle error
});
request.send(JSON.stringify(json));
}

const survey = new Survey.Model(surveyJson);
Expand Down
46 changes: 25 additions & 21 deletions docs/get-started-knockout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,27 @@ As a result, you will create a survey displayed below:

## Link SurveyJS Resources

The SurveyJS Form Library for Knockout consists of two parts: `survey-core` (platform-independent code) and `survey-knockout-ui` (view models). Each part includes scripts and style sheets that implement the Modern and Default V2 themes illustrated below:

![Themes in SurveyJS Form Library](images/survey-library-themes.png)

Insert links to the scripts and style sheets within the `<head>` tag on your HTML page _after_ the Knockout link:
SurveyJS Form Library for Knockout consists of two parts: `survey-core` (platform-independent code) and `survey-knockout-ui` (view models). Each part is distributed as a script, while `survey-core` also includes a style sheet. Insert links to these resources within the `<head>` tag on your HTML page _after_ the Knockout link:

```html
<head>
<!-- ... -->
<script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>

<!-- Default V2 theme -->
<link href="https://unpkg.com/survey-knockout/defaultV2.min.css" type="text/css" rel="stylesheet">

<!-- Modern theme -->
<!-- <link href="https://unpkg.com/survey-knockout/modern.min.css" type="text/css" rel="stylesheet"> -->

<link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
<!-- ... -->
</head>
```

For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
The style sheet above applies the Default theme. SurveyJS Form Library is shipped with several more predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.

![Themes in SurveyJS Form Library](images/survey-library-themes.png)

If you want to apply a predefined theme different from Default or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).

> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
## Create a Model

Expand Down Expand Up @@ -208,16 +205,23 @@ function surveyComplete (sender) {
}

function saveSurveyResults(url, json) {
const request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.addEventListener('load', () => {
// Handle "load"
});
request.addEventListener('error', () => {
// Handle "error"
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(json)
})
.then(response => {
if (response.ok) {
// Handle success
} else {
// Handle error
}
})
.catch(error => {
// Handle error
});
request.send(JSON.stringify(json));
}

const survey = new Survey.Model(surveyJson);
Expand Down
38 changes: 22 additions & 16 deletions docs/get-started-react.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,27 @@ As a result, you will create a survey displayed below:

## Install the `survey-react-ui` npm Package

The SurveyJS Form Library for React consists of two npm packages: [`survey-core`](https://www.npmjs.com/package/survey-core) (platform-independent code) and [`survey-react-ui`](https://www.npmjs.com/package/survey-react-ui) (rendering code). Run the following command to install `survey-react-ui`. The `survey-core` package will be installed automatically because it is listed in `survey-react-ui` dependencies.
SurveyJS Form Library for React consists of two npm packages: [`survey-core`](https://www.npmjs.com/package/survey-core) (platform-independent code) and [`survey-react-ui`](https://www.npmjs.com/package/survey-react-ui) (rendering code). Run the following command to install `survey-react-ui`. The `survey-core` package will be installed automatically as a dependency.

```cmd
npm install survey-react-ui --save
```

## Configure Styles

SurveyJS ships with the Modern and Default V2 UI themes illustrated below.
SurveyJS Form Library is shipped with several predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.

![Themes in SurveyJS Form Library](images/survey-library-themes.png)

Open the React component in which your survey will be and import a style sheet that implements the required theme.
To add SurveyJS themes to your application, open the React component that will render your survey and import the Form Library style sheet:

```js
// Default V2 theme
import 'survey-core/defaultV2.min.css';
// Modern theme
// import 'survey-core/modern.min.css';
```

For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
This style sheet applies the Default theme. If you want to apply a different predefined theme or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).

> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
## Create a Model

Expand Down Expand Up @@ -182,16 +181,23 @@ function App() {
}

function saveSurveyResults(url, json) {
const request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.addEventListener('load', () => {
// Handle "load"
});
request.addEventListener('error', () => {
// Handle "error"
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(json)
})
.then(response => {
if (response.ok) {
// Handle success
} else {
// Handle error
}
})
.catch(error => {
// Handle error
});
request.send(JSON.stringify(json));
}
```

Expand Down

0 comments on commit 8d7ccbf

Please sign in to comment.