FOUR-15510: [Summer24] Actions By Email V2

src/components/accordions.js

@@ -13,6 +13,7 @@ export default [
       'initiallyChecked',
       'screen',
       'multipleUpload',
+      'linkUrl'
     ],
     open: true,
   },

src/components/index.js

@@ -47,6 +47,7 @@ import FormListTable from "./renderer/form-list-table.vue";
 import FormAnalyticsChart from "./renderer/form-analytics-chart.vue";
 import accordions from "@/components/accordions";
 import VariableNameGenerator from "@/components/VariableNameGenerator";
+import { LinkButton } from "./renderer";
 import "../assets/css/tabs.css";
 
 const rendererComponents = {
@@ -161,6 +162,7 @@ export default {
 
     Vue.use(Vuex);
     Vue.component("FormListTable", FormListTable);
+    Vue.component("LinkButton", LinkButton);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,

src/components/renderer/index.js

@@ -18,3 +18,4 @@ export { default as FormListTable } from "./form-list-table.vue";
 export { default as FormAnalyticsChart } from "./form-analytics-chart.vue";
 export { default as FormRequests } from "./form-requests.vue";
 export { default as FormTasks } from "./form-tasks.vue";
+export { default as LinkButton } from "./link-button.vue";

src/components/renderer/link-button.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="form-group">
+    <a :class="classColor" :href="inputUrlLink"> {{ label }} </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    "variant",
+    "label",
+    "event",
+    "eventData",
+    "name",
+    "fieldValue",
+    "value",
+    "inputUrlLink"
+  ],
+  computed: {
+    classColor() {
+      return `text-${this.variant}`;
+    }
+  }
+};
+</script>
+<style scoped>
+a {
+  text-decoration: underline;
+}
+</style>

src/form-builder-controls.js

@@ -23,6 +23,7 @@ import {
   BWrapperComponent,
 } from '@processmaker/vue-form-elements';
 import { dataSourceValues } from '@/components/inspector/data-source-types';
+import LinkButton from "./components/renderer/link-button.vue";
 
 import {
   bgcolorProperty,
@@ -990,5 +991,46 @@ export default [
         }
       ]
     }
+  },
+  {
+    editorComponent: LinkButton,
+    editorBinding: 'LinkButton',
+    rendererComponent: LinkButton,
+    rendererBinding: "LinkButton",
+
+    control: {
+      popoverContent: "Add an action to submit your form or update a field",
+      group: 'Content Fields',
+      order: 6.0,
+      label: "Link URL",
+      component: "LinkButton",
+      "editor-component": "LinkButton",
+      "editor-control": "LinkButton",
+      config: {
+        label: "New Link",
+        icon: "fas fa-link",
+        variant: "primary",
+        event: "link",
+      },
+      inspector: [
+        {
+          type: 'FormInput',
+          field: 'label',
+          config: {
+            label: 'Label',
+            helper: 'The label describes the button\'s text',
+          },
+        },
+        {
+          type: 'FormInput',
+          field: 'linkUrl',
+          config: {
+            label: 'Link URL',
+            helper: 'Type here the URL link. Mustache syntax is supported.',
+          },         
+        },
+        buttonVariantStyleProperty
+      ]
+    }
   }
 ];