Create a Custom Clone Page

This tutorial shows you how to create a custom Clone page. In this example, we’ll be creating a custom Clone Contact page, but you can follow these instructions to create a custom clone page for any object, standard or custom, that has a “clone” action in standard Salesforce. (For standard objects that do not include a clone action, such as Account, see this tutorial.)

One very common feature Salesforce users request is the ability to clone not just a single record, such as a Contact, but also some or all of its child records as well, such as a Contact’s related Cases, etc. Accomplishing this typically involves a lot of custom coding and development work, but with Skuid, you can craft a custom clone page for any object type using the Skuid drag-and-drop page builder! Let’s get started.

The first thing to know is that any Skuid detail page, such as a Contact detail page, is a custom clone page waiting to happen — the fastest way to create a custom clone page is to just clone an existing detail page, such as a ‘ContactDetail’ page you may have already created, and then tweak it to remove components that are not needed during the clone process, such as system information fields.

Step 1: Create a new Skuid page, optionally by cloning an existing detail page.


To save time, we can clone an existing Detail Skuid Page by going to that Skuid Page, clicking More Page Actions, and selecting Clone.

For instructions on how to set up the models and conditions on a detail page, see the Custom Detail Page topic.

Name the cloned Page and click Create Cloned Page.


Edit Page: ContactDetail


Step 2: Update the main page model to always Clone Model data.


  1. Click on the main page model.

  2. Click Advanced.

  3. For Clone data, choose Yes, always. This will make it so whenever this page is opened it will clone the record whose Id is supplied in the URL.


    You could use “Yes, if ‘clone’ and ‘id’ parameters are present in URL to set up a page that could function as a new or as a clone page, but you would have to want to see exactly the same objects, fields, and components on each page, which may not be the case.

Remove any unwanted fields.


All of the fields included in this model will be cloned (even if they don’t appear on the UI). Remove any fields you don’t want to be cloned, and fields like CreatedDate, LastModifiedByID and other fields that can’t be cloned anyway.

Step 4: Change the Page Title to reflect that this is a Clone page.


  1. Click on the Page Title.
  2. Edit the Title and Subtitle fields to reflect that this is a clone plage.

The Title looks really fancy here, but it just ensures that the the title will show the name of the new record, and that the colon won’t be displayed unless the name field is populated. (This template will work if you have the Name field included in your model.)

New {{Model.label}}{{#Name}}: {{FirstName}} {{LastName}}{{/Name}}

A. Remove all Page Title Actions except for Save/Cancel.


Click on a Page Title Action, then click to delete it.

B. Click on your Save/Cancel button and make sure it’s saving/canceling all the right models.


C. In Advanced, change the redirects after Save/Cancel.


  1. Click to open Advanced Button Properties.
  2. For Redirect after Save, enter /{{Id}}. This will take users to the new record’s page.
  3. For Redirect after Cancel, enter /{{$}}. This will return users to the original record’s page.

Step 5: Set all components to Edit Mode and Remove the Save / Cancel buttons.


Because the Save / Cancel we created in Step 4 will function for the whole page, you can go into every table and field editor and remove its Save / Cancel button.

  1. Click on each Component.
  2. Deselect Show Save / Cancel.
  3. Choose Edit as the default mode.

Do the same for all your Skuid Tables.


Step 6: Remove all fields that you don’t want users to modify.


Remember, all fields and objects you’ve included in your models will be cloned, but you can choose what you allow the user to modify.

A. Remove tabs and components you don’t want to appear in the clone page.


We’re streamlining this page, so there’s not too much to distract this user from the clone process.

B. Remove unwanted table actions.


For this example, I’m removing any table actions that would redirect the user to another page.


You also may want to enable mass update and mass delete on this page’s tables, if not already enabled.

Step 7: Save your page.


This is really key; hopefully you’ve been doing it periodically throughout the process.

Step 8: Create a corresponding Visualforce Page.


Before you begin this step, prepare your Visualforce markup. For this tutorial, use a basic Redirect override without page assignments.

  1. In (Salesforce) Setup > Develop > Pages, click New to create a New Visualforce Page. Call this page CloneContact (or whatever you want).
  2. Paste the appropriate markup in the Visualforce Markup pane.
  3. When you’re done, click Save.


You can also choose to redirect to a Page Assignment here.

C. Choose the new Visualforce page as the override for the Clone action.


  1. Choose Override With Visualforce Page and select the Visualforce page you just created from the dropdown list.
  2. Click Save.

Moment of Truth: Test it!


Go to a Contact with related Cases (or whatever object you created this clone page for) and click Clone. Your custom clone page should appear. If it does not, go back and to Step 8 and make sure your page override is set up correctly.

A. Modify the cloned record.


Success! You should be redirected to your newly-created Contact’s page.


Click around to make sure that all of their related information was cloned as well.

Not Working? Common Problems

  • If your custom Clone page isn’t appearing when you click ‘Clone’, double check that you created the Visualforce page and set the override correctly in Steps 8-10. The markup for your VF page should be as follows, (substituting your own Object e.g. Contact__c and Page Name):
<apex:page standardController="Contact" extensions="skuid.Redirects" action="{!redirect}&page= CloneContact"/>
  • If some of your objects aren’t cloning, make sure that each model includes the Lookup Relationship field (see Step 3A).
  • Make sure that all your related objects include the Field from another model condition on the lookup field described in Step 3.
  • Another problem could be that you didn’t set Save / Cancel to all objects (see Step 4B).
  • If you’re previewing your page and the clone action’s not working, check to make sure that you’ve updated your models to create clones (see Steps 2-3).