Add options for adding records in different views

Author: EmmyMay

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -1995,18 +1995,22 @@ export default {
 
       if (!(pageID || this.options.rowCreateUrl)) return
 
-      if (this.inModal) {
+      const route = {
+        name: this.options.rowCreateUrl || 'page.record.create',
+        params: { pageID, refRecord },
+        query: null,
+      }
+
+      if (this.inModal || this.options.addRecordDisplayOption === 'modal') {
         this.$root.$emit('show-record-modal', {
           recordID: NoID,
           recordPageID: this.recordPageID,
           refRecord,
         })
+      } else if (this.options.addRecordDisplayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
       } else {
-        this.$router.push({
-          name: this.options.rowCreateUrl || 'page.record.create',
-          params: { pageID, refRecord },
-          query: null,
-        })
+        this.$router.push(route)
       }
     },
 

client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue

@@ -593,6 +593,7 @@
                 />
               </b-form-group>
             </b-col>
+
             <b-col
               cols="12"
               lg="6"
@@ -630,6 +631,22 @@
             <b-col
               cols="12"
               lg="6"
+            >
+              <b-form-group
+                :label="$t('recordList.record.addRecordOptions')"
+                label-class="text-primary"
+              >
+                <b-form-select
+                  v-model="options.addRecordDisplayOption"
+                  :options="recordCreateOptions"
+                  :disabled="options.hideAddButton"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col
+              cols="12"
+              md="6"
             >
               <b-form-group
                 :label="$t('recordList.record.editMode')"
@@ -881,6 +898,14 @@ export default {
       ]
     },
 
+    recordCreateOptions () {
+      return [
+        { value: 'sameTab', text: this.$t('recordList.record.createInSameTab') },
+        { value: 'newTab', text: this.$t('recordList.record.createInNewTab') },
+        { value: 'modal', text: this.$t('recordList.record.createInModal') },
+      ]
+    },
+
     moduleOptions () {
       return [
         { moduleID: NoID, name: this.$t('general.label.none') },

lib/js/src/compose/types/page-block/record-list.ts

@@ -35,6 +35,7 @@ export interface Options {
   perPage: number;
   recordDisplayOption: string;
   recordSelectorDisplayOption: string;
+  addRecordDisplayOption: string;
   magnifyOption: string;
 
   fullPageNavigation: boolean;
@@ -95,6 +96,7 @@ const defaults: Readonly<Options> = Object.freeze({
   perPage: 20,
   recordDisplayOption: 'sameTab',
   recordSelectorDisplayOption: 'sameTab',
+  addRecordDisplayOption: 'sameTab',
   magnifyOption: '',
 
   fullPageNavigation: false,
@@ -140,7 +142,19 @@ export class PageBlockRecordList extends PageBlock {
     if (!o) return
 
     Apply(this.options, o, CortezaID, 'moduleID')
-    Apply(this.options, o, String, 'prefilter', 'presort', 'selectMode', 'positionField', 'refField', 'recordDisplayOption', 'magnifyOption', 'recordSelectorDisplayOption')
+
+    Apply(this.options, o, String,
+      'prefilter',
+      'presort',
+      'selectMode',
+      'positionField',
+      'refField',
+      'recordDisplayOption',
+      'magnifyOption',
+      'recordSelectorDisplayOption',
+      'addRecordDisplayOption'
+    )
+
     Apply(this.options, o, Number, 'perPage', 'refreshRate')
 
     if (o.fields) {

locale/en/corteza-webapp-compose/block.yaml

@@ -484,6 +484,9 @@ recordList:
     openInSameTab: Open record in the same tab
     openInNewTab: Open record in a new tab
     openInModal: Open record in a modal
+    createInSameTab: Create record in the same tab
+    createInNewTab: Create record in a new tab
+    createInModal: Create record in a modal
     enableBulkRecordEdit: Enable bulk record edit
     linkToParent: Link to parent record
     buttons: Record buttons
@@ -497,6 +500,7 @@ recordList:
       permissions: Permissions
     recordDisplayOptions: On record click
     recordSelectorDisplayOptions: On record selector click
+    addRecordOptions: On add record click 
   recordPage: record page
   refField:
     footnote: Field that links records with the parent record