Extension Manager for Adobe Experience Manager Sites

Transcript

Hello everyone, welcome back to Adobe Developers Live! I’m Karina Ladno and I’ve been working in tech for over 10 years, with the last three years focused on Adobe Experience Manager. Today, I’ll be talking about the latest addition to AAM as a cloud service extensibility suite – the Extension Manager. You’ll learn with me how to bring your customization to AAM as a cloud service with no need to redeploy the whole application. So, let’s get started! So, folks, this session is for developers working with AAM as a cloud service who want to personalize the authoring experience and add custom elements like paddles or extra tools to the interface. We’ll kick things off with a quick look at your extensibility options and the tools you can use under the hood to build your own extensions. I’ll also share a little bit of the backstory of how Extension Manager came to be and the key customer needs it solves. Next, we’ll dive into a live demo to show you how the Extension Manager works in action. And to wrap up, I’ll walk you through how you can scale your extensions by sharing and selling them across the Adobe Assistant opening up opportunity for monetization. Adobe Experience Manager has a long, successful history of delivering products and services that may be turned to any business needs. And traditionally, software was extended and customized by direct injection of the third-party modules and plugins into the codebase in a way that custom code became the integral part of the solution. Usually, the introduction of modification or customization requires full regression testing and redeployment of the system. This approach was pretty powerful and flexible, however, it has some drawbacks. First of all, it’s a tight integration between Adobe and custom code. Also, a big amount of custom code usually complicate and delay upgrades. And finally, each tenant has its instance and carries expenses related to its running and maintaining. So, when you think about adding or removing some button or field, it will require the redeployment of full application. And here, how we were thinking about UI extensibility, which was built as out of process, and ability to avoid these challenges. When I was thinking about use case, I can show you to demonstrate the power of UI extensibility. On top of my head was my recent conversation with this customer, who asked us if it’s possible to add or remove a button to rich text editor based on their content format model to help them guide their authors on their best practice of content creation. On this example, you can see rich text editor for recipe with rich text editor fields such as ingredients. And we want to restrict customers to use for this content fragment type, the tables. And this is something what we can achieve with UI extensibility. So let’s look how we get there. So first of all, what is a UI extension? Yeah, extension is a single page application built using Adobe Ad Builder framework. It bound and associated Adobe services UI for an AMS organization that owns the application, and it automatically loaded for all users within that AMS organization. At the end of the code, it uses React and Jamstack technologies, and it loaded within I3AM inside Adobe Experience Cloud. And as you know, your extension may implement client-side scripts that execute any logic without UI, own UI inside area defined by Adobe services and class but not list, server-side script hosted as Adobe Runtime Actions. As I mentioned before, Adobe Experience Manager is a solid product solution which satisfy a lot of business needs. But along the route, we can see that customers came to AM with many requests to add features to the codebase, but unfortunately or likely not all of them can be fulfilled because they are too specific and for the features to be approved for byte add-ins. And moreover, it may take more months for them to be released to production. So the challenges about unique experience customers might need bring Adobe to decide to add out-of-process extensibility to IAM as a cloud service. And in conjunction with App Builder, customers and partners can now build custom features and deploy them quickly. How can the extensible services in IAM, such as Content Fragment Admin Console and Content Fragment Editor, which make up our IAM headless offering and also Universal Editor, and the recent addition, this is IAM assets, which is available right now through the Extension Manager as well. Each of the services have predefined areas that can be extended by UI extension. Let’s talk a little bit how it works under the hood. So under the hood is an A-frame in each of these areas and the service makes call to Adobe App Registry to get a list of available App Builder applications. We will have filtering of this list of the service extension point and load the appropriate application within this A-frame. For example, UI extension can bring a custom button to the header menu within Content Fragment Admin. But it’s not enough just to beat the application. Let’s talk a little bit about the development lifecycle of UI extension as well. So the first step is to create this application based on the business need. Secondly, Adobe has several templates, which is available and you can bootstrap application to get started fees. And all UI extension use the UX SDK package, which is our UI extensibility toolkit for Experience Cloud apps, to establish a connection to the host application. Then you need to supply certain configuration files, which is where you will specify what service the extension extends. If you have .env file, this is also where you can specify that environment variables need to be passed as an input. And finally, when the extension is fully tested and ready, you can deploy it to App Builder console with the Adobe IOC ally. When extensibility was first rolled out, extensible service would filter App Registry for published extension, so it was necessary to submit the application for approval to your IAM organization system administrator through developer console. But once a system administrator approved it, the published extension would become available for use in the IAM organization. As I said before, after publishing, extension became available for everyone within organization for specific services. But we got feedback that’s not might work for everyone. And on this example, let’s think about real life examples. So we have a huge car manufacturer who has different part of the businesses for their production. So they have the separate website to sell vehicles, separate website to sell public transport vehicles. And finally, they have a separate website to sell some agricultural equipment. And all of these websites are hosted under the same IAM organization and represented as a separate program. And each of these programs might have the different environments. So it’s going to be available in production stage, developer, maybe even RDE environment. And once the extension is published, it’s available for everyone within organization. And for sure, some content authors within agricultural equipment might want to have integration with the inventory for this specific part of the business and don’t see the customization which was published for automobile. And the only way how you can achieve it, only with your extensibility, you need to hard code a lot of information about program environment, maybe URL to make decision within a moment of the UI extension initialization, if they should render it or not. And this is a big gap in the flexibility and extra work for developer to do this. And also it means if we, for example, build this logic within extension, it’s not possible to try it out for different environments if this need emerge. So as people started building UI extension, we started here more and more that it’s not enough only addability to add some functionality within IAM services, but they also want to have more flexible control about environments, this extension to be applied to and also configuration values. Because in the beginning, all configuration values in business logic about selection and applying for specific environment was a part of UI extension. And it means that you might need to duplicate business logic to change configuration within different environments. So we’ll listen to our customers and come up with an idea to simplify the extension management and configuration. And this is how the idea of extension manager was born. Extension manager provides ability to access and manage UI extension. Through it, you can access the full list of extension deployed within your organization and check the enablement status and configuration per environment. Moreover, we’re using extension manager to provide access to experimental features under the default by Adobe section. One need to wait for a new release to see the new addition to the IAM offering. And finally, one more cool feature – its ability to insert extension deployed outside of the IAM organization with no need to share the code. The only requirement that this single-patch application should use UX SDK, which allows to establish connection with the host applications. You will see this later on the demo. So, let’s do a quick look into the extension manager interface and explore the configuration feature. As you can see, we have a list of the environment for our program and also a list of the extension which is available. We can set up here the configuration for a specific environment with no need to do several redeployment. And the only things you need to specify in the extension manager interface is their specific key and its value. And now, let’s look at how we can access this value through the extension code. Extension has access to values users put through the extension manager and can use them during initialization in the iframe environment-specific. So, what does it mean if, for example, we have different values for stage and developer environment when the extension will be loaded within page, it will know what configuration values to load. So, no more need to redeploy application several times to specify you need configuration per environment. You can easily change it through the extension manager service. So, folks, it’s time for the fun stuff and I think it’s enough theory for now. And we can look how to access extension manager and use its main features. On the next couple minutes, you will see their hands-on experience on how to manage list of available buttons for rich text editor for specific content fragment model. I will use Bring Your Own Extension functionality, so you’re welcome to join me and we can try to enable it together. Before you can try, please make sure that there is couple to work with it, which is required for your environment to have. So first of all, you should have at least one content fragment model with fields that will be rendered as rich text editor and have fragments created with this, so we can see how extension is applied. And also, your organization should have access to extension manager, but if you don’t see it, no worries, you can go directly to the extension manager webpage and you will see the form, which will provide you guidance how can you access extension manager. On this slide, you can see link of the extension and also the configuration which we need to specify. And I will work you through this on the couple minutes. Okay folks, so it’s time for the live demo. First of all, let’s look where we can find Adobe Extension Manager. So you can go to the Experience Manager dashboard and click into the Experience Manager. And here is a title when you can find the extension manager. Let’s look into the extension manager dashboard. On the live site, you can see the list of the services available for my organization. And here you can see I am at the cloud service, which represents the headless solution with the universal editor also available. Let’s look into the details on the extension manager dashboard. As you can see, for my organization, I have 39 extensions available, also 10 of the extensions developed by Adobe and even five of them was implemented as a bring-your-own-extension functionality. We will look into this just in a couple seconds. The next section, which might be interested for developers, it’s a way to run some interactive demo and try out the extensions. So let’s try out this extension. After click onto the try button, you can select the program when you want to enable this extension with the environment. One more important thing, this extension is available for IAM content fragment admin functionality. And you can see the risk like buttons appear. You can see where it happened. After clicking the sample extension, you can see the list of the weather forecast for different areas in the United States. So all of this functionality implemented is a UI extension. And moreover, we can also experiment and see the list of available tools for extension. So let’s go back to the dashboard and explore what else we can find here. So here we also can find the extensions developed by Adobe. And moreover, you can click and try out a similar as a sample extension. So let’s do it for the generate variation extension. And by clicking on the try button, there is interface you’ve seen before, but important thing that this extension is available for the CF editor. So it means try it out. We need to open some of the content fragments from the list of available ones. So let’s do it. And by clicking and loading the extension, we can see right now new button is added. And by clicking on it, you will be redirected to generate variation app. So let’s go back and see what else is available. And there is this button we’re going to use in a couple seconds, which allows us to bring a new extension. But before we will do this, let’s look how the list of extension is playing in the tour environment. On the top of the screen, you can see the list of the extension developed by Adobe, which is applicable for these services. So here you can see extension point for CF admin and CF editor. For extension which requires configuration, you will see this badge. And by clicking on this badge, you can access the documentation where you can find the detailed information about required data to do to enable this extension. Also on there, the rest of the list is a list of the extension which is deployed within our IMS organization by developers. And you can see their status. So right now, all of them disabled. And at the bottom of the list, there is a bring your own extension functionality. We will try it right now. If you want to go with me, please check the details on the previous slide. And let’s click bring your own extension and see which data is required here. So first, you need to specify the URL of the extension you can find on the previous slide. Also you need to specify extension name. Please use the best judgment to make it human readable and understandable for users. And then let’s add the explanation what this extension gonna do. For us, it will manage the rich text editor button appearance. And the last part, but not least, is you need to specify the support URL, which might be useful for us in case if someone wanna do a check or something doesn’t work, they know whom they can reach out. And as you can see, we also need to check when this extension should be available. And this extension is supposed to work with the app editor. Yep. And let’s keep to the save button and see if this extension appears in the list of available extensions. As you can see, the list of available extension available on the bottom of the list. And we can check if this extension appears on our content fragment. As you can see, no changes so far. So first of all, we need to enable it and let’s check if it’s gonna apply any changes. Also no, because this extension, it requires configuration. And to do this, we need to specify two values, as you can see on previous slides. The first one, we need to specify the model path for which we want to apply some configuration. And I will show you where you can find this path a little bit later. And also we need to specify which buttons we want to remove. And we will do this as well. So let’s remove table, for example. And let’s go and check if this configuration was applied. Yep. As you can see, the table button is not available anymore. But as you remember, we also did it for a button for the specific content fragment model. And as you can see, the content fragment created using different content fragment models still has this button. And let’s do and check when you can find the content fragment model path. You need to navigate to the main page and go to the configuration. And here you can find the configuration about the content fragment models. And we will find the content fragment model we want to apply changes for. And you can find the URL path in the search menu. So everything after the config part of the path. So let’s look what we gonna do next. I hope you get an understanding what extension managing can bring to you. And let’s talk about our future plans. So first of all, we are actively working to bring UI-exibility support for more developer experience solutions. And likely you will see more offering in the future. Also we are working to improve user experience and make it easier to navigate within different features and programs and environments. And finally, it’s a little bit about scoping. As I mentioned in the beginning of the presentation, one of the Ask Your Extension Manager was born, its ability to add scoping when extensions should be displayed. And one more level of scope, it’s about provide the ability to display specific extension only for specific user or users group. So something what we are also looking to be added to extension manager in the future. And one more thing I want to share with you is how can you sell App Builder extensions through Adobe ecosystem. Last year, we added capability to distribute, acquire, and install App Builder application for our customers. The cool stuff for developers and technology partners that you can sell your application through Adobe Exchange without sharing code or need to install it to their code base. The deployment can be triggered through the Exchange user interface and no need for user to have access to code or have some zip archive to be able to deploy it to their IMS organization. If you want to learn more, please check Adobe Exchange technology partner page to see how to enable this program for you. So let’s wrap up what you learned today. Today you learned about extension manager and problems it solved such as environment specific extension and how we can update configuration without need to redeploy application. You learned about ecosystem and tools which utilize your extensibility and allow it to manage extension within organization or even distribute it across all Adobe ecosystem. If you want to learn more, there are couple resources you can check. So first of all, you can learn about your extensibility on the developer documentation portal. If you prefer to learn through the trying thing, we have a GitHub repository with extension code samples where you can see some real-life examples of extension built to satisfy customer business needs, something like adding new button, lower data to application. And we have this available for universal editor, content fragment admin and content fragment editor. And finally, here is a list of extension manager if you want to check if it’s available for your organization and maybe try demo. I did, I show it early today. If you still have some questions or want to give us feedback about what you can see as an opportunity or use cases which require some adjustment to extension manager or your extensibility, we’ll be happy to hear back from you. Please reach out to us through this email and we will try to do our best to assist you and answer the questions you have. Thank you everyone for spend this time with me and hope to see you next year and hear back about your feedback of extension manager and your extensibility. See ya. Bye-bye.