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.

image0

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.

image1

Edit Page: ContactDetail

image2

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

image3

  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.

    Note

    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.

image4

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.

image10

  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.

image11

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.

image12

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

image13

  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 /{{$Param.id}}. This will return users to the original record’s page.

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

image14

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.

image15

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

image16

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.

image17

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

B. Remove unwanted table actions.

image18

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

Note

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.

image19

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

Step 8: Create a corresponding Visualforce Page.

image20

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.

Note

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

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

image23

  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!

image24

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.

image25

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

image27

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).