AEM GEMs feature - Customer Use Case & Implementation of AEM Headless in Use

Transcript

Okay, Deva, the recording is on. Please feel free to start. Sure, Goran. Hi, Goran. Hi, Kautak. My name is Debal Das and I’m working as an EM developer in IBM. So please allow me to share my screen first. Just let me know whether my screen is visible or not. Yes, it is, Deva. Thank you. Great. Hello, everyone. So here I’m going to discuss how could we deliver this headless content to GraphQL API. So I have for the demo purpose, I have implemented the very basic. I have implemented a very basic POC. I have done on very basic POC. So that is the one thing. Now, in this discussion, I’m going to cover these many topics. These are my agenda. Like the first one is the content delivery and management, followed by content fragment models, content fragment, GraphQL, Persistent query, consume GraphQL API, data from external system. How could we consume GraphQL API data from external system? Then query performance. I’ll talk about the query performance. How could we get that information from the EM instance? And yeah, so and the last one is the headless EM GraphQL API demo. So while discussing each and every topic, definitely what I’ll do, simultaneously I’ll show the demo. I’ll give you a walkthrough of my EM instance. Exactly where I have created this content fragment, content fragment, content fragment models, content fragment, GraphQL. Exactly where these persistent queries are getting stored. So all the information I’ll be sharing that one. Now, moving to the third slide. Debra, just a question. Do you want to switch to presenter mode? Yeah, perfect. Thank you. So now if I talk about the headless content, normally the first thing comes to our mind is the data, data without design. Now, to have, to implement the headless content, headless content one. So we’ll be happy in EM. EM provides the content fragment features. So using that content fragment features, we can create the content. So normally it’s a reusable content. All of us, we are aware of that one. And after that, once we create that content, content using the via content fragment, then we can expose this content to a different channels for the different channels. Like here I have highlighted that you can expose this content to the single page application, then mobile apps and any other application, any other applications as well. Now, here I’ll be focusing or I’ll be discussing only one approach called GraphQL. So that is my agenda here. So here I have highlighted. So these are the different channels I have. And my plan is to once I create this headless content via content fragment. So using the GraphQL, I’ll be how could I expose this content for to the different channels? So this is the first thing now. Now, if I talk about the headless content like and if I want to create a headless content by content fragments now, then what is the first thing I need? So, yeah. Now, here, if I talk about the first thing I need, that is the content fragment model. Now, then what is the content fragment model? So content fragment model is nothing but I’ll give you some basic idea, basic idea that it defines the structure of content for content fragments, because when I’ll be creating the content fragment. So what time what are the different types of data will be part of this content fragment? And what are the different types of data I’ll be exposing to that different application if that different application is expecting some sort of data from AMN. So here definitely I’ll be first thing I have to do, I have to define a content fragment model. And now here you could see that, as I have mentioned, that I’m just I have created a very basic, very simple example. I’m giving a very simple example. So my content fragment model is having four different fields, one, three different text field for first name, last name, email ID, and the last one is that number, number that. And yeah, so once I have this content fragment model, so using this content fragment model, what I can do, I can create as many content fragments. Now, here, one more thing is that then what would be if I talk about one thing like what is the relationship between this content fragment model and the content fragment, it’s a one to many mapping. That is one using that one content fragment model, I can create multiple content fragments based on my requirement and each and every content fragment will be having this assumption that that employees specific data. Now, that is the one thing I have highlighted here. Now, once I create the content fragment model, then so here you could see that I have defined this, that relationship between that content fragment and content fragment model, then content fragment model, then the next point I’ll be discussing, then what are the different options I have to expose this content fragment model to the third party system. Now, we do have multiple options we could see in AEM and I believe each and every project based on the requirement they are leveraging or they are developing using the different options. So now I’ll be focused, as I have mentioned that I’ll be focusing on the GraphQL section because of the GraphQL part. So GraphQL has certain advantage over a certain advantage in well to expose this content, this headless content to the different applications. So that is the agenda I have. Now, so here you could see that, then what, then how could you validate once I create the content fragment model, how could we expose? So you via the GraphQL. Now, if I talk about the GraphQL, always we think about that the GraphQL is a query language, is associated with the API. If I once we think about the queries, then we always think of, so a couple of points normally comes to our mind, like the syntax, like what are the different options are available in the query. So in GraphQL, we could see, yes, we have certain options to expose that, to get the data or re-fetch the data based on the specific requirement that is also possible. And GraphQL, one more thing is that it avoids the iterative API call. So this is the one of the key point normally GraphQL offers, because if we do the iterative API calls, normally that call, it will increase that AM load on the AM instance also. So that is the one thing we could see. Now to avoid, to reduce the load, so what we can do, we can go, we can leverage these GraphQL options. Now, now, but from that one, if I talk about the, now, if I had to validate my query, normally what we can do, we can, GraphQL normally, it offers one interface, here you could see that I have just highlighted that interface. Now here I have given one example, to, and in that example I’ve highlighted that I want to retrieve the list of employees with all these details. So here I just mentioned the employee list, and here you could see that I have highlighted then what are the items or attributes associated with each and every employee I want to fetch. So here I, and once I execute the query, I could see that, okay, the first name, last name, email ID, employee ID, all these informations I am able to read using this query. Now in GraphQL, yes, we have different option if I want to read details about a specific employee, that is also possible. And we’ll be, I’ll show you, I’ll give you the, I’ll show you that one in my demos also in my demo. Now if I move to the next slide, here we could see that I have highlighted one curl command. Now before talk about this curl command, I’d like to talk about the persistent query here. Now, when we heard, when we heard, hear about the term called persist, persistence or persist something, so we’ll, we’ll, we always, one, one key point comes to mind, comes to our mind is exactly where we are storing certain, are we going to store any information? Now, if yes, then what will be, what would be my storage element? Exactly where I’m going to persist that persist certain information. Now here, and here we are talking about the persisted queries also. Now, persisted query has certain advantage also, I’ll talk about that one. But exactly where now for that, now the question will come exactly where I am storing this, where, where I’m exactly, I’m going to store this query. Now, yes, am we can store this information to am repository and here exactly, yes, we are going to store these queries into our am instance. Now then I’ll be showing exactly where this information will be stored once I execute this query. Now to execute this query here, you could see that I have execute this query. I have executed this query from the command prompt. Now, to now it means that I am executing, I am executing this query outside am instance physically if I talk about that. Now, then definitely some sort of authentication would be required. Now here I have used the basic authentication, because I’m dealing with my local am instance so I have highlighted in the call command you could see that admin admin password, then put. So, I mentioned that what kinds of request I’m going to perform that I’m executing the put request here. So here, actually my plan is to, to create a persisting persisted query so that it will get stored into my am instance. So that is the reason I have, I have clearly highlighted that is that request should be a put request. And here, here you could see that I’m, I have mentioned about that my, I have given certain information about my, that am instance exactly where the port number of the am instance, and that then followed by slash GraphQL slash persist.json. Now, if I talk about this GraphQL slash GraphQL slash persist.json. This is nothing but it is talking, it is talking, or I would say it is referring the action what type of action I’m going to perform here. Now, as I’m, I’m planning to persist my queries, so that it means that I’m going to perform the persist operation or some store operation or you can consider it’s a create or create or action I’m going to perform. Now, then followed by the site name. So here, I’m dealing with the global endpoint. So that’s why I just for example, I’m dealing with the global endpoint. So my site is global, and followed by the query name. Yes, I’m dealing with it. I’m my plan is to store that employee create a story stored that store the query associated with employees, employee, employee employees, what are how many if I create a multiple query content fragment, or I would say the one content fragment associated for employees. So my plan is to, to create a persistent query, so that later I can retrieve that complete employee list. Okay, so, so that is the reason I have given a meaningful name called employee list, and followed by here, I had just mentioned the employee list, then items and in the items, the first name, last name, employee ID, email ID, employee ID, type name and path I just I have mentioned. Now, if we take a look into the schema, if I in the curly braces, whatever I have mentioned, like employee list items, and in the inside the items, we I have mentioned the certain attributes. So these are nothing but define the schema of that query. Now, after once we execute the query, so what would be happened there, as I have highlighted that, okay, I’m planning I’m, I’m performing the create operation. So here, create action, I’m executing the create action. So in that action, you could see that it is made it is high, the create that what create has been highlighted here. And the configuration is nothing but my site name, followed by name, the query name, employee list, and the short path short path, yes, it will be required later. And this is the place path slash conf global settings GraphQL, persistent queries under the persistent query, that employee list, this is the query name, we are using. So here, this information, this query is going to be persisted into a GM repository. So this is all about the persistent queries. Now, okay, I have created a persistent query, then what is the advantage we are talking I’m talking about the persistent query, all these things, then what is the advantage? Definitely, this point will come to our mind. Now. Now, once we have this persistent query, it has it’s a very, very, very, very, very, very, very, very, very runs the running of the warehouse. Okay. Okay. Kylie?''s I’m sorry. Debal, it seems like we lost you. I can’t hear you anymore. Debal, are you still here? Debal, we lost your audio. I would suggest to rejoin the session via browser. Goran, is it audible on my side? Yeah, great. Hi, Venkatesh. Glad that worked. Thanks that you were able to fix it. Now let’s have Debal fix his issue. Ladies and gentlemen, please wait a moment until Debal will rejoin. In the meantime, I would like to inform you that we have an Adobe Developers Live event coming up on November 9th, and that will be a full day of Headless conference. So please check that out. I will post a link shortly into the general chat. Oh, thank you, Khatuk. You already added the link. Yeah, please check it out. One day of full conference of Headless. And this is Adobe Developers Live event on November 9th. Debal is not back yet. We’re still waiting for him. Hi, Debal. Welcome back. Can you hear me? Yes. I’m really sorry that my system got restarted. Oh, no problem. Please go ahead. Just let me know my screen is visible. Not yet. Is it visible now? No, it is visible. Okay. Hello. Please accept my sincere apology for this issue. No worries. Thanks. Okay. Now, exactly where I was. So I was talking about a persistent query and its advantage. Now, yes, I have executed the query and the query has got persisted into a repository. Now what next? Then what would be that advantage? Now, persistent query, if we’re talking about that advantage of persistent query, we can see, we can observe this advantage when the client sends queries at GET request. Because I have stored that query now, definitely that other application or just imagine that the client, they need to regain the data if they want to rephrase the data. So in that case, what would happen? They will send a GET request from the client in. They will make a GET request to retrieve the data. And here actually, we can enable the caching. We can enable the caching while doing this HTTP GET request at the serial level also. So once we enable that cache configuration, I will say that caching feature, then we can see that we can definitely will be observing that advantage while making this client-side GET request. So that is the one thing. Now in the next slide, here you could see that exactly I have highlighted that AME repository where this my query is getting stored in AME repository. Yes, we can, if I have another query, once I execute the query, after that we could see that under the same panet node called persistent query, this one more node will be created associated with another query. So I’ll be showing you in, I’ll give you the details also. Now, okay, I’m done with this, the persistent query part. Now I want to read that query. If the client, just imagine that client, they want to freeze that information from AME. Now what, just for demo purpose, what I did, I have highlighted the cURL command. In the cURL command, yes, again, I have, I’m trying with the basic authentication that is admin admin. Now here you could see that now that if I take a look into this, the URL, after GraphQL, we could see the execute JSON. Now here the action got changed, gets changed. Now here I want to, my plan is to execute the query to get the data. So that is the reason my action here has got changed. Earlier it was persistent, now it is execute. Now again, I have highlighted slash global, that is site name and what is the query? Because I want to, we have to clearly highlight, this is the query I want to highlight and using that one, I want to retrieve the data. Now here you could see the next line, the data, entire data, the entire employee list is getting displayed with all its attributes. What are the attributes I have stored in my, using my previous query? So that is the one thing. Now if I move to the next one, now here, okay, I’m done with this part. Now just, now we have to understand that, okay, we have the downstream application, the downstream application, they are planning to consume all this data. Now the times, just see, we can imagine the downstream employee application, it was running on the different domain itself, if I consider in this way. Now, now they are planning to fetch the data from AM. So they will be sending the gate with this as if my AM author, not AM author, if my AM author, not AM author, not AM author, not AM author. And if that downstream application, if both are running on the different domain, so in, so in that case we might see some cross issue. Now in AM we do have out of the box configuration, using that out of the box configuration we can allow that specific domain to allow the specific domain. Once that domain, once a specific domain is trying to get the data, trying to get the data from AM instance, so that is also possible. Now in the next slide, I have highlighted, okay, just in my, I’m just, I have highlighted that what levels of configuration we have to do, we have to do at AM level. Now as AM provides some out of the box configuration, that is AdoptGranite cross origin resource sharing policy. So here, if I want to allow a specific domain, I’m just considering, okay, we have this entire GraphQL set up in my production. Now I definitely, it is recommended advisable or recommended to allow a specific domain. If I allow star asterisk CU to be a security threat. So that is the reason I’m just assuming that this is my, some imaginary domain that is HTTPS www.mysite.com I have highlighted. Now allowed paths. Now here, the slash contents CQ, underscore CQ GraphQL global endpoints. So this is the global endpoint we have mentioned, because they, once they try to get the, read the data, read the data from our, from AM instance. So they’ll be using the specific, this endpoint. And the execute query, I’m just assuming that they are trying to, they only, they are planning to, the downstream application, just they are planning to read the data from AM instance. Yes. If they want, they can, not they want, we can, if you, if you want, we can, to modify or I would say the update that our persistent query, yes, we can do initiate the post request and using the post request, we can update the persistent query. That is also possible. So here I have highlighted the allowed path section. So these are the entries we have to do at AM level. In the next one, next section, slide, I have mentioned that, okay, what is the allowed host? So we have to add in the referral filter section. So yes, we are, we already know that this is the specific domain we have to allow. So in the allow host section, I have highlighted my specific domain. Okay. So these are the configuration we have to perform to consume the GraphQL API data from external system. That is, I’m just considering that external system as a downstream application. Now if I move to next slide, here we could see that, okay, certain things we can, we can measure. Like, for example, when you talk about the queries, just imagine that, okay, we have different options, AM query builder query, JCR SQL query query, and all these things, we always think about the performance of that query. Now do, so this GraphQL query definitely is a different thing, but do you have anything in AM that AM offers kind of out of the box feature using that one, we can measure, capture the runtime performance statistics in a, of GraphQL. Yes, we do have out of the box feature in AM. So I’ll be sharing that link also. So using that link, we can read those data, runtime data, and it, this data represent the total number of requests that has received. So that is also possible at AM level. So yeah, now I’d like to show you certain things at AM of my AM instance. Now, Debal, just one second. Just wanted to remind you of the time. We are a bit delayed and we can, I mean, week since we will record the session, we will have a few more minutes after the full hour, but just to remind you of the time. Yeah, sure. So, Gaurav, I can go ahead and I can show the demo of my AM instance, right? Yes, please. So now to execute here, just give me one more second. So I’d like to give you certain details about my AM system instance. So here I’m just dealing with, I’m using AM 6.5.12, and to prepare for this demo, so here I have installed one GraphQL. This is the package I have installed. So after installing the package, what will be happen? Here I’ll be getting this GraphQL interface and using this interface, I could execute my queries. So that is the one thing I’d like to highlight here. Now here you could see that, okay, I have one query and if I, here you could see that from the name of the query, you can easily understand that I want to retrieve that complete employee list and each and every content fragments normally represents that employee data here. So this is the information is getting displayed here. Now I’d like to talk about a few more different queries as well. Just imagine that I want to retrieve, I want to read the data about one specific employee, for example, employee, because the content fragment associated with this employee, it has been stored under slash content, dam and digital assets path. Now once I execute this query, because in the query I just mentioned about employee by path, so it means that, okay, this is the content fragment I have and that content fragment has been stored under specific path, it is available in a specific path, location inside the dam. So now if I execute that one, it will be giving the information about Sachin Tendulkar, the employee name Sachin Tendulkar here. So that is the one thing. Now I’d like to talk about if I want to retrieve the data associated with specific based on certain filter, because in query, if I talk or compare, just I’m trying to create analogy between that database SQL. So in database SQL, we can add predicates like where name equals something, for example, employee equals table. So in that case, it will be giving me the data about table. So here you could see that after executing this query, it is called filter here, we can do that, we can do the filtering also, that is also possible. Now then, earlier I was talking about, okay, now I’d like to highlight a few more things here. So here I have highlighted the queries, what are the put request and get request to store that information, to store the query in my repository. Now just to show you one thing, just imagine, just to test, just to hit, let me change the name of this query. And simultaneously, I’d like to show you that path, global settings, GraphQL, persistent query. Now here you could see that employee one and employee list. Earlier I have created. Now if I create, once I execute this query, then let’s see whether my query is getting persisted or not. Now here you could see that the action, it’s showing action create, and we can see the other details also. Now if I refresh this node here, now let’s see whether, yeah, here you could see that employee list, this is the new, another query has been persisted into my repository. So this is the one thing we could see here. Now if I need to read, just give me one second. The list of persisted query, if I have to know the list of persisted query, phase the data for my EEM instance. So what I can do, this is the query I can use. Yes, I’m making the get request here, and this is the GraphQL or list.json. So you can consider this is another action I’m going to perform. So once I execute, now here you could see that all the details has been, all the details is available here. Now you could see the new one, newly created persisted queries are also available in my list. So that is the one thing. And earlier I was talking about that out of the box options in EEM that is available in the system console to understand that, to read that performance, runtime performance, the statistics. So this is the Sling mat, system colon console Sling matrix. And here we could search, if you could search with this option. Debra, I’m sorry if I have to rush you, but it would be good if you could stop in one or two minutes just to give the Venga Dash the time for his presentation. Yeah, sure. So these are the information we could, we’ll be getting here. So once we execute the query or once you make the get request, so here we could see, you will be getting, we could see that this count will be changed every time. The count could be reduced or increased so that information will be getting here. So yeah, so Gauran and Kautik, yeah, that’s all I got from my end. Okay, great. Thank you very much, Debra. That’s great. So before we hand over to Venga Dash, Venga Dash, you can actually already start sharing your screen. I just wanted to remind everyone about the upcoming Developers Live Headless Conference taking place on November 9th. You will find the link in the general chat. Also just so you know, we’re kind of delayed, but I want everything to be complete and we’re going to share the recording. So we might run over for five to 10 minutes. Please excuse this inconvenience. All right, now handing over to Venga Dash. Hi. Hi, Al. Is it audible? Jordan, here. Yes, it’s great. Thank you, Venga Dash. Thank you. Thank you, Gauran, as well as Kautik, for this opportunity. So this is Venga Dash. I am a technical architect from Qatar Airways. So predominantly I’m handling on the Adobe as a platform. So today, like we jump into directly the session. So today I’m just talking about in some of the real-time use cases that we came across with the AMSI headless use cases. So I would say saying that like how combine the content fragment as a concept between the traditional approach versus the headless approach, how we can reuse as much as possible. So in that way, I will take this presentation towards it. So the agenda normally I will go about it is like when, which is nothing but like there are two approaches we are having it. There are pros and cons in both sides. Headless versus traditional. The traditional way is nothing but like all AM developers are aware that slightly to back and OHA services to rendering a page itself within an area. The headless is like more of like decoupled the presentation layer out of it and then give a structured content alone. And AM is predominantly as a content as a service kind of a concept, right? So that is another approach called hybrid approach where we will put together a support like we will solve some of the sites in traditional, some of the sites in headless. So AM is all one package in my view. So second is like a bad to use which approach. So there are some based on my experiences with the different projects. I put it in some kind of a decision points like when to choose what, when to go for traditional, when to go the headless kind of a thought process. Content fragments and its use cases. So I’m giving some specific focus on content fragments and what are the different use cases that we might encounter and how we are actually go about it. And if time permits, I will take through that some learning to the SPA editor when they’re doing it as a headless. So what are all the challenges and how, what are the new discoveries that we have find it out? If that time permits, yeah. Okay. So traditional versus the single page experiences. So like us, we all know like last two to three years, the single page experience evolving big time and Adobe has really put a lot of effort in catering those transactional applications as well, which is running in a big, nice way of customer experiences, right? So as we all know, the multi pages, like with the end to end platform running in an area. So the client is just nothing but an HTML and it is rendering, it will resolve to our resource, which is our component or a servlet or those things. And then it resolved to a sling model and it will read it back in OAG configuration or properties. And then that content manipulated from the OAG services will pass it to the SQL component and SQL component will present in the HTML rendering. So in this one, like every page will send those requests to the publishers and then get this content loaded. So the pros is like, if you can look for those options, whenever you think saying that, okay, you are designing a site for a very informational heavy, like a lot of content pages, like 50,000 pages, talking about products and then in that view, right? So it is like one way kind of an interaction with the customers. It is a content driven and SEO heavy. So the enterprise is looking for a very stringent on SEO and they want to like have catered to multiple SEO agencies, then the traditional approach holds better. I mean, in many cases and the single pages, which when it comes like when more and more like a two way interaction between the customers. So that is a two way interaction. He clicks on something and you will respond something. Then again, he interact with something. So in such kind of a scenario, more, there’s a single page application say evolving with the rich customer experience. Like it is predominantly like gathering where the transactional flow holds better. And so in those areas it is quite doing well. So how that works in terms of AEM into the picture, right? So I’m putting into that perspective. So when a client hits it, that is an Angular or React, it is having its own controller that will first hit AEM and render that all content, whatever it is required at one instance itself and then the model will take the content from there and put it into the respective map it to a respective JS or Angular component React component and that React component will present that content to the HTML. So from that time onwards, every hit will be manipulated only this and it won’t come into this picture at all because all will retrieve at one instance itself. So that’s what the representation giving here. So every request will come to the server. It is one hit and rest of the things are all like handled from there itself. So this will talk about like how traditional content sit together when it is delivering an HTML page. And if you take a single page applications, we have two kinds of concepts. One is like a SPA editor where the SPA editor is within the AEM, the container to framework to SPA apps setting inside author. It is giving more author focus where author is like sophisticated and they are all like understanding about like in contextual data and they want the rich content, they will change the layout regularly and they will change the content regularly. So we can spend that much effort in the SPA editor framework and we can propose that. But if you think saying that, okay, it is like a purely the authoring is very, very limited and it is more of like a key value pairs or some content that you want to like promote it as for entire transaction application. All we need to do is like present the content. That’s it. Then the AEM headless is perfect use case. So many of the going forward, like the forecast is like many of the organizations are moving towards like fully transactional kind of a way with rich user experiences. So enhance like this makes more sense to give focus on the AEM headless. So what is like AEM as a headless, what are the available options within AEM? So what are all the things that we’re talking about like AEM can provide to implement the AEM as headless use cases. So we do have like in terms of content fragment, if you take as an option, content fragment itself can cater for your traditional approach as well as the same content can cater to the usability to other interfaces as well. So that you can use HTTP API and you want to extend the content fragment further and you want to manage different that I can cover it in the demo, why the exporter and server comes into the base. And the third one is the GraphQL. GraphQL is I think like my partner Deval has gone through a very deep dive. So normally like this kind of use cases, we have seen it in managing the error messages like those kind of details like when it is very large kind of thing instead of writing every time when new feature goes in, this GraphQL interface helps us to dynamically pass the queries and retrieve the values. So that’s what I’m trying to put it in dynamic way saying that okay, JSON comes in like the key value pairs is like the GraphQL kind of a thing in HTML exporter and HTTP can be combined. So these two areas where we are seeing content fragments heavily used. So I’ll just quickly take you through some of the use cases which we are coming in. So there are a scenario I’ll just take you directly to the demo rather than talking to us we have very less timing. Sorry guys, like if I’m going so fast, please let me know because I’m just keeping timing the constraint. Thank you. Okay, so if you if you take like the that is a requirement where it was like, say consider I have a page where I want to personalize this page with respect to someone is logged in as for example, like we are running a loyalty program someone is like Burgundy member is Burgundy gold silver mobile tablet. So we have one content and I want to create multiple variations and someone is logged in as a cold member, we should give some different content to them. If someone is logged in as Burgundy, we have to give in some different content and someone is logged in from mobile web, you have to cater to different content, but the same content they want to reuse it in the different applications as well. For example, mobile app or screens or kiosk, such kind of a new cases, right. So in such cases, how we can the headless will be a perfect use case, right. So where you create a content fragment, and you centralize your content and content fragments give leverage to create variations to the same content, right. So you define all the variations, and then you can write a simple exporter or a solid to pass it and catering for the web a different way and using a HTTP asset API and cater the same content to different use cases. So how we have done is like we created a simple component, kind of a cursor component, but that cursor component accept a content fragment directly. So we created a content fragment out of it, you can able to see the content fragment model for that particular content fragment, which we derived out of it, right. So this is simple content fragment we created, which business can themselves can able to create quickly, right. So they can create a content fragment, and then they can create content fragment out of it. This is the master content, which is a default. So someone is not even logged in at all, right. So we will show the master content is an anonymous content, this can come as default, and someone is logged in as burgundy, someone logged in as silver. Yeah, so someone is logged in as gold. So we are having a different content. So how we are doing it here is like, so we are using an AM selector based on that selector we pass it to a simple model, we inject into the model and the model will just query that particular variations get the content and display it for the for the HTML. So if I put like, say, for example, gold, you get a gold. Yeah, so if you put like, mobile, but mobile, right. So this way, how someone is logged in based on the selector, you can take the content and you can deliver it for the HTML. So okay, so I have done all those things, how I can able to cater it for the other things like that’s where the out of box HTTP API comes on the fly. So I thought of like, I’ll just bring you this one. So predominantly, these use case, we implemented it via the using this content fragment interface. So you have a lot of API’s available. I think like, Adobe is in every version, they’re adding new new things like associated content. So we we little bit struggled earlier to get how to get the associated content as well. And then parsing it, but now we are getting those those API’s. Yeah. So keep looking into such kind of things so that like, it will be quite easy rather than spending national effort. Right. So I’ll just bring you guys, maybe go to Can you I’ll just bring you guys in the chat later so that like you can refer this. So I’ll just take you. So this is the asset API for the same content carousel fragment JSON, which we are seeing it here. Yeah, same carousel CF JSON. So we just need to do this JSON to them. So it is anyway in the dispatcher, it will get cached. And if you see the wondering is like, it will, it will have all your variations as well. Yeah. So your master content, as well as your variations, everything in one single JSON, so same content can be reused in different channel, as well as it is reused in the viewer portal itself. Right. So, so that’s the power of content fragment we are talking about, right. So this is one of the personalized use cases we got and this is quite fitted there. The second aspect is like, okay, portal, these are all we are talking about how about like an SPS hit list we are talking about, right. So in such cases, there is another interface that we actually got as a use case where, so that is an application where in that applications, we have like some transaction screen, some content screen, and then some hot record screen, and then payment confirmation screen, right. So they want to manage everything in that particular screens, each screens, they want to manage it and each screen has its own modules. So we have to go deep dive further to create a collection of content fragments out of it. So it’s more of like a virtual project, right. You doesn’t have a contextual information like you see in the earlier use case, where you have to think of that, okay, this is five screens and then how we are going to create the collections. So I’m just going down. So if you see like, you have to have always for the content, if you want to do a translation, you have to maintain this language code. This is how you have to have structured your content so that like, if you have multiple translation folders, it will automatically the translation engine can easily pick it up. Yeah, so make sure that you follow this kind of a structure whenever you have your applications. So how we have done is like you have a header, you have carousel and so you have different different folders, these are different items. So for example, service segments, if you take, you have different fragments out of it, and you have different fragments. So what is the challenge that we are facing it here is like, that is a requirement to us where they are mentioning saying that we create a fragment and inside that fragment, they will actually refer using the custom component that we have created. And using this custom component, you will actually reference another fragments inside it. So they want to like say saying that, okay, I will create 10 fragments out of it. And I put it as a collection. And I put it into one content fragment as a reference and then put the this content fragment can I consume this as a JSON where I will be able to get all the values which are all the things I placed inside this single fragment. Alright, so hopefully you guys understand, right? So I’ll just go to the JSON then you might understand it. So here is the take it to original. So what we have done is like we created. So I saw I showed you the content fragments how we have created right so now they want to create a page and we are giving access to authors where authors can create a page without a header footer component and we created a they can actually drag and drop the content fragment components. So they place the content fragment, they will browse and select the content fragment if you see here this particular header component which I shown it which is having multiple fragments inside this right but when I actually how we have done is like if you see it here so it will go into the header and it will take the content fragment and it will just write a small JCR query to read each of the content fragment path and get all its values as well and then we will present it as one JSON. So from business perspective they will have five pages homepage, cart page, confirmation page, payment page that’s it. In each of the pages they will drag and drop the content fragment and they will link it to each of their respective fragments. It can be reference to fragments as well it will support. So once you do all those things from a from a business side it will be easily they can relate saying that okay this is the page I have header, I have meet and greet, I have partners, I have launches, these are all. So it is we are creating a virtual mapping to their component versus to the content fragment so that they can easily like link it and then they can get all their content in for that particular page in one single JSON and if we can cast this in CDN level dispatcher level so that like no more hits comes to us. So this is one of another use cases that we think seeing that headless and content fragments have quite good it attached and once after implemented this we identified saying that some of the APIs they have released recently which is associated content itself. So it’s good rather than going through a SQL queries right we can just write a associated content API itself. So the API the interface content fragment interface is very powerful so use as much as possible. Do we still have time? Yeah, I just wanted to inform everyone that we will overrun for five to ten minutes just to give you a chance to complete your presentation and demo. For the ones who need to leave now please check out the rest of the session in the recording we will share tomorrow. Go ahead, Mengelech. Okay, so another one is like I’m talking about a speed editor like what are all the learnings that we think about it so when we straightforward implementing an speed editor I mean I think it is one and a half years back so we are also learning a lot of things so what we have understood is like I just put it as a segregation so that like it will be very clear saying that whose responsibility is of what say front-end developers will own this particular blue area where author will more of like manage this area where AEM developer will focus on this area so that should be a bridge between this to these guys like how it is bridging between this and this so they have to identify those contractors JSON which is the main JSON which will cater for the both the angular component and that will derived out of our CQ dialog sense and models so this is the area that we will normally enable developer will focus right so I’ll just take you through a flow maybe I think I have to present it yeah so normally how when we actually develop it we are identifying that how the flow it takes to take you through right so in order to deliver an speed editor as an application when you hit an angular application for example localhost so angular sp application including the language you provide then it will resolve to anglers index.html in the index.html you will have a metadata you will define as a CQ page model page model as a root URL that root URL is nothing but your context path which you are mapping it in the AEM side maybe I’ll just show quickly the presentation one minute yeah if you see here so if I take this this is however so this is your AEM page which is like using a web pack you created application here so you have like say EN and you have flight search and you have search right so this particular search right so this is your context path EN is your context path the flight search is your context path then it will result automatically to this particular page as a manager so whatever the JSON provides from here it will take all this content from there so in a nutshell so normally what we will do is like this is the path we will represent it in the in the root page URL right so from here it will take all the content this content will iterate over all these values including the language everything will be here and then in your angular application your angular application you will have a path right lang angular sp search this particular path it will search it in your angular model for example for example say fly en slash flight data slash so this is the path if it matches the angular application path and this path matches under that what are all the child items are there it will take them as it is right so under this like you have header logo all these items will take right so there’s one component just take it over and then this one challenge we are also facing like it is throwing a lot of items so it will take the first items and it will take those content and whatever the path matches with that the either items you have a header as a component defined and you are mapping this particular component there it will take those content values like logo values all those things it will take as it is didn’t have a time to take you through the code but it’s I’ll just explain you the flow yeah so once the path matches the request go to the server which is an am server and it will try to fetch that content and it is a that response including all your children completely here at his response so and what it will do is angular route will pass those children and get that content and if that path matches it will send it to the angular page component if path doesn’t matches a new request will send for example if you put angular sp search slash something like root and if that root that particular child is not available in the angular model that JSON that that particular path request will hit your am publisher so that request come to a publisher you can handle a different logic as well if you’re a quit so that’s the point I want to mention yeah so these it is quite flexible there’s a lot of things that you can do in that area using this particular concept yeah so that’s one of the learning that I want to share it with you guys and thank you so much for this opportunity any questions please post sorry for rushing it up this time sorry thanks a lot for this no no all good it is as it is but no no worries okay great thanks a lot so just because we’re very late we will skip the Q&A round some questions already have been answered please note that we will the rest of the questions we will answer in the contextual thread you will find the link in the general chat also I would like to remind you of the upcoming developer lives event which will be on November 9th a full day of headless conference and with that again many many thanks to Debal and Bangladesh very much appreciated that you participated and provided us this presentation and insightful demos and to the audience thank you very much for attending and for paying attention and please join us in the upcoming sessions upcoming sessions will be announced in the in adobe.com slash go slash gems and you will be also invited via the registration link you have seen in the Adobe Experience Manager user group and with that thank you very much and goodbye have a nice day or evening thank you yeah thank you