How To: Attach Images in Emails

This article illustrates one method for attaching an image to an email. For this demonstration, you have a form to enter employee information and upload a photo. After submitting the form, K2 saves the employee information and image to a SmartObject. A workflow starts and sends an email which contains the employee information and image.

An email with photo attachment
Email with Photo Attachment

Scenario

You work in Human Resources and are responsible for updating employee contact details. One of the goals is to obtain a photo of each employee. You create a form that allows photo attachments. As employees submit forms with their details, a workflow starts and saves the content to a SmartObject. The workflow sends you an email with the photo attached for your convenience.

Steps

For this scenario, you create a SmartObject to store employee details. You create a view from the SmartObject, then add it to a form. The final component is a workflow, which contains a single step to send an email.

Setup Steps

The following steps set up the scenario from start to finish. If you want to skip the setup steps and view the topic step, go to Add a Send Email step and personalize it with a reference.

  1. Create a SmartBox SmartObject called Employee Details. Add properties using the table below as a guide. (Optional: Add categories first to K2 Designer to keep your work organized.)
    PropertyTypeNotes
    First NameText 
    Last NameText
    DepartmentText
    EmailText 
    PhoneText 
    PhotoImageThe employee uploads their photo. A rule on the view saves the image to the SmartObject after they submit the form.
    1. Launch K2 Designer.
      If you do not know how to access K2 Designer, see Accessing K2 Sites.
    2. Click Browse to expose the categories. Categories are folders that keep your environment organized. Add the following categories:
      How To
      Attach Image.
      (To begin, right-click All Items, then select New Category.)
      Add Categories
    3. Now you create the SmartObject. Right-click the Attach Image category and select New SmartObject. Name the SmartObject
      Employee Details
      then select the SmartBox option. Click Create.
      SmartObjects are connectors to data sources. Data sources are where data lives, for example, SharePoint lists or SQL tables. SmartBox is K2-provided data storage where K2 creates a table for you in the K2 SQL database.
      Create SmartBox SmartObject
    4. Add the properties for the SmartObject. Properties are like the columns in a table. Click Add. Enter
      First Name
      for the Name value, then select Text for the Type (if it isn't already). Click Add property to add another item.
      Add Properties
    5. Add the remaining properties using the table below as a guide. Click OK when done to save all the properties.
      PropertyTypeNotes
      Last NameText

       

      DepartmentText

       

      EmailText 
      PhoneText 
      PhotoImageThe employee uploads their photo. A rule on the view saves the image to the SmartObject after they submit the form.
    6. Your properties should look like the image below. Click Finish to save and exit your SmartObject. (The Finish button is near the upper right corner of your screen.)
      Employee Details SmartObject
  2. Create a view from the Employee Details SmartObject called Employee Details View. Create labels and controls and select all properties except ID. Select the Create (Standard) button.

    Next, you create a view from the SmartObject. Creating a view from a SmartObject binds it to the SmartObject and makes the properties available for use in the view. The properties become the view controls for entering data. Because the controls are bound to the SmartObject, K2 knows to save view content to its corresponding data source property.

    1. Right-click the Employee Details SmartObject and select Design View.
    2. Name the view
      Employee Details View
      then confirm Item View is the View Type. Click Create.
      New View
    3. Click Create Label and Controls. This option adds SmartObject properties for you and allows you to select which methods you need.
      SmartObjects consist of properties and methods. Methods are protocols for interacting with data, such as create, update, and delete.
      Create Labels and Controls
    4. On the Create Labels and Controls screen, select all the fields except ID (these are the SmartObject properties you want as view controls). Select the Create (Standard) method. For this demonstration, you only need to create records. Click OK.
      Select Fields
    5. Your view should look like the image below. Notice the Create method is a button control. Behind the scenes, K2 adds a rule action that creates field entries in the SmartObject when you click the Create button.
      Employee Details View

    6. Click Finish to save and exit the view.
  3. Create a form called Employee Details Form and add the view.
    1. Right-click the Attach Image category and select New Form. Name the form
      Employee Details Form
      then click Create.
      Views are not accessible on their own and must be contained within a form. Forms are the public facing interface that you open with a browser. You can use a view in more than one form and one form can contain multiple views.
      Create Form
    2. Next, you add the Employee Details View to the form's design canvas. In the left column, click the Views tab. This is the same category structure you see in the K2 Designer. Navigate to your view location. Drag the Employee Details View onto the canvas.
      Add View to Form Canvas
    3. Click (Enter View Title) and change it to
      Details.
      Change View Title
    4. Your form should look like the image below. Click Finish to save and exit the form.
      Your form may have a different style applied, depending on your environment. You want to confirm you can see the Employee Details View contained in the form's design canvas.
      Employee Details Form
  4. Create a workflow called Employee Details Workflow.
    1. Right-click the Attach Image category and select New Workflow.
    2. The K2 Workflow Designer launches. Name the workflow
      Employee Details Workflow
      then click Create.
      Create New Workflow
    3. The Workflow Designer launches. The welcome screen includes an interactive panel which you can navigate through by clicking the left and right arrows. You can also click Close to continue to the design canvas.
      Welcome Panel

  5. Configure the Start step to use the Employee Details Form. Keep all other default settings.

    Before you can deploy the workflow, you must configure the Start step. K2 needs to know how and when you want the workflow to start. In this demonstration, you want to workflow to start after you click the Create button on the form.

    1. Select the Start step (with the green triangle). Selected steps have a blue border. Expand the Configuration Panel.
      The Configuration Panel allows you to configure and customize the steps you add to your workflow.
      Configure Start Step
    2. Click the Add a SmartForm start event link. This option allows you to bind an existing SmartForm to the workflow.
      Configure Start Event
    3. Navigate to your Employee Details Form. This folder is similar to the K2 Designer categories. Select the form and click OK.
      Select Form
    4. The Start Workflow from a Form wizard launches.

    5. On the References screen, notice K2 found the Employee Details SmartObject. K2 discovered the SmartObject when you selected the Employee Details Form (which is bound to the data source). Click Next.
      References Screen
    6. On the Start Rule screen, keep the default Do it for me! and click Next. K2 configures the form rule to start this workflow when you click the Create button.
      Do It For Me
    7. On the summary screen, review the changes K2 makes to the Employee Details Form, then click Save and Finish. When you see the success check, click OK to exit the wizard.
      Save and Exit Wizard
    8. Notice that the start event indicates the workflow starts when the Create button is clicked. Click the slider to collapse the Configuration Panel.
      Start Event

Add a Send Email step and personalize it with a reference

The following steps illustrate how to add a Send Email step and configure it to use a reference for attaching an image.

  1. Add a Send Email step. Use the Photo reference as the Attachments default value. Find the Photo reference in the Context Browser > Employee Details references. Use Originator as the recipient.
    1. From the Toolbox > Basic node, drag a Send Email step into the empty placeholder below the Start step.
      The Toolbox contains steps from which you build your workflow. A workflow is a sequence of steps which automates a business process when followed from start to finish.
      Add Send Email Step
    2. Select the Send Email step, then expand the Configuration Panel.
    3. For the recipient, use the default Originator. For the Subject line, enter
      Employee Details for [First Name Last Name]
      where the bracketed text represents references you add from the Context Browser.
      Subject Line and Recipient
    4. Expand the Context Browser using the slider.
      The Context Browser contains references, variables, functions, and SmartObject properties. At runtime, K2 replaces references and variables with live data. For example, K2 replaces the First Name reference with the First Name value from the current record.
      Expand Context Browser
    5. Expand the Employee Details references. Notice that these are the same properties you created in the SmartObject. Use references to personalize your content. Drag the First Name and Last Name references into the Subject line. At runtime, K2 replaces them with the actual values from this record.
      Add Variables
    6. Enter content for the message Body. You can use references to personalize the message.
      Message Body
    7. Use the Photo reference for the Attachment value. Click Add Attachment. Drag the Photo reference into the Attachment box.
      Photo Reference
    8. Your email configuration is complete, collapse the Configuration Panel.
    9. At this point, your workflow should look like the image below. You have configured the workflow to start when you click the Create button. The workflow sends an email back to you, the workflow originator.
      Workflow Partial One

    10. The next step is optional, but adds a clear end to your workflow. From the Toolbox > Logic node, drag an End step below the Send Email step.
      To return to the Toolbox main menu, click the Toolbox icon in the breadcrumb bar.
      Toolbox Icon
      End Step
    11. Connect the Send Email step to the End step. To connect steps, hover over the border of the first step until you see a handle. Click and drag the handle into the second step. Click the canvas to set the line.
      Connect Steps
  2. Deploy the workflow. After you deploy the workflow, return to the K2 Designer.
    1. Before you can use the workflow, you must deploy it. Deploying a workflow publishes it to the K2 server and makes it available for use. If you make any changes to the workflow, you must deploy it again so that the K2 server can register the changes. Click File > Deploy. When you see the success dialog, click File > Close to return to the K2 Designer.
      Deploy Workflow
  3. The last step is to submit a form, then review the email sent by the workflow. Check in the Employee Details Form and Employee Details View. Use the Runtime URL to launch the form. Enter content into the form fields and upload a photo. Click Create. Review the email sent by the workflow. Confirm the photo appears as an email attachment.
    1. Before testing, you must check in the form and view. Checking in views and forms publishes them to the K2 server, similar to deploying a workflow. Right-click the Employee Details Form and select Check In. When you see the warning about checking in associated views, check the box to Check in associated views. Click OK.
      Check In Form and View
    2. Now you are ready to launch the form. Select the Employee Details Form, then click the Runtime URL found in the central pane.
      The Runtime URL is used to launch the form in a web browser. Use this URL as the public link to this form. For example, use this link in emails or web pages to provide access to other users.
      Runtime URL
    3. The form launches in your default browser. Complete the form fields with sample content. To upload an image, select Click here to attach an image. Navigate to and your image, then click Open to upload it to your form.
      Complete Form Fields
    4. When you have completed the form fields, click Create. (There won't be any visual indication of the form submitting. In the real world, you might configure a message to let you know the form submitted successfully.)
      Upload Photo
    5. Clicking Create creates your content as a record to the Employee Details SmartObject. Recall that the workflow sends an email using references to this record to personalize the email. The photo reference attaches a copy of the photo to the email.

    6. Open your email client and review the email. Review the personalization from the references. Notice the photo attachment. The email contains saved content from a SmartObject.
      Email Content
Review

You can personalize emails using references from the Context Browser. You can also use references as attachments. At runtime, K2 replaces references with live data from the current record. In this demonstration, you used reference fields in your message body and as an attachment. The resulting email includes personalized content and an attached image.