Editing designs
Edit an existing design with the iOS SDK.
After a user creates a design, they may want to edit that design at a later point in time. To enable this, Canva provides your app with the ID of the user's design. You can use this ID to re-open the design in the Canva editor.
This part of the tutorial series explains how to open an existing design with the iOS SDK.

Step 1: Set up the UI

For the sake of simplicity, this tutorial uses Storyboards to define the UI of the app. This is not required to use the Canva Button.
  1. 1.
    Open the Main.storyboard file.
  2. 2.
    Add a Button to the app.
  3. 3.
    Open the Attributes Inspector for the Button.
  4. 4.
    Uncheck the State > Enabled option.
  5. 5.
    Choose a Label for the Button.
  6. 6.
    Create an outlet for the Button:
    1
    @IBOutlet weak var editDesignButton: UIButton!
    Copied!
    In this case, the outlet is called editDesignButton.
  7. 7.
    Create an action for the Button:
    1
    @IBAction func editDesign(_ sender: Any) {
    2
    // code goes here
    3
    }
    Copied!
    In this case, the action is called editDesign.

Step 2: Get the ID of the user's design

In the ViewController class, create a property to store the ID of the user's most recent design:
1
var previousDesignId: String?
Copied!
Then, when a user creates or publishes a design:
  • Update the value of the previousDesignId variable.
  • Enable the editDesign button.
The following snippet demonstrates how to do this with the didPublishDesignWithDesignID and didFinishLoadingWithDesignID methods:
1
func canvaViewController(_ canvaViewController: CanvaViewController, didPublishDesignWithDesignID designID: String?, url: URL?) {
2
print("Published a design with an ID of \(designID ?? "nil").")
3
4
// Download and render the user's image
5
guard let url = url else { return }
6
let task = URLSession.shared.dataTask(with: url) { data, urlResponse, error in
7
guard let downloadedImage = data,
8
let imageData = Data(base64Encoded: downloadedImage.base64EncodedString())
9
else { return }
10
DispatchQueue.main.async {
11
self.publishedImageView.image = UIImage(data: imageData)
12
}
13
}
14
15
task.resume()
16
17
// Save the ID of the user's design
18
previousDesignId = designID
19
20
// Enable the "Edit design" button
21
editDesignButton.isEnabled = true
22
}
23
24
// ...
25
26
func canvaViewController(_ canvaViewController: CanvaViewController, didFinishLoadingWithDesignID designID: String) {
27
// Save the ID of the user's design
28
previousDesignId = designID
29
30
// Enable the "Edit design" button
31
editDesignButton.isEnabled = true
32
}
Copied!

Step 3: Create a CanvaViewController

Copy the following code into the editDesign action:
1
guard let previousDesignId = previousDesignId else { return }
2
do {
3
let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
4
let canvaViewController = try CanvaViewController(designID: previousDesignId, configuration: configuration)
5
canvaViewController.delegate = self
6
canvaViewController.preferredControlTintColor = UIColor(named: "canvaColor")
7
self.present(canvaViewController, animated: true)
8
} catch {
9
print("Something went wrong. Unable to edit design with ID of \(previousDesignId).")
10
print(error)
11
}
Copied!
The editDesign action is almost identical to the code in the createDesign action. There's only two differences:
  • The function returns early if previousDesignId isn't defined.
  • A designID argument is passed into the CanvaViewController instead of a designType. Canva uses this ID to open the existing design in the editor.
After making these changes: run the app, create a new design, and close the web view. You should be able to re-open the design by clicking the Edit design button.

Example

ViewController.swift

1
import UIKit
2
import CanvaButton
3
4
class ViewController: UIViewController {
5
6
var previousDesignId: String?
7
8
@IBOutlet weak var publishedImageView: UIImageView!
9
@IBOutlet weak var editDesignButton: UIButton!
10
11
override func viewDidLoad() {
12
super.viewDidLoad()
13
}
14
15
@IBAction func createDesign(_ sender: Any) {
16
do {
17
let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
18
let canvaViewController = try CanvaViewController(designType: "BookCover", configuration: configuration)
19
canvaViewController.delegate = self
20
self.present(canvaViewController, animated: true)
21
} catch {
22
print("Something went wrong. Unable to create a new design.")
23
print(error)
24
}
25
}
26
27
@IBAction func editDesign(_ sender: Any) {
28
guard let previousDesignId = previousDesignId else { return }
29
do {
30
let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
31
let canvaViewController = try CanvaViewController(designID: previousDesignId!, configuration: configuration)
32
canvaViewController.delegate = self
33
canvaViewController.preferredControlTintColor = UIColor(named: "canvaColor")
34
self.present(canvaViewController, animated: true)
35
} catch {
36
print("Something went wrong. Unable to edit design with ID of \(previousDesignId).")
37
print(error)
38
}
39
}
40
41
}
42
43
extension ViewController: CanvaViewControllerDelegate {
44
func canvaViewController(_ canvaViewController: CanvaViewController, didFailToLoadWithError error: Error) {
45
print("Unable to load Canva editor.")
46
print(error)
47
}
48
49
func canvaViewController(_ canvaViewController: CanvaViewController, didTerminateLoadingForDesignID designID: String?) {
50
print("Unable to open design with an ID of \(designID ?? "nil").")
51
}
52
53
54
func canvaViewController(_ canvaViewController: CanvaViewController, didPublishDesignWithDesignID designID: String?, url: URL?) {
55
print("Published a design with an ID of \(designID ?? "nil").")
56
57
// Download and render the user's image
58
guard let url = url else { return }
59
let task = URLSession.shared.dataTask(with: url) { data, urlResponse, error in
60
guard let downloadedImage = data,
61
let imageData = Data(base64Encoded: downloadedImage.base64EncodedString())
62
else { return }
63
DispatchQueue.main.async {
64
self.publishedImageView.image = UIImage(data: imageData)
65
}
66
}
67
68
task.resume()
69
70
// Save the ID of the user's design
71
previousDesignId = designID
72
73
// Enable the "Edit design" button
74
editDesignButton.isEnabled = true
75
}
76
77
func canvaViewDidFailPublish(forDesignID designID: String?, withError error: Error) {
78
print("Unable to publish design with an ID of \(designID ?? "nil").")
79
print(error)
80
}
81
82
func canvaViewController(_ canvaViewController: CanvaViewController, didFinishLoadingWithDesignID designID: String) {
83
print("Opened a design with an ID of \(designID).")
84
previousDesignId = designID
85
}
86
}
Copied!
Last modified 1mo ago