Build a Custom “Create New Record” Page

This lesson shows how to build a Create New Record Page from scratch with Skuid. We’re going to make a Create New Contact page, but you can follow these instructions to build a new record page for any standard or custom object. You can use this page to override the standard Salesforce Create New Record Page (for detailed instructions, see Overriding the New Action).

Goal: Build a custom Create New Record Page

image0

Step 1: Click Compose > New Page

image1

Click Compose > New Page.

Or, if you’re on the All Pages list, you can click Create New Page.

Enter Page Properties, then click Create Page

image2

  1. Enter a Page Name with no spaces.
  2. Click Save.

Step 2: Create a model that will create a new record

image3

Models allow you to pull data into your page from existing objects. Without models, there can be no information on this page.

  1. Click on the models tab.
  2. Click to add a new model.
  3. Create a Model Id.
  4. Select theData Source Type and Object Name to specify the Salesforce or external object you want to use.

Warning

Uncheck “Query on Page Load.” This will prevent this model from bringing in existing records.

  1. Important: “Check Create Default Row if Model Has None.”

For the curious, we unchecked Query on Page Load to create an “empty” model when the page is loaded. When you checked the Create Default Row if Model Has None box, you created a condition that checks to see if the model has data. When the result returns “no data currently in this model”, the Skuid page creates a new row on the page for you to enter a new record!

For more information about Skuid models, see the Model overview.

Step 3: Click Save

image4

Always wise.

Step 4: Select the fields you want to use on this page

image5

  1. Click Fields.
  2. You can search for fields by name here.
  3. Check the boxes to select the fields you want.

Step 5: Double click to add the Page Title component into the workspace

image6

The Page Title component provides a quick way to title this page.

  1. Click on Components.
  2. Double click to add the Page Title into the Composer area (or drag and drop it in).

For more information about the Page Title and other components, see the component overview.

Enter a title for your page

image7

You can use {{curly brackets}} to pull fields from your model into this title.

You can manually enter the curly brackets and fields. For example, type in {{LastName}}, {{FirstName}}. Alternatively, you can use the Field Picker to insert the fields whose you want displayed.

If you were to Save this page and click on the Preview button, then you would be directed to a nearly empty Skuid page with just the Page Title bar information. You’ll notice the Sub-Title says ‘New Contact’ (or whatever you typed in to the Sub-Title field). You’ll also notice that there is just a comma below the Sub-Title. The reason is that the {{LastName}} and {{FirstName}} fields are currently holding no data in the model! In the following sections, we’ll add text fields for you to enter the Last Name and First Name information. When a user is entering data in the Last Name and First Name fields, the curly brackets in your page title will automatically update with the information! Pretty cool.

Step 6: Add a Save/Cancel Button

image8

  1. Click on the Page Title component title bar.
  2. Click Add Button.
  3. Click on the New Button to edit its properties.

A. Choose Save / Cancel as the action type

image9

  1. Choose Save / Cancel as the Action Type (and notice that the button below reflects these changes in real time… oooh, aaah)!
  2. Click Advanced.

B. In Advanced properties, you can set the Redirects

image10

  1. Set Redirect After Save to the Detail Page for the new record by entering /{{Id}} Be sure to note that Id starts with a capitalized ‘I’!

    Note

    To successfully implement this redirect process using /{{id}}, you must select Save / Cancel as the action type in the previous step.

  2. Set the Redirect After Cancel to the Tab Page for this object by entering /{{Model.KeyPrefix}}/o

Note

To redirect users to another page, you can find its URL by going to that page yourself in another window. Copy everything in the URL after force.com and paste it in the Redirect areas in the button’s Advanced Properties.

For example, if I wanted my Cancel redirect to go to my custom Leads tab page, then I would paste in /apex/LeadTab?save_new=1&sfdc.override=1

Bonus: You can also create a Save and New button!

  1. Add another button to the Page Title component.
  2. Set this button’s label to “Save & New.”
  3. Set its button type as Run Multiple Actions.

Now, within the Actions tab of this button, add the following actions and settings

  1. Save Model changes: save this page’s only model
  2. Remove all rows from Model: once again, select this page’s only model
  3. Create new row(s): select this page’s model, and place the row at the start of Model data

When your users click this button, the information they entered will be created as a new record within the object—a new contact in this example—and their field editor will be refreshed, allowing them to create a new contact immediately!

Step 7: Double click on the Field Editor to add it under the Title component

image11

  1. Click Components.
  2. Double click the Field Editor or drag and drop to add it beneath the Page Title.

A. Customize the Field Editor Properties

image12

  1. Make sure the appropriate Model is selected. Since we only have one model, this shouldn’t be an issue.
  2. We included Save / Cancel in the Title component, so there’s no need to show them again.
  3. Important: Select Edit Mode. This will lock all fields in edit mode for the Create New page.

B. Rename field editor sections

image13

  1. Click on a section to edit its name.
  2. Enter a new Section Title. It will be updated below automatically.

Step 8: Add fields to the Field Editor

image14

  1. Click on the Add Field(s) button after clicking in the section where you want to add your Fields.
  2. Click on Model Field(s).

image15

  1. Click All Fields to view a list of all the fields in the object (not just the ones you’ve selected).
  2. Use the Search to help you narrow down fields.
  3. Click on the plus sign to add a new field to your model.
  4. Check the box beside the fields you want to add to the field editor. In this example, the Profile section needs the First Name, Last Name, and Account Id fields. Remember: the Add Field(s) window arranges the Fields according to the order in which you select them.
  5. Click Apply.

Step 10: Click Save, and then click Preview

image17

Result: Your Create New page is displayed

image18

  1. You can tab through the fields to enter the new record’s information. When you type all or part of a record name in a lookup field, a list will automatically appear to assist you.
  2. When you’re done entering information, click Save. This new record will be added to the system and you will be redirected to the URL you specified in Step 6B.

Shortcut: Use Templates

image19

Want to build this page even faster? In Step 1 when you’re creating the new page, click Use a page template and then select Page for creating a new record and then enter the Primary Object for you want to create on that page (this will work for any SObject, standard or custom).