1
+ < div ng-controller ="Umbraco.Cms.Integrations.Automation.Zapier.ZapConfigController as vm ">
2
+ < umb-box >
3
+ < umb-box-header title ="Content Properties "> </ umb-box-header >
4
+ < umb-box-content >
5
+ < div >
6
+ < p >
7
+ < a href ="https://zapier.com/ "> Zapier</ a > is an online platform that helps you automate workflows by connecting your apps and services you use.
8
+ This allows you to automate tasks without having to build this integration yourself.
9
+ When an event happens in one app, Zapier can tell another app to perform (or do) a particular action - no code necessary.
10
+ </ p >
11
+ < p >
12
+ The heart of any automation boils down to this simple command: < b > WHEN</ b > < span > this happens</ span > < b > THEN</ b > < span > do that</ span > .
13
+ </ p >
14
+ < p >
15
+ A Zap is an automated workflow that tells your apps to follow this simple command: "When this happens, do that."
16
+ Every Zap has a trigger and one or more actions. A trigger is an event that starts a Zap, and an action is what your Zap does for you.
17
+ </ p >
18
+ < p >
19
+ Zap triggers use webhooks to execute the actions. Webhooks are automated messages sent from apps when something happens.
20
+ </ p >
21
+ < p >
22
+ You can initiate your automation when a content item of a particular document type is published in Umbraco.
23
+ </ p >
24
+ < p >
25
+ Using the filters below, map content items with Zap triggered webhooks. This will:
26
+ </ p >
27
+ < ul >
28
+ < li > Enable Zap invocations when content of the specified document type is published.</ li >
29
+ < li > Trigger a sample request using the webhook URL to review when creating the Zap trigger.</ li >
30
+ </ ul >
31
+ </ div >
32
+ < div class ="mt3 ">
33
+ < input id ="inWebHookUrl " type ="text " ng-model ="vm.webHookUrl " class ="w-20 mb0 " placeholder ="WebHook URL " no-dirty-check />
34
+ < select id ="selContentTypes " ng-model ="vm.selectedContentType " class ="mb0 " no-dirty-check >
35
+ < option value =""> Please select a content type</ option >
36
+ < option ng-repeat ="item in vm.contentTypes " value ="{{ item.name }} "> {{ item.name }}</ option >
37
+ </ select >
38
+ < umb-button action ="vm.onAdd() "
39
+ type ="button "
40
+ button-style ="primary "
41
+ label ="Add ">
42
+ </ umb-button >
43
+ </ div >
44
+ </ umb-box-content >
45
+ </ umb-box >
46
+ < umb-box >
47
+ < umb-box-header title ="Registered Webhooks "> </ umb-box-header >
48
+ < umb-content >
49
+ < div class ="mt2 ">
50
+
51
+ < umb-load-indicator ng-show ="vm.loading "> </ umb-load-indicator >
52
+
53
+ < div class ="umb-table " ng-if ="vm.contentConfigs ">
54
+ <!-- Listviews head section -->
55
+ < div class ="umb-table-head ">
56
+ < div class ="umb-table-row ">
57
+ < div class ="umb-table-cell "> </ div >
58
+ < div class ="umb-table-cell umb-table__name ">
59
+ < a class ="umb-table-head__link " href ="# " prevent-default >
60
+ < span > Content Type Name</ span >
61
+ </ a >
62
+ </ div >
63
+ < div class ="umb-table-cell ">
64
+ < a class ="umb-table-head__link " href ="# " prevent-default >
65
+ < span > WebHook URL</ span >
66
+ </ a >
67
+ </ div >
68
+ < div class ="umb-table-cell "> </ div >
69
+ </ div >
70
+ </ div >
71
+
72
+ <!-- Listview body section -->
73
+ < div class ="umb-table-body ">
74
+ < div class ="umb-table-row "
75
+ ng-repeat ="row in vm.contentConfigs track by $index ">
76
+ < div class ="umb-table-cell "> </ div >
77
+ < div class ="umb-table-cell umb-table__name ">
78
+ < span ng-bind ="row.contentTypeName "> </ span >
79
+ </ div >
80
+ < div class ="umb-table-cell ">
81
+ < span ng-bind ="row.webHookUrl "> </ span >
82
+ </ div >
83
+ < div class ="umb-table-cell ">
84
+ < umb-button action ="vm.onTrigger(row.contentTypeName, row.webHookUrl) "
85
+ label ="Trigger Webhook "
86
+ type ="button "
87
+ button-style ="info ">
88
+ </ umb-button >
89
+ < umb-button action ="row.showDeletePrompt = true "
90
+ label ="Delete "
91
+ type ="button "
92
+ button-style ="danger ">
93
+ </ umb-button >
94
+ < umb-confirm-action ng-if ="row.showDeletePrompt "
95
+ direction ="right "
96
+ on-confirm ="vm.onDelete(row.id) "
97
+ on-cancel ="row.showDeletePrompt = false ">
98
+ </ umb-confirm-action >
99
+ </ div >
100
+ </ div >
101
+ </ div >
102
+ </ div >
103
+ </ div >
104
+ </ umb-content >
105
+ </ umb-box >
106
+ </ div >
0 commit comments