diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-1.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-1.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-1.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-1.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-2.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-2.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-2.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-2.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-3.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-3.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-3.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-3.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-4.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-4.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-4.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-4.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-5.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-5.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-5.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-5.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-6.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-6.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-6.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-6.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-7.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-7.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-7.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-7.png diff --git a/src/pages/guides/creating-project-in-dev-console/create-project-8.png b/src/pages/getting-started/creating-project-in-dev-console/create-project-8.png similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/create-project-8.png rename to src/pages/getting-started/creating-project-in-dev-console/create-project-8.png diff --git a/src/pages/guides/creating-project-in-dev-console/index.md b/src/pages/getting-started/creating-project-in-dev-console/index.md similarity index 100% rename from src/pages/guides/creating-project-in-dev-console/index.md rename to src/pages/getting-started/creating-project-in-dev-console/index.md diff --git a/src/pages/guides/development-flow/index.md b/src/pages/getting-started/development-flow/index.md similarity index 93% rename from src/pages/guides/development-flow/index.md rename to src/pages/getting-started/development-flow/index.md index 3da45f82..7d38f070 100644 --- a/src/pages/guides/development-flow/index.md +++ b/src/pages/getting-started/development-flow/index.md @@ -33,6 +33,16 @@ The `Production` workspace is special, as it is used for the submission and dist Once your project is set up in [Adobe Developer Console](https://developer.adobe.com/console), we need to initialize our app in a local environment. There are several ways how to do it. +The most basic way is to use AIO CLI with this command: + +```shell +demo-extension-project % aio app init +? Select Org: +❯ Alpha Org + Beta Org + Delta Org +``` + We will initialize the UI Extension Project using [AIO CLI](https://github.com/adobe/aio-cli). You may find detailed guide at [Initialize the UI Extension Project using AIO CLI](../../services/aem-cf-console-admin/code-generation#launch-code-generation-during-project-initialization). @@ -66,6 +76,10 @@ UI Extensions has default structure and preselected technology stack such as [Re 1. Supply configuration file that will declare application as an [extension](https://developer.adobe.com/app-builder/docs/guides/extensions/). 2. Use `@adobe/uix-guest` library for proper UI Extension initialization and interaction with Adobe service. +## Check your changes during development + +When you are doing changes in code you probably would like to check what is result from those changes. You can easly run you local application on Adobe Adobe Experience Manager (AEM). You do not have to publish the code you can just check the result in the cloude instance. Here are steps to do that [Local Preview of UI the Extensions](../preview-extension-locally/). + ## Verify your application After development is done you may check yor application locally (`aio app run`) or at `Stage` or any other workspace at Adobe I/O (`aio app deploy`). diff --git a/src/pages/guides/development-flow/publishing-1.png b/src/pages/getting-started/development-flow/publishing-1.png similarity index 100% rename from src/pages/guides/development-flow/publishing-1.png rename to src/pages/getting-started/development-flow/publishing-1.png diff --git a/src/pages/guides/development-flow/publishing-2.png b/src/pages/getting-started/development-flow/publishing-2.png similarity index 100% rename from src/pages/guides/development-flow/publishing-2.png rename to src/pages/getting-started/development-flow/publishing-2.png diff --git a/src/pages/guides/get-access/aem-global-navigation.png b/src/pages/getting-started/get-access/aem-global-navigation.png similarity index 100% rename from src/pages/guides/get-access/aem-global-navigation.png rename to src/pages/getting-started/get-access/aem-global-navigation.png diff --git a/src/pages/guides/get-access/index.md b/src/pages/getting-started/get-access/index.md similarity index 100% rename from src/pages/guides/get-access/index.md rename to src/pages/getting-started/get-access/index.md diff --git a/src/pages/getting-started/index.md b/src/pages/getting-started/index.md index 67c8585d..0ad7b7f9 100644 --- a/src/pages/getting-started/index.md +++ b/src/pages/getting-started/index.md @@ -1,34 +1,46 @@ --- -title: Getting Started with UI Extensibility -description: Learn basics of UI Extensibility +title: Guides - UI Extensibility +description: Learn what is UI Extensibility and navigate through guides contributors: - https://github.com/AdobeDocs/uix --- -# Getting Started +# Getting Started -Begin your journey with UI Extensibility by exploring main capabilities and finding answers to your questions. +The guides below provide you with general information regarding UI Extensibility. For detailed information regarding particular Adobe Service please see `Extensible Services`. -[What Are UI Extensions](app-builder) +[Get Access](get-access) -Understand the connection between UI Extensibility and App Builder +Discover what is needed to start using UI Extensibility -[Why Choose UI Extensibility](reason) +[Set Up Local Environment](local-environment) -Know why UI Extensibility may be a good solution for you +Prepare your local environment for UI extension development -[How It Works](design) +[Create a New Project](creating-project-in-dev-console) -Explore how UI Extensibility works +Discover how to create a project in Adobe Developer Console -[FAQ](faq) +[Create a New Extension](development-flow) + +Know what to expect when creating a UI Extension -Find answers to most frequent questions about UI Extensibility + + +[Local Preview](preview-extension-locally) + +Discover how to run UI extensions locally and preview result during development + + + +[Publish and Manage](publication) + +Learn to distribute and manage your extension for users diff --git a/src/pages/guides/local-environment/index.md b/src/pages/getting-started/local-environment/index.md similarity index 100% rename from src/pages/guides/local-environment/index.md rename to src/pages/getting-started/local-environment/index.md diff --git a/src/pages/guides/preview-extension-locally/index.md b/src/pages/getting-started/preview-extension-locally/index.md similarity index 93% rename from src/pages/guides/preview-extension-locally/index.md rename to src/pages/getting-started/preview-extension-locally/index.md index 571dfc18..f49e9992 100644 --- a/src/pages/guides/preview-extension-locally/index.md +++ b/src/pages/getting-started/preview-extension-locally/index.md @@ -77,6 +77,9 @@ The final URL for local preview will look like: https://experience.adobe.com/?ext=https://localhost:9080&repo=#/@/aem/cf/admin/ ``` +So to create you url you can just open content fragment admin on AEM and modify the url by adding `?devMode=true&ext=https://localhost:9080`. Plese pay attention to the port of you localhost, it can be different then 9080. When you create correct url, you should be able to see your extenstion there. + + The system will process these parameters, making it work as if the extension was published. diff --git a/src/pages/guides/publication/app-submission-details-form.png b/src/pages/getting-started/publication/app-submission-details-form.png similarity index 100% rename from src/pages/guides/publication/app-submission-details-form.png rename to src/pages/getting-started/publication/app-submission-details-form.png diff --git a/src/pages/guides/publication/approved.png b/src/pages/getting-started/publication/approved.png similarity index 100% rename from src/pages/guides/publication/approved.png rename to src/pages/getting-started/publication/approved.png diff --git a/src/pages/guides/publication/in-review.png b/src/pages/getting-started/publication/in-review.png similarity index 100% rename from src/pages/guides/publication/in-review.png rename to src/pages/getting-started/publication/in-review.png diff --git a/src/pages/guides/publication/index.md b/src/pages/getting-started/publication/index.md similarity index 100% rename from src/pages/guides/publication/index.md rename to src/pages/getting-started/publication/index.md diff --git a/src/pages/guides/publication/pending-review.png b/src/pages/getting-started/publication/pending-review.png similarity index 100% rename from src/pages/guides/publication/pending-review.png rename to src/pages/getting-started/publication/pending-review.png diff --git a/src/pages/guides/publication/request-for-approval-buttons.png b/src/pages/getting-started/publication/request-for-approval-buttons.png similarity index 100% rename from src/pages/guides/publication/request-for-approval-buttons.png rename to src/pages/getting-started/publication/request-for-approval-buttons.png diff --git a/src/pages/guides/publication/review-form.png b/src/pages/getting-started/publication/review-form.png similarity index 100% rename from src/pages/guides/publication/review-form.png rename to src/pages/getting-started/publication/review-form.png diff --git a/src/pages/guides/publication/status-approved.png b/src/pages/getting-started/publication/status-approved.png similarity index 100% rename from src/pages/guides/publication/status-approved.png rename to src/pages/getting-started/publication/status-approved.png diff --git a/src/pages/guides/index.md b/src/pages/guides/index.md deleted file mode 100644 index 2d6a03c5..00000000 --- a/src/pages/guides/index.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Guides - UI Extensibility -description: Learn what is UI Extensibility and navigate through guides -contributors: - - https://github.com/AdobeDocs/uix ---- - -# Guides - -The guides below provide you with general information regarding UI Extensibility. For detailed information regarding particular Adobe Service please see `Extensible Services`. - - - -[Get Access](get-access) - -Discover what is needed to start using UI Extensibility - - - -[Set Up Local Environment](local-environment) - -Prepare your local environment for UI extension development - - - -[Create a New Project](creating-project-in-dev-console) - -Discover how to create a project in Adobe Developer Console - - - -[Create a New Extension](development-flow) - -Know what to expect when creating a UI Extension - - - -[Local Preview](preview-extension-locally) - -Discover how to run UI extensions locally and preview result during development - - - -[Publish and Manage](publication) - -Learn to distribute and manage your extension for users diff --git a/src/pages/index.md b/src/pages/index.md index f60fd6ab..0ff9f0b9 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -20,65 +20,65 @@ UI extensions are JavaScript applications built with [Adobe App Builder](https:/ -## Getting Started +## Overview -[What Are UI Extensions](getting-started/app-builder) +[What Are UI Extensions](overview/app-builder) Understand the connection between UI Extensibility and App Builder -[Why Choose UI Extensibility](getting-started/reason) +[Why Choose UI Extensibility](overview/reason) Know why UI Extensibility may be a good solution for you -[How It Works](getting-started/design) +[How It Works](overview/design) Explore how UI Extensibility works -[FAQ](getting-started/faq) +[FAQ](overview/faq) Find answers to most frequent questions about UI Extensibility -## Guides +## Getting Started -[Get Access](guides/get-access) +[Get Access](getting-started/get-access) Discover what is needed to use UI Extensibility -[Set Up Local Environment](guides/local-environment) +[Set Up Local Environment](getting-started/local-environment) Prepare your local environment for UI extension development -[Create a New Project](guides/creating-project-in-dev-console) +[Create a New Project](getting-started/creating-project-in-dev-console) Discover how to create a project in Adobe Developer Console -[Create a New Extension](guides/development-flow) +[Create a New Extension](getting-started/development-flow) Know what to expect when creating a UI Extension -[Local Preview](guides/preview-extension-locally) +[Local Preview](getting-started/preview-extension-locally) Discover how to run UI extensions locally and preview result during development -[Publish and Manage](guides/publication) +[Publish and Manage](getting-started/publication) Learn to distribute and manage your extension for users diff --git a/src/pages/getting-started/app-builder/extensions.png b/src/pages/overview/app-builder/extensions.png similarity index 100% rename from src/pages/getting-started/app-builder/extensions.png rename to src/pages/overview/app-builder/extensions.png diff --git a/src/pages/getting-started/app-builder/index.md b/src/pages/overview/app-builder/index.md similarity index 100% rename from src/pages/getting-started/app-builder/index.md rename to src/pages/overview/app-builder/index.md diff --git a/src/pages/getting-started/app-builder/published-extension.png b/src/pages/overview/app-builder/published-extension.png similarity index 100% rename from src/pages/getting-started/app-builder/published-extension.png rename to src/pages/overview/app-builder/published-extension.png diff --git a/src/pages/getting-started/design/high-level-diagram.png b/src/pages/overview/design/high-level-diagram.png similarity index 100% rename from src/pages/getting-started/design/high-level-diagram.png rename to src/pages/overview/design/high-level-diagram.png diff --git a/src/pages/getting-started/design/index.md b/src/pages/overview/design/index.md similarity index 100% rename from src/pages/getting-started/design/index.md rename to src/pages/overview/design/index.md diff --git a/src/pages/getting-started/faq/index.md b/src/pages/overview/faq/index.md similarity index 100% rename from src/pages/getting-started/faq/index.md rename to src/pages/overview/faq/index.md diff --git a/src/pages/overview/index.md b/src/pages/overview/index.md new file mode 100644 index 00000000..8428c57b --- /dev/null +++ b/src/pages/overview/index.md @@ -0,0 +1,34 @@ +--- +title: Overview the UI Extensibility +description: Learn basics of UI Extensibility +contributors: + - https://github.com/AdobeDocs/uix +--- + +# Overview + +Begin your journey with UI Extensibility by exploring main capabilities and finding answers to your questions. + + + +[What Are UI Extensions](app-builder) + +Understand the connection between UI Extensibility and App Builder + + + +[Why Choose UI Extensibility](reason) + +Know why UI Extensibility may be a good solution for you + + + +[How It Works](design) + +Explore how UI Extensibility works + + + +[FAQ](faq) + +Find answers to most frequent questions about UI Extensibility diff --git a/src/pages/getting-started/reason/index.md b/src/pages/overview/reason/index.md similarity index 100% rename from src/pages/getting-started/reason/index.md rename to src/pages/overview/reason/index.md