Share

LinkedIn

Custom Experience Buttons and Edit Frame Buttons in Page Editor

Sitecore users have options when it comes to updating fields, however let's take a closer look at each.

Some users of Sitecore prefer using the content editor to update Sitecore data while others prefer to use the Page Editor. Some users are restricted to only using the Page Editor. What happens though when not every field is available to update in the Page Editor? There are many cases when certain users are restricted to Page Editor are allowed to update only certain fields. Sitecore has a quick and easy way to get to only fields needed/allowed to be updated using Custom Experience Buttons and Edit Frame Buttons. I will show you the differences and why one can be used over the other depending on the scenario.

Custom Experience Buttons
Custom Experience Buttons are a great way to manage item updates from Page Editor without the need to go to Content Editor for editing fields that are not visible in Page Editor. Also, it keeps the user from accidentally updating the wrong field because they will have access to fields they are only allowed to update.

  1. In this example we created a Template based on the following fields and created a Sublayout to display the field values. The fields are all text fields.

  2. In the Sublayout I created I am only displaying Name, Description and Image. Those fields will be editable in the Page Editor. 

  3. After you have successfully integrated the template and Sublayout into your Sitecore site it is time to setup the Custom Experience Button so other fields can be updated.

  4. The folder for the Custom Experience Buttons can be found in the Core database. In the Content Editor navigate to content\Applications\WebEdit\Custom Experience Buttons.

  5. Insert a Field Editor Template. In this example we will call it Widget Location since we will use it to update the location of the Widget. 

  6. In the Fields section we want to set up this button so a user can update the Aisle and Shelf of where the widget is located. To do this the field names that need to be updated should be set in the Fields section and separated by a pipe. You will also want to choose an icon as well. 

  7. Save changes when you are done and switch back to the Master database.

  8. Now we will attach Custom Experience Button to the SubLayout.

  9. Find the Sublayout that was created to display the Widget data.

  10. Navigate to the Content tab and scroll down to the Page Editor Buttons section.

  11. Select the Widget button and save changes. 

  12. Open the Widget page in Page Editor.

  13. When you hover over and click the Widget Sublayout section you will notice the Widget Location button.  

  14. Clicking the button will bring up a screen where the Aisle and Shelf can be updated.  Enter the values and click OK.  

  15. The data is now updated.

Edit Frame Buttons
Edit Frame Buttons are great for when you want to add the functionality of the Custom Experience Buttons, but need to put it on a section that is not editable.  
For instance the Widget Sublayout could have its editable flag unchecked and/or the fields in Page Editor may be read only to prevent updates to the name, description and image.  However some users may still need to update Aisle, Shelf, Wholesale Price and Retail Price.

Clicking on the Sublayout in Page Editor will no longer bring up the Custom Experience Buttons so location information cannot be changed. However with Edit Frame Buttons we can get around that. In this example for Edit Frame Buttons we will use the same Template and Sublayout that was created for the Custom Experience buttons.

  1. The folder for the Custom Experience Buttons can be found in the Core database. In the Content Editor navigate to content\Applications\WebEdit\Edit Frame Buttons.

  2. Under the Edit Frame Buttons create a new folder called Widget Buttons and add two new Field Editor Buttons. 

  3. In the Fields section of the Widget Location button we want to set up this button so a user can update the Aisle and Shelf of where the product is located. To do this the field names that need to be updated should be set in the Fields section and separated by a pipe.  You will also want to choose an icon as well.  

  4. In the Fields section of Widget Price button we want to set up this button so a user can update the Wholesale Price and Retail Price of widget. To do this the field names that need to be updated should be set in the Fields section and separated by a pipe. You will also want to choose and icon as well.  

  5. Save your changes and exit the Content Editor and make sure you set your default database back to Master.

  6. Now we are going to add the Edit Frame Buttons to the Sublayout.

  7. Open the Sublayout and the following Sitecore control (sc:EditFrame) should be added to the code of where the fields for the Widget is being displayed. You will notice the Buttons attribute is the folder path of where our Edit Frame Buttons were created.

    <sc:EditFrame runat="server" ID="widgets" Title="Widget Area" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/Widget Buttons" >
     
    <!--Display code goes here.  Since this can be different for everyone an example was omitted.-->
     
    </sc:EditFrame>
  8. After making the changes to the Sublayout go into Page Editor.

  9. You will notice the Edit Frame Buttons are now accessible when clicking on the Widget Sublayout. 

  10. Clicking on the first button will allow the user to edit the Aisle and Shelf location for the widget. Clicking on the second button will allow the user to update the Wholesale Price and Retail Price.   



Conclusion
The Custom Experience Buttons and Edit Frame Buttons are both powerful ways in Sitecore to update data in Page Editor without accessing the Content Editor. A lot of unnecessary updates can take place in Content Editor and restricting some users to the Page Editor can prevent unnecessary updates. Both buttons types allow different users to update items with Sitecore.  Security can be added to the buttons as well for users with different roles. For instance, you may have a user that can update pricing, but not location. So they would only see the button for updating pricing.

So which buttons are best to use? Well that depends on the situation. In most situations Custom Experience Buttons will do. However in some situations when data is secured and display only, but certain fields of the item still need to be updated Edit Frame Buttons are a great choice.


Sitecore development, Sitecore custom code

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image: