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 + ] + } } ];