diff --git a/src/components/accordions.js b/src/components/accordions.js
index d54c37e4e..3fe7fa19e 100644
--- a/src/components/accordions.js
+++ b/src/components/accordions.js
@@ -13,6 +13,7 @@ export default [
'initiallyChecked',
'screen',
'multipleUpload',
+ 'linkUrl'
],
open: true,
},
diff --git a/src/components/index.js b/src/components/index.js
index b91d2f7f1..ac4064f65 100644
--- a/src/components/index.js
+++ b/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,
diff --git a/src/components/renderer/index.js b/src/components/renderer/index.js
index 576cd6594..b376e9d90 100755
--- a/src/components/renderer/index.js
+++ b/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";
diff --git a/src/components/renderer/link-button.vue b/src/components/renderer/link-button.vue
new file mode 100644
index 000000000..2c75eb699
--- /dev/null
+++ b/src/components/renderer/link-button.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 054ad1cf4..10c84ad2c 100755
--- a/src/form-builder-controls.js
+++ b/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
+ ]
+ }
}
];