Introduction into UI Extensibility and the New Content Fragment UI

Transcript

Thanks everyone for joining. I’m super excited seeing so many people watching our small little show about the new UI and the extensibility. My name is Maximilian Vosk. I’m an engineering lead of a team which is focused on building editors and new headless UIs. And with me is Volodymyr.

You want to introduce yourself as well? Hello. Yes, would be glad to. I am engineering manager as well. And my team is looking how to extend and customize Adobe experience management solutions with microservices built with Adobe Upbuilder.

Thank you very much. So it’s all about the new content fragment UI. It’s all about UI extensibility. Kuda, you’re going to see what is that new content fragment UI all about? What is behind the scenes? How does it work roughly? Why you should be excited about the new UI? And of course, I think, and that’s the biggest part, you’re going to learn how to extend that new content fragment UI.

So you have seen, hopefully in the keynotes that new UI, it was introduced by Michael Mark. It’s also like it’s built in React. We make IEM headless also for our UIs. It’s fast. It’s very nice to see it’s based on something we call React Spectrum. React Spectrum is an open source library with let’s say a lot of components. Now you’re going to see that UI live in the just couple of minutes. But let’s quickly have a look into the building blocks of that UI.

So in general, that UI is living in something we call the unified shell. So whenever you’re entering experience Adobe.com with our cloud solutions, you’re in that, let’s say unified system. It takes care of your login of your different, let’s say applications. You’re eligible to use. And it’s actually the frame where our content fragment UI is living in.

What does that mean in particular? It’s a multi-tenant UI. So everybody is going to see the same UI, except if there are some extensions.

That UI is under the hood or let’s say in the background connected to your IEM instance, which means your data is still siloed in your IEM cloud service instance. So there’s no common platform for everybody. That’s a common platform for everybody. It’s really your instance and that UI is routing all requests or whatever call it needs to patch a content fragments through let’s say APIs to your IEM instance. I think that should be clear. So, and what does that actually mean for you? First of all, we have with an IEM, we’re going to define an API layer. So for all content fragment actions, we’re going to have a unified API, which is also going to be GA’d at some point of time. So, which means like you can access the backend system as you wish. The good thing is also the UI itself is going to be independent of the IEM release cycle, which means we can roll out new UI and we can roll out which means we can roll out new UI features, enhancements, improvements, let’s say just by a click, obviously with a little testing and making sure everything works, but we are a lot quicker and you will see new features rolled out very fast, new improvements. And I think it’s a benefit for every one of us.

Then also what is very important, I think for a lot of you developers, whenever you have to do some updates to the Coral UI. So whenever you did some changes to, let’s say the old UI, you introduce new buttons, you introduce some overlays. Whenever there was a service pack, it was very painful to also adapt this. With that, it’s going to be easier because we’re going to have, let’s say a multi-tenant UI, you’re going to have certain extension points. And your IEM instance is completely independent of that UI. Almost. What it also means when you have to adapt something, you have to do it differently and that’s something you’re going to see in just a couple of minutes.

So talking about the extension itself, how to work in a nutshell, or let’s say as a pattern.

So we have something we call the App Builder. In the App Builder that extension is going to lift. How that’s going to work, you’re going to see. Then for like when you want to start building such an extension, there’s the Adobe IOs CLI with an extension template, which is helping you to kickstart that implementation, you can deploy them to App Builder and it can work with your APIs as well as with our APIs. Then just to, let’s say, round the picture, how that works on our side or within the UI, the CommentFragment UI has defined extension points. Then extension points is a definition. For example, you can add an additional button into the menu, for example, and that’s a defined extension point. And you can tie your extension exactly to that extension point. And then you do that modification as you need that. So I would say it’s demo time. Volodymyr.

Thank you. Thank you, Max. Let me share my screen and we’ll begin.

Okay. So it’s better once time see and even better when done touch with hands and just hear about something. So let’s explore what we can actually extend and how to do this. So to be able to create UI extensions for ContentFragment console, you actually will need two things. First of all, access to ContentFragment console and the tool with, if you’re running your IAM instance as a cloud service and up to date ContentFragment should be already available for you. You may start directly from your IAM instance by clicking on ContentFragment and it will allow the experience ContentFragment admin application inside the experience shell. So at this moment we provided, we implemented the extensibility for two most common and most basic use cases. This use case when the business organization wants to have some additional actions not related directly to the existing content fragments, for example, that may be importing new content fragments from remote service or just opening a website or applications that utilize those content fragments. And for this use case, we provide the extensibility extension point for header menu for this area. This allows to add more buttons and interact with the user and interact with other APIs and some and other services API. Another one use case is actually when we want to introduce some new actions related to already existed content fragments. So for example, we can export content fragments to other system, or for example in our instance, we already have one extension installed which is called Manage Language Copies and these extensions allows us to search for references for language copies of the content fragments and then publish them. So it’s easy for users to find all the translation and publish them at the same time.

In addition to those basic scenarios, basic extension points, we also have a model dialogue which is just you saw, which allows UI extensions to render any content they need to solve the task. UI extensions implemented in a way that they are fully secure, so no third-party code is executed inside content fragment admin console directly. All the third-party code executed in isolated iframes, so it’s pretty secure to use. Okay, so now we just described the extension points that we have and the question how the user may explore them and the standard answer for that question is to use documentation.

So far documentation for your extensibility available at developers.com site, you may find the answers for the most common questions, just get know what is your extensibility and how it works, some more generic guides and overviews what you may expect from the development flow and for managing UI extensions and as well documentation dedicated to content fragment console, content fragment admin service with more precise focus on the this service and its extension points, how it may be used and how you can run it.

But let’s do something with our hands. For this, first of all, we need to define what we actually can do and as a demo example, I propose to implement export features that will take one or multiple content fragments selected by the user and send information about it to the Slack, so it might be good options for sharing some ideas, some contents with teammates and later it may be involved in something more cool and interactive as Slack has interactive messaging API, so it will be easier even in future at some publish or approve buttons that will trigger some workflows inside AM. So let’s do this and with this let’s switch to another part of what we need, it’s actually tooling. So to be able to write your extension, users need to have the access to app builder and to gain this access, app builder should be provisioned to the organization where this developer belongs and this user needs to have the or user needs to have the developer role for any IAM instance or for directly for app builder product. So far in our MS organization we have this capability provisioned and if you don’t have, you may request trial today just from the app builder documentation page. So we need to start our journey by creating our project from the beginning, so for that we’ll go to the developer console which is available directly from the developers portal and here we will need to create the project from template and we’ll call our project send to Slack. We will use the same app name just for consistency and we’ll click save, that’s easy. And after this we’ll have our script running and the project is created actually and the main purpose of project creation in dev console is actually provision all necessary resources in Adobe infrastructure in the cloud that is maybe utilized to building applications. So far we can see that we have two workspaces production and stage and both of these four paper workspaces have underlying resources needed for development. For example we provide runtime, Adobe IO runtime which is serverless platform for executing code.

Okay now when we created this product and all the necessary resources was provisioned for us we can actually switch to coding and start our project. For this I will open my developer console and let’s talk a little bit what developers need to have locally to create UI extensions. It’s not that much, first of all user will need to have installed Node.js and this is actually everything that user will work directly and this is only I would say hard requirements from our side and as well as a helper tool user will need to install IO CLI tool which simplifies interaction with Adobe infrastructure. I already have it installed if you don’t have it’s easy to do with npm install global adobe iocli but I already have this so let’s proceed to actually project creation or project initializer in acceleration. So for this I will run iop-init and we write connection from the adobe so I am now using sites internal organization now the tooling will request that all the capabilities that our organization have including checking what API is accessible and what is not and now it’s offer to choose the projects that we actually going to implement. I will choose send to slack the project that we just created.

Now we have the new step that was recently introduced in adobe iocli and it’s offer to use template. Template is a new mechanism for iocli that allows to simplify flow creation of the application dedicated to some target as we some specific use case as our use case is your extension we will choose all extensions points and here we will find the extensibility template for iam content fragment console which is actually what we are going to do. We will choose this template and we will start after this selection iocli tool actually will fetch all the necessary packages and automatically start the template for execution. We will just template this focus on three personas or three levels of developers who might use this tool or who might try to create the UI extensions. First of all is a new user who just starting to explore and actually don’t know what is available and what is possible to do with tooling. Another level is actually users who knows what to do but wants just a little bit guidance and help with boilerplate code or standard code that is required to make all pieces connected together and the next level is experts that know the all the mechanism on the lower level and so want to have the full control and change things as they go. So far templates ask our several generic questions. So ask them our application extension called send to slack, short description, export content to slack and version 0.0.1. So after this actually the most interesting part begin. So template ask what actually we’re going to do and how the template may help us to do touch available. So if we are new users we probably don’t know actually what we are going to do so the most straightforward selection would be I don’t know if we’ll choose this we can we’ll start over Mrs.

right menu item okay so and select okay I don’t know find some help if you’ll choose it it’s actually display the link to documentation with the time we will add more and more resources that allows to find the answers and help for users who try to do this in first time. Another interesting option is try a demo project and this option will generate all the code from the scratch and you will get the fully functional UI extension which will be which will provide as well slack import export functionality much more richer than we’ll develop today but so far we’ll go back and talk a little bit what will go and what will happen if we just initially hit the I’m done. So the most experienced users may just proceed to I’m done option and have the minimal code generation available for them just to install all the necessary SDKs and have full control of what install what not to install as a dependency and how to write the extension but for most use cases we recommend to stick to the default files organization so for that you sense we’ll use options we have above two main extension point for action bar and header menu represented here as an option as we are going to export existing content fragment we’ll use action bar extension point we’ll name the button as well send to slack and we will want to use some model dialogue for more interaction with the user so we’ll say yes for this question and well we’ll need some additional server-side handler which we’ll discuss a little bit later so I will choose this option server-side yes and we’ll call this export at this point we declared all the resources or entities that we need and we ready to hit I’m done okay so live demo issues let’s try to start over so it was planned so just to better remember the steps needed to generate extension yeah but actually it’s a very easy way to go forward building your app isn’t it uh yes uh yes and usually it’s uh straightforward I believe that the issues that I have is just caused by the fact that I first time hit the wrong menu item so there was some already available code and as we is just on our stage and all the better we just probably not handled the well with emergent call the code send to slack please provide short description export content fragments to slack uh what version would yeah version works for me I want action bar you should call it send to slack with model dialogue and with server-side handler uh and I hope I am done yeah seems like everything works better this time you may see the manifest of our selections what we choose we choose one button for action bar with model dialogue and one server-side action now iosli to install all the dependencies and while it’s going on let’s discuss what we have already so far so as a result of code generation process we’ll have the typical builder application structure a couple which which is a javascript application a lot of already common files like bible configuration packages and so on just configuration most interesting things here dot io file which contains a configuration of projects that we created on first up and linked to all resources that we have created for that project and as well the end file that includes the information about the where what resources we need we made to use during our deployment process and as well provide possibility to specify additional parameters that we want to pass to our application so now this this means actually like we took to developer console the adobe iocli and we took a template in the iocli which then created our bootstrap for our new extension right yeah exactly exactly that’s that’s what we do so so far we just follow with the pretty straightforward instruction and what is great that at this moment if you just try and run io up run to run our application locally in development mode we’ll already have actually working solution and work work in ui extension we’ll wait a little bit while the application started and when i started it provides a couple uh URLs we interested in this application URL our recommendation is to try to open a source in a browser because for local development uh certificate we generate self-signed certificates so you may need to accept it so and browser will not block the request i’ve already accepted the certificate we can try to use this application with our production environment for this uh proposal just need to add a couple more get parameters to our application so we’ll write dev mode true to instruct experiential that it’s okay to connect to local host and a little bit soften uh cross origin request policies and now we’ll uh as well specify the source or endpoint of the extensions that we want to check so let’s load the application with new parameters let’s select some fragment and we see that we have the button sent to slack and it opens the model so let’s look how it’s uh work uh internally how it’s implemented while we don’t have a lot of custom code so those are configuration files we considered and uh all the source files go to amcf console admin version one handle and inside it it’s pretty typical app builder application structure so we have actions folder for our server side codes that we will serve at runtime with serverless functions and we have web source that represent our front end part here is the main interesting things going for your extensions there is a couple required files you always will have up js file which provide react road and the only required thing here is extension registration the part of the application that is responsible to explain to the host of the application to the cf admin content fragment admin service what capabilities is implemented by extension to establish communication and make this can change so this goes to extension registration file if extension need any custom ui like we do with uh our model dialogue we’ll need to register one more piece of our application of our one more road for our application for each ui that we want to have let’s take a look at the extension registration file and what is interesting over there so here’s the the only required part is actually importing your extensibility sdk which to connect to the host this method returns the gas connection and allows to declare what actually is used by the extension so here we saying that we use action bar which has the get button returning the declaration of the button and returning on click methods which do something and it’s actually will trigger opening new ui with this url at which as we know from the routing declaration will go will lead to this uh component that actually implement pretty straightforward react application uh both parts uh like in this uh in this implementation react track spectrum is fully optional and may be replaced by any technology technologies that developer prefers the only requirements is to use uh ux guest library to properly communicate with the adobe service and interact with it so far this is basic implementation and that was provided by the code generation so it’s even it’s work so it’s a good time just to commit something we’ll go here here stage our changes except the prepared custom code file and we’ll say that this is auto-generated code okay and now we actually let’s apply prepared changes so just to see how the custom logic may be implemented and what custom logic may be implemented and what usually may requires from the developer to complete the task so in this in our case we modified several files we modified packages zone just to inject the spectrum icons workflow and because of this i will run npm install just to ensure the package is already presented as well we modified the extension console extension config.yml and this very important part as we are going to implement the applications that interact with slack and send the messages to slack we will need somehow to store the secret webhook that’s specify application where to connect and how to connect to slack it is recommended to use deployment parameters which is declared as a part of server side function and may be specified in environment configuration and that was the main reason why i introduced the server side function because this is a secure way how to establish interaction have some secrets with connection credentials and not expose them to the client side which may be hijacked and used by malicious users and so the next the most interesting part of course going to extension registration send to slack model and up.js files so let’s let’s open them here and review what what was changed so an extension registration file as you can see everything is goes directly from the code generation i just made this a couple of changes to the how we form create the parameters that we used to build the url and the name of the parameter as i renamed the parameter in the url path i as well updated the routing declaration just to reflect this change and then there is a little bit more changes in model implementation so actually typical react application implementation we use effect to send that to decrypt again method data provided in url then we create a list of tasks for publications that we want to use and we start in parallel couple functions that trigger requests to them to the remote service or to our backend action here the main interesting points for us is action web invoke this is guilty methods that provided by app builder and simplifies the invocation of a builder server side application and here’s a guest connection shared context object access object access that we use to get some data from the content fragment service provided for us so here we use get the information about im host user and the authorization credentials so we can make a request to them im instance from the name of the after and if you take a look at briefly at the server side action it’s as well have minor changes according from what was what was automatically generated and we here create the query to im graph ql service we made this query to fetch the full information about the content fragment and then we use this information to send to slack so implementation is straightforward and maybe in for production application it needs more errors handling but for demo purposes we so far good and the last change that we need to do before launch our application is actually provides the secrets and the deployment parameters that we use that we allow us to connect to slack so we have those parameters required from us and we have configuration for all the created application so that should be enough hopefully everything uh fine this time and before going anywhere we are actually need to check if everything work works fine so we’ll again run io up run to start our application taken for response url is not changed so we just can uh reload our application by the way reloading is not truly necessary we just proceed but anyway so we can use some select couple content fragments that we want to check or want to share and try to hit sense send to slack button we see that spinners are working there’s something going on and yes we see that slack now has information about a couple of our content fragments okay so our application at this point is actually done but it’s available only for us in development mode and at this i just want to highlight that so far for development purpose we use production service of im of im content fragment console content fragment admin as the same multi-tenant users that at this moment use it by any any user we also have the get parameter repos that specified to which im instance we should be connected so this gives flexibility for developer to choose what data should be maybe used during the development and at the same time check the extension in fully working fully production environment without requirements to deploy or replicate any service adobe services locally so at this moment we are done and it’s time to share our application visible so so for this first of all we will need to switch to production workspace and i will check data so we will merge configuration because in dot n file we created our secrets so we don’t want to override them but for io file we can override because we actually about to use a new workspace and with this you can start deployment to production so iocli will build the production bundle will deploy it to the our front-end part to cdn and deploy our backend action to io runtime so it may be used publicly and now we have the a couple more more URLs that say in where is our application was deployed after this the application is not really yet available for for usage and there is one two more steps left to make it accessible once application is deployed we have the submit for approval button which allows request publication of our application so we’ll fill some data and we are ready to submit so with these actions uh role of the of the developer is over and now the uh the admin of the organization can log into the adobe exchange portal and on the manage button see all the pending applications that pending approval it’s easy to give the proof and after this this extension is published once the extension is published parameters is not really necessary so this extension became publicly available available for all users of this organization let’s check and see yes it’s working on production and available for all users so that’s all hope we’ll have some time for a couple questions so thank you very much for letting me uh actually there’s not so much time for questions left because we are already hitting the end of the hour um just a quick recap about a couple things so in that session you should have learned what is all about that new ui how does it like let’s say how does it live in the ecosystem that it’s a multi-tenant ui you still have your single tenant am instances but it’s one ui for all it brings a lot of benefits to everyone to us we can roll out things easier and for you you get the newest features every um let’s say single day and of course there are extension points which will enable you at the end to always implement against the fixed interface regardless of what is going to happen in the ui um why does that not work okay um there were in the pod a couple question i just want to um take two out of that at the moment like one question is is that available for on-premise customers so the answer is not at the moment there are plans to support this as well uh but we don’t have a timeline at the moment so it’s only for uh am cloud service customers and you will see that new ui um actually with the next up um or with the next release then the other question was like do we plan to retire coral ui not at the moment uh because we have a lot of on-premise customers we don’t have their plan nevertheless um there’s the idea that we um make all our aem capabilities available in the new ui so that we have a common you can feel i think that’s it um thank you very much for joining have a wonderful day or evening and um talk to you soon all right thank you bye