Sitecore - Deep drive into the Sitecore Client pipelines
Download as PPTX, PDF1 like7,115 views
The document summarizes how the Sitecore client pipelines work when adding a rendering in the Experience Editor. It explains that when the add rendering button is clicked, it triggers a command that starts the client pipeline process. The pipeline makes server requests, processes commands on the client-side via JavaScript, and can suspend and resume the pipeline as needed, such as when a modal dialog is shown. Key steps include setting the pipeline, showing dialogs, evaluating commands, and handling messages to ultimately add the rendering to the page.
Sitecore - Deep drive into the Sitecore Client pipelines
- 1. DEEP DRIVE INTO THE SITECORE CLIENT PIPELINES This slideshow come from http://sitecoreblog.blogspot.be/ to explain how the SPEAK client Pipelines works
- 2. Intro In this slideshow, I will the Sitecore Client pipelines. This is poorly documented even if it is used everywhere. Do not confuse the client pipelines who are used by SPEAK on the client side with the server pipeline that you probably already know well. To be as concrete as possible, I will take an example: the process which append when you click the add rendering button in the ExperienceEditor. It was really difficult to explain it in a post or slideshow but I hope that it will be clear enough if you have questions or remarks please let a message on this blog post.
- 3. Overview The next slide present an overview of the whole process. Don’t be scared by the complexity we will go in it step by step. You will probably need to go back to this slide to see the where we are in the process.
- 5. When a command is triggered, the url /sitecore/shell/Applicatio ns/WebEdit/WebEditRibbon. aspx is called with parameters and the method OnPreRender() of this class is called (1).
- 6. This class call the base.OnPreRender() (2)
- 7. For this first call, IsEvent is true and IsResult is false, so the this.RaiseEvent(); is called (3). This is where the Execute method of the command's associated class is triggered.
- 8. The Execute method initialize the parameters and then the Context.ClientPage.Start(this, "Run", parameters) method is call. This register a method to trigger in the pipeline (4). The Execute method is now finished and the RunPipelines() method of the ClientPage class is called.
- 9. The RunPipeline will start the client pipeline. This will add a command "SetPipeline" in it to be executed on the client side. Then, Run() method registered sooner is process (4)
- 10. args.IsPostback is false so the code in (6) is executed.
- 11. The SheerResponse.ShowModal Dialog add a command ShowModalDialog in the client pipeline. The args.WaitForPostback() will suspend the client process we will see it later.
- 12. The call to the command (4) and the WebEditRibbon.aspx (1) is finished and return the following pipeline as response in json. As you can see, 3 commands are registered. (The set attribute is automatic and I am not sure that it is useful :-) )
- 13. This response send by the server contain the info about the pipeline and the commands to execute. The Javascript method scRequestHandler from the Sitecore.js file will process it.
- 14. This method call the handle(), who call the resume() and then the process() method is called foreach command in the pipeline. This process() method is really the core of this pipeline system on the client side! It is basically just a big switch with all the possible messages allowed by Sitecore. Depending on the command name, different javascript method are triggered.
- 15. COMMAND PROCESSING 1. The SetPipeline command is processed and just set a pipeline id to the curent pipeline to be able to retrieve it later. 2. The ShowModalDialog command display the Dialog. 3. The process is suspend so the last command is not triggered.
- 16. When you click on the select button of the dialog, the javascript will call the resume() method. This resume method will call the latest command before the suspend. In our case, it will call the ShowModalDialog command again.
- 17. For this second call to the ShowModalDialog command, the process will be almost the same: 1. Call the WebRibbon.aspx 2. Call the base class (13). But, this time, this.Isresult is true so the method called is the this.ResumePipeline()
- 18. REMARKS ABOUT THE STORAGE OF THOSE PIPELINE ON THE SERVER SIDE • The pipeline ID who have perform the request is stored into Sitecore.Context.ClientPage.ClientRequest.Pipeline (ShortID format) • The suspended pipelines are stored into the user session accessible with WebUtil.GetSessionValue("SC_SUSPENDED_PIPELINES") • The pipelines commands for the current pipelines are visible in debug in Sitecore.Context.ClientPage._pipelines but this is a private variable.
- 19. BACK IN THE RUN METHOD OF THE COMMAND This time args.IsPostBack is true and args.HasResult is true but AddRendering.IsSelectedDatasou rceDialogPostBack(args) is false because you didn't have select the datasource yet. So the code in (15) is executed.
- 20. 1. The WebRibbon.aspx return a new pipeline in Json with a new ID 2. The process() method will process the different commands and suspend after the ShowModalDialog 3. When you will select the datasource the JS resume method will relaunch the ShowModalDialog 4. The Run() method is called again. You should have understood the process and it is the same for the subdialog where you select the datasource. So I will go faster :-)
- 21. This time the AddRendering.IsSelectedDatasou rceDialogPostBack(args) is true. So it will register an Eval command in the returned pipeline.
- 22. Here the kind of Json returned by this pipeline Of course this pipeline will be executed and process the commands. The Eval command will have the parameter chrome:placeholder:c ontroladded This message will be handled by the handleMessage() method in the PlaceholderChromeType.js to add this rendering in the page.
- 23. And.... "Ouf" that is it. I hope that you have now a view on the ways Sitecore work on the client side If you have questions about this, please let a message on this blog post and I will try to reply as best as I can.