Skip to content

Commit

Permalink
Rewrite content for better clarity
Browse files Browse the repository at this point in the history
Fix loads of links due to the change in the use cases structure
  • Loading branch information
Davide Barranca committed Apr 19, 2024
1 parent a463e45 commit 2715fdd
Show file tree
Hide file tree
Showing 18 changed files with 61 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ contributors:

## OAuth 2.0

This use case focuses on providing an authorization feature that allows a user to login to one of their existing services with OAuth 2.0. A typical use case would be to use assets you have stored in another service. Here you will find instructions of how to set it up, and an example of how to implement it. But also check out the [SDK Reference OAuth section](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-oauth/) for more options and details, as well as the [import-images-using-oauth](https://developer.adobe.com/express/add-ons/docs/samples/#import-images-using-oauth) sample add-ons for more advanced usage.
This section covers implementing an OAuth 2.0 authorization flow, enabling users to authenticate and log in using their existing accounts from third-party services. A typical use case would be to use assets stored in different services. Here, you will find instructions on how to set it up and an implementation example. Check also the [SDK Reference OAuth section](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-oauth/) for more options and details and the [import-images-using-oauth](/samples/#import-images-using-oauth) sample add-on for more advanced usage.

### Login and Logout flows

Expand Down Expand Up @@ -65,7 +65,7 @@ The OAuth APIs can be used to obtain the authorization "code" from any OAuth 2.0

### Example

Once you complete the set up, you can use the following code snippet as an example of how to perform the OAuth exchange to retrieve an access token. The [code samples](https://developer.adobe.com/express/add-ons/docs/samples/) also contain a few different examples of using OAuth 2.0 workflows that you can use for a reference. You will also find the [OAuthUtils.js](https://github.com/AdobeDocs/express-add-on-samples/blob/main/samples/import-images-using-oauth/src/utils/OAuthUtils.js) module there, which is referenced below, and we recommend using to help with your own OAuth implementation. Also be sure to check out the [SDK References](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-oauth) for additional details on the OAuth workflows.
Once you complete the setup, you can use the following code snippet as an example of how to perform the OAuth exchange to retrieve an access token. The [code samples](/samples.md) also include several examples of implementing OAuth 2.0 workflows, which you can refer to. Additionally, you'll find the [OAuthUtils.js](https://github.com/AdobeDocs/express-add-on-samples/blob/main/samples/import-images-using-oauth/src/utils/OAuthUtils.js) module, referenced below, and we recommend utilizing this module to facilitate your own OAuth implementation. For further details on the OAuth workflows, be sure to explore the [SDK References](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-oauth).

```js
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
Expand Down Expand Up @@ -119,4 +119,4 @@ function authorize(challenge) {

const accessToken = await oauthUtils.getAccessToken(id);
}
```
```
4 changes: 2 additions & 2 deletions src/pages/guides/develop/use_cases/clientside_data.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ contributors:

Instead of relying solely on server-side data, you can use the `clientStorage` API to store and retrieve data locally on the client-side. This can be useful for caching images, storing user preferences, or other scenarios where you want to avoid making repeated server requests.

An example is shown below; also refer to the [SDK Reference section for clientStorage](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/instance-clientStorage/) and the [use-client-storage sample add-on](https://developer.adobe.com/express/add-ons/docs/samples/#use-client-storage) for more details.
An example is shown below; also refer to the [SDK Reference section for clientStorage](/references/addonsdk/instance-clientStorage/) and the [use-client-storage sample add-on](/samples.md#use-client-storage) for more details.

### Example

Expand Down Expand Up @@ -54,4 +54,4 @@ async function displayAllItems() {
});
}

```
```
14 changes: 7 additions & 7 deletions src/pages/guides/develop/use_cases/content_authoring.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ contributors:

## Authoring Adobe Express Content

We provide a set of [Document APIs](/references/document-sandbox/document-apis/) that can be used for interacting with the document for common use cases like creating shapes, adding pages, clearing the artboard and more.
We provide a set of [Document APIs](/references/document-sandbox/document-apis/) that can be used to interact with the document for common use cases like creating shapes, adding pages, clearing the artboard, and more.

The following code snippet illustrates how to use the [Document APIs](../../references/document-sandbox/document-apis/) from the script running in your [`code.js`](../../references/document-sandbox/index.md#getting-started-with-the-apis) for instance, to access the current document, create a rectangle, set some properties and a fill for the rectangle, and finally, add it to the document:
The following code snippet illustrates how to use the [Document APIs](/references/document-sandbox/document-apis/) from the script running in your [`code.js`](/references/document-sandbox/index.md#getting-started-with-the-apis); for instance, to access the current document, create a rectangle, set some properties and a fill for the rectangle, and finally, add it to the document.

```js
import { editor, colorUtils } from "express";
Expand All @@ -49,13 +49,13 @@ insertionParent.children.append(rectangle);

<InlineAlert slots="text" variant="info"/>

Refer to [getting started with the Document Sandbox](../../references/document-sandbox/index.md#getting-started-with-the-apis) for more details on how to set up your add-on to use the script-based APIs as well as [this extensive tutorial](../tutorials/grids-addon.md) provided to help you build your first add-on using the Document APIs.
Refer to [getting started with the Document Sandbox](/references/document-sandbox/index.md#getting-started-with-the-apis) for more details on how to set up your add-on to use the script-based APIs, as well as [this extensive tutorial](../../tutorials/grids-addon.md) provided to help you build your first add-on using the Document APIs.

## Document and Page Metadata

You can retrieve some information about the current document using the [Add-on UI SDK Document object](../../references/addonsdk/app-document.md). Currently there are methods that allow you to retrieve the ID of the document and the title (ie: name). There are also associated events that allow you to listen for when the document is available (via the `documentAvailable` event) and when the title has changed (via the `documentTitleChange` event). The examples below illustrates the use of these new methods and events for reference.
You can retrieve some information about the current document using the [Add-on UI SDK Document object](/references/addonsdk/app-document.md). Currently, there are methods that allow you to retrieve the ID of the document and the title (i.e., name). Also, associated events will let you listen for when the document is available (via the `documentAvailable` event) and when the title has changed (via the `documentTitleChange` event). See the examples below.

### Retrieving the document id
### Retrieving the Document ID

The example below listens for the `documentAvailable` event and then sets the id.

Expand Down Expand Up @@ -101,7 +101,7 @@ addOnUISdk.app.on("documentTitleChange", data => {

### Retrieving page metadata

If you want to retrieve metadata for pages in the document, use the [`getPagesMetadata()`](../../references/addonsdk/app-document.md#getpagesmetadata) method in the `addOnUISdk.app.document` object as shown in the example below.
If you want to retrieve metadata for pages in the document, use the [`getPagesMetadata()`](/references/addonsdk/app-document.md#getpagesmetadata) method in the `addOnUISdk.app.document` object, as shown in the example below.

<CodeBlock slots="heading, code" repeat="1" languages="JavaScript" />

Expand Down Expand Up @@ -136,4 +136,4 @@ async function logMetadata() {
console.log("Failed to get metadata:", error);
}
}
```
```
12 changes: 6 additions & 6 deletions src/pages/guides/develop/use_cases/content_management.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ contributors:

## Importing Content

Importing content into a design is one of the most popular use cases. For instance, to add content retrieved from a third-party service or directly from the local hard drive. The following example use cases for implementing this feature. The first function shows how to implement it by adding an image directly from a `blob` object, and the second shows how to implement it by fetching an image via a URL first. Follow the example below to implement this feature, but also be sure to refer to the [related SDK Reference section](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#methods) and [code samples](https://developer.adobe.com/express/add-ons/docs/samples/) for more details.
Importing content into a design is one of the most popular use cases. For instance, to add content retrieved from a third-party service or directly from the local hard drive. The following example implements this feature. The first function shows how to add an image directly from a `blob` object, and the second shows how to fetch an image via URL. Please also refer to the [related SDK Reference section](/references/addonsdk/app-document.md#methods) and [code samples](/samples.md) for more details.

### Example

Expand Down Expand Up @@ -59,11 +59,11 @@ The supported file types for imported images are currently **`png/jpg/mp4`,** an

### Video and Audio Content

You can also import video and audio content in a similar way as described above, via the [`addVideo()`](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#addvideo) and [`addAudio()`](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document#addaudio) methods accordingly. **Please note:** the `addAudio()` method requires an additional `MediaAttributes` object parameter containing the `title` of the audio object you're importing. See the associated [SDK Reference](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#methods) for more details and example usage.
You can also import video and audio content similarly via the [`addVideo()`](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#addvideo) and [`addAudio()`](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document#addaudio) methods. **Please note:** the `addAudio()` method requires an additional `MediaAttributes` object parameter containing the `title` of the audio object you're importing. See the associated [SDK Reference](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#methods) for more details, and the [`audio-recording-add-on`](https://github.com/AdobeDocs/express-add-on-samples/tree/main/samples/audio-recording-add-on) sample.

## Exporting Content

Another popular feature available for use in your add-on is the ability to export content. For instance, if you want to allow the user to save/download the current design, (or range of a design), with certain export configurations to their local hard drive. Some examples for exporting content are provided below, but also check out the [`createRenditions` section in the SDK Reference](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#createrenditions) for more specific options and details, as well as the [export-sample add-on](https://developer.adobe.com/express/add-ons/docs/samples/#export-sample).
Another popular feature available for use in your add-on is the ability to export content. For instance, if you want to allow the user to save/download the current design, (or range of a design), with certain export configurations to their local hard drive. Some examples for exporting content are provided below, but also check out the [`createRenditions` section in the SDK Reference](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-document/#createrenditions) for more specific options and details, as well as the [export-sample add-on](/samples.md#export-sample).

The steps to export content:

Expand Down Expand Up @@ -95,7 +95,7 @@ While the above is a very basic example, add-ons that call `createRenditions` to

#### Option 1: Show a Premium Content error with the "Upgrade" option

Display a warning message when the user is not entitled to export/download premium content, and include a button to allow them to upgrade. Please note that you can detect in advance if the user is entitled to premium content ([`isPremiumUser()`](../../references/addonsdk/app-currentUser.md#isPremiumUser)) and whether the page contains premium content ([`hasPremiumContent`](../../references/addonsdk/app-document.md#pagemetadata)) in the first place. A try/catch block intercepting the `"USER_NOT_ENTITLED_TO_PREMIUM_CONTENT"` string in the error message as the primary way to deal with it is not recommended anymore.
Display a warning message when the user is not entitled to export/download premium content, and include a button to allow them to upgrade. Please note that you can detect in advance if the user is entitled to premium content ([`isPremiumUser()`](/references/addonsdk/app-currentUser.md#isPremiumUser)) and whether the page contains premium content ([`hasPremiumContent`](/references/addonsdk/app-document.md#pagemetadata)) in the first place. A try/catch block intercepting the `"USER_NOT_ENTITLED_TO_PREMIUM_CONTENT"` string in the error message as the primary way to deal with it is no longer recommended.

#### Example:

Expand Down Expand Up @@ -158,15 +158,15 @@ const exportDocument = async () => {
document.querySelector("#export").onclick = exportDocument;
```
Please note that [`startPremiumUpgradeIfFreeUser()`](../../references/addonsdk/addonsdk-app.md#startpremiumupgradeiffreeuser) allows a more streamlined user experience for upgrading to premium content, compared to the older method of redirecting to the Adobe Express pricing page, which is now deprecated.
Please note that [`startPremiumUpgradeIfFreeUser()`](/references/addonsdk/addonsdk-app.md#startpremiumupgradeiffreeuser) allows a more streamlined user experience for upgrading to premium content, compared to the older method of redirecting to the Adobe Express pricing page, which is now deprecated.
#### Option 2: Provide visual cues in the UI
Developers can provide visual cues directly in the add-on UI to show that users are not entitled to export/download premium content. This can be done in various ways, for instance, by disabling the export/download button, replacing it with an upgrade button, or appending a brief explanation, tooltip, or icon. This would inform users upfront that they are not entitled to export/download premium content, preventing them from facing the warning popup after attempting to do so.
#### Option 3: Allow preview of Premium Content
Set a `renditionPreview` intent in the [manifest requirements](../../references/manifest/index.md#requirements), and add an extra argument to the [`createRenditions` method](../../references/addonsdk/app-document.md#createrenditions) (ie: `RenditionIntent.preview`) to generate previews that can still use premium content.
Set a `renditionPreview` intent in the [manifest requirements](/references/manifest/index.md#requirements), and add an extra argument to the [`createRenditions` method](/references/addonsdk/app-document.md#createrenditions) (ie: `RenditionIntent.preview`) to generate previews that can still use premium content.
**IMPORTANT**: Your add-on must not allow these previewed images to be downloaded or persisted on a backend (for any longer than necessary to serve the result back to the user). To that end, be sure that users cannot:
Expand Down
8 changes: 4 additions & 4 deletions src/pages/guides/develop/use_cases/environment_settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ contributors:

## Detecting Theme

When you want to detect the theme of the environment where your add-on is running, or if you want to be notified if it changes, you can use the following example. This is useful for knowing what theme is currently set in Adobe Express, so you can use the same in your add-on UI, or apply a change to your UI when the user changes their Adobe Express theme.
When you want to detect the theme of the environment where your add-on is running or if you want to be notified if it changes, you can use the following example. This is useful for knowing what theme is currently set in Adobe Express, so you can use the same in your add-on UI or keep it in synch when the user changes their Adobe Express theme.

<InlineAlert slots="text" variant="info"/>

Currently, Adobe Express only supports a "light" theme, though this will be changing to include support for a "dark" theme in the future. See the snippet below for an example of how to use and detect the theme, as well as the [related SDK Reference section](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-ui/#theme).
Currently, Adobe Express only supports a "light" theme, though this will be changing to include support for a "dark" theme in the future. See the snippet below for an example of how to use and detect the theme, as well as the [related SDK Reference section](/references/addonsdk/app-ui.md#theme).

### Example

Expand All @@ -45,7 +45,7 @@ addOnUISdk.app.on("themechange", (data) => {

## Detecting Locale and Supported Locales

If you want to find out the users current locale, the list of supported locales, or detect when the locale changes (ie: to set the language in your add-on), you can do so with the [`addOnUISdk.app.ui` object](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-ui/#locale) in the add-on SDK. A simple example is shown below.
If you want to find out the user's current locale, the list of supported locales, or detect when the locale changes (e.g., to set the language in your add-on), you can do so with the [`addOnUISdk.app.ui` object](/references/addonsdk/app-ui.md#locale) in the add-on SDK. A simple example is shown below.

### Example

Expand All @@ -64,4 +64,4 @@ addOnUISdk.ready.then(() => {
addOnUISdk.app.on("localechange", data => {
setLanguage(data.locale);
});
```
```
6 changes: 3 additions & 3 deletions src/pages/guides/develop/use_cases/monetization_flows.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ contributors:

## Get Current User information

You can leverage the [`currentUser`](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-currentUser) API to obtain the information for the currently logged in user, for instance if you want to use their `userId` to validate in a monetization flow.
You can leverage the [`currentUser`](/references/addonsdk/app-currentUser.md) API to obtain the information for the currently logged-in user, for instance, if you want to use their `userId` to validate in a monetization flow.

Use the example below to try this feature, but also be sure to refer to the [related SDK Reference section](https://developer.adobe.com/express/add-ons/docs/references/addonsdk/app-currentUser). Also, refer to the [licensed-addon code sample](https://developer.adobe.com/express/add-ons/docs/samples/#licensed-addon), which shows how you can utilize the hash of the user ID to integrate your add-on with licensing and payment services.
See the example below and refer to the [related SDK Reference section](/references/addonsdk/app-currentUser.md) and the [licensed-addon code sample](/samples.md#licensed-addon), which shows how you can utilize the hash of the user ID to integrate your add-on with licensing and payment services.

<CodeBlock slots="heading, code" repeat="2" languages="JavaScript" />

Expand All @@ -44,4 +44,4 @@ validateUser(userId: string) {

### Output

`Current Userid: 3cda976828a4a90d13b0f38b1f8a59b1d6845cccfc48037fb30bb75d3ef67d36`
`Current Userid: 3cda976828a4a90d13b0f38b1f8a59b1d6845cccfc48037fb30bb75d3ef67d36`
Loading

0 comments on commit 2715fdd

Please sign in to comment.