​​How to display and edit an image in SPARK form from another image list?

Last Update: March 06, 2018

Suppose you have a column on a custom list with type "Hyperlink or Picture" and its "Format URL" is "Picture" and you want to display this image column in the SPARK form, if the image is already in the existing list item, it will be displayed fine. If there is no image in the existing list item, it will display a broken image icon.
In this case, we will learn how to display and edit an image in SPARK form from another image list. To do that, we will add an edit button to the form to set the image path to the picture control using imageSelector() function.

Here are the steps on how to do that considering that you have a list with image column named "Image".

  1. Open the form in design mode.
  2. Add the following to the form design workspace area:
    How to display and edit an image in SPARK form from another image list1.jpg
  3. Select the imgImage control
  4. In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.
    How to auto-shifting Panel control in a form2.jpg
  5. Add a new rule as follows:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Action.
    C. Keep the Event Type onClick.
    D. In the Action section, type the following script:
         imageSelector(imgImage)
    E. Click on the Save button to save the rule.

    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  6. Test the form by clicking on the Preview button in the View Group.