This tutorial walks you through the complete process of building a page, creating the Page Assignment, and setting the appropriate Visualforce overrides. We’ll show you how to build a Contact Edit page, create a Page Assignment for it, and then use it to override the Standard Salesforce Contact Edit page layout.

Although we’re using the contact model in this example, you can follow along to build an edit page for any object, standard or custom.

Step 1: Create a new page, or click on to open an existing Detail Pages¶

To begin, you can create an Edit Page using a template, or you can Clone an existing Detail/View/New page, if you’ve already created one.

Click Compose.

If you haven’t already created a Detail Page for this object, click New Page and go to Step 2.

Or …

If you’ve already created a Detail Page or a New Page for this object, click to edit your page and go to Step 3.

Step 3: If you’re cloning a Contact Detail page, open that page and then click Clone¶

A. Name your new page, pick the module and the owner, and then click Create Cloned Page¶

This is especially important to do if you’re making this page from a new record page.

Click Models and then select the primary page object.

Make sure “Query on Page Load” is checked.

Choose the appropriate Max number of records for this page, e.g. 1.

Make sure “Create default row if Model has none” is unchecked.

C. Important: If it doesn’t already exist, create a URL parameter condition on the main page model¶

We’ll add a condition on this model so it knows which record to display. The Id for this record will be passed from the View page through the URL into this page. This may sound a little confusing, but you will be able to see this process unfold in Step 5C.

Click Models > Your Model >Conditions and click to add a condition. Click on the new condition to edit it.

Click on the field picker and choose the Record Id field. (This is Contact Id for the Contact object, and Record Id for custom objects).

Click Value and choose Page/URL Parameter as the Content and enter Id as the Parameter.

Because we want the edit page to be streamlined (just used for when you want to edit a lot of information rapidly), we’ll remove any models and components that you don’t want to appear in the Edit Page. Our example page includes at least one table and the Page Title Component.

Sleek. Tab Free. It should show only the fields and objects you want to edit fast. this page isn’t for viewing all the information associated with a record, but updating it efficiently. That’s why I removed all excess tabs and buttons and organized my components side by side in a Responsive Grid. (That wrapper is there to even out the spacing). On the table, I kept only the Delete Row Action and the Update and Delete Rows Mass Actions.

Step 5: For all of your field editors and tables, choose Edit as the Default Mode and deselect Show Save/Cancel¶

Click on the title bar of eacy Field Editor or Table.

Choose Edit as the Default Mode.

Deselect “Show Save/Cancel.” In the next step, we’ll create one centralized Save/Cancel button for every model and component on this page.

A. Click on the button and then select Save/Cancel as the Action type¶

Click on your button to edit it.

Choose Save / Cancel as the Action Type.

Remember how we took all the save / cancel buttons off our individual components? We’ll use this button to save everything.

Check this box to Roll back entire save on any error. That way if there’s an error with any of your models, like you forgot to fill out a required field, it will prevent any models from saving until all the data is in order. (The error will appear on your page as well, so you’ll know what to fix.)

B. Enter the Redirect URL where users will be taken after Save and Cancel¶

For most Edit pages, once users have Saved or Canceled their changes, you want them to return to the object View page. So for both Redirect URLs we’ll enter /{{Id}} to go back to the view page for this record. (This will take the Record Id field from this model and plug it into the page’s URL. You can also use {{$Param.Id}} if the page title component is set to a different model and you want to use the record Id in the page’s URL.) You could also enter the URL of a Skuid page here, if you haven’t set up your overrides.

Setting Hotkeys makes your pages more efficient (because saving seconds means saving minutes which means saving hours which means saving $$$). This way users don’t have to look around for the Save button, scroll, or even touch their mouse but can go straight from tabbing and typing to Saving/Canceling.

Why create a Page Assignment to perform this override? Page Assignments lets you assign pages for objects based on the page action. For each Object-Action page, you can assign different pages to show based on User Profile and Record Type (e.g. show one page for Marketing Users editing Contacts and another for Sales Users). If you don’t use page assignments you can only show one Skuid page per Object-Action.

In the Object / Situation filter, select the main page object (which in this example is Contact).

Click to add a new Page Assignment — the Object Type will now be entered automatically.

Choose the Action Type (e.g. Edit).

Under Page to Use, start typing the name of your Edit Page, and select it from the list.

To override Salesforce pages, you need Visualforce pages. So we need to create a Visualforce page to override the Contact Edit action. But, it will be a very basic page that will just redirect users to the Skuid page / page assignments.

Create Visualforce markup based on samples from either the Basic overrides without page assignments or Basic overrides with page assignments sections of the skuid:page Visualforce component. In this example, “Contact” is the name of your object (for custom objects it will look like “Project__c”), “Edit” is the Action Type, and “ContactEdit” is the name of your Skuid Edit Object Page.

Paste the markup in the Visualforce Markup pane.

Click Save.

C. Go to Buttons, Links, and Actions for your object, and click to edit the Edit Action¶

Success! Your edit page will be displayed. Edit this Contact and then click Save/Cancel to return to the View page.

If you click Save or Cancel and don’t return to the view page, go back to Step 6B and make sure that the URL you entered for the redirect is the URL of the View Page. If you are using a custom view page, you should also check the Page Assignment and Visualforce page override to make sure everything is in order. (For detailed information, check out Salesforce Classic deployment instructions).