Add interpolation to block titles, tab titles, iframe url, content block body, metric transformation function and automation button labels

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

@@ -25,6 +25,7 @@
                 v-model="block.title"
                 :placeholder="$t('general.titlePlaceholder')"
               />
+
               <b-input-group-append>
                 <page-translator
                   v-if="page"

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

@@ -8,15 +8,40 @@
     >
       <p
         :style="{ 'white-space': 'pre-wrap' }"
-        v-html="options.body"
+        v-html="contentBody"
       />
     </div>
   </wrap>
 </template>
 <script>
 import base from './base'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { NoID } from '@cortezaproject/corteza-js'
 
 export default {
   extends: base,
+
+  computed: {
+    contentBody () {
+      const { body } = this.options
+
+      // Regular expression to match ${} tokens
+      const tokenRegex = /\${(.*?)}/g
+
+      // Replace each token with its prefiltered content
+      const prefilteredBody = body.replace(tokenRegex, (match, tokenContent) => {
+        const reconstructedToken = '${' + tokenContent + '}'
+
+        return evaluatePrefilter(reconstructedToken, {
+          record: this.record,
+          recordID: (this.record || {}).recordID || NoID,
+          ownerID: (this.record || {}).ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      })
+
+      return prefilteredBody
+    },
+  },
 }
 </script>

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

@@ -14,6 +14,8 @@
 </template>
 <script>
 import base from './base'
+import { NoID } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   extends: base,
@@ -29,7 +31,14 @@ export default {
         }
       }
 
-      return src || blank
+      const prefilteredSource = evaluatePrefilter(src, {
+        record: this.record,
+        recordID: (this.record || {}).recordID || NoID,
+        ownerID: (this.record || {}).ownedBy || NoID,
+        userID: (this.$auth.user || {}).userID || NoID,
+      })
+
+      return prefilteredSource || blank
     },
   },
 

client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue

@@ -208,9 +208,21 @@
                   v-model="edit.transformFx"
                   placeholder="v"
                   class="mb-1"
+                  @change="evaluateTransformation"
                 />
 
                 <small>{{ $t('metric.edit.transformFunctionDescription') }}</small>
+                <b-form-text>
+                  <i18next
+                    path="metric.edit.transformFootnote"
+                    tag="label"
+                  >
+                    <code>${record.values.fieldName}</code>
+                    <code>${recordID}</code>
+                    <code>${ownerID}</code>
+                    <code>${userID}</code>
+                  </i18next>
+                </b-form-text>
               </b-form-group>
 
               <b-form-group
@@ -329,6 +341,7 @@ import MStyle from './MStyle'
 import { mapGetters } from 'vuex'
 import MetricBase from '../MetricBase'
 import { compose, NoID } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   i18nOptions: {
@@ -477,6 +490,15 @@ export default {
       this.dimensionModifiers = []
       this.aggregationOperations = []
     },
+
+    evaluateTransformation (t) {
+      this.edit.transformFx = evaluatePrefilter(t, {
+        record: this.record,
+        recordID: (this.record || {}).recordID || NoID,
+        ownerID: (this.record || {}).ownedBy || NoID,
+        userID: (this.$auth.user || {}).userID || NoID,
+      })
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/Shared/AutomationButtons.vue

@@ -8,12 +8,13 @@
       :class="buttonClass"
       @click.prevent="handle(b)"
     >
-      {{ b.label || '-' }}
+      {{ handleButtonLabel(b.label) || '-' }}
     </b-button>
   </div>
 </template>
 <script>
-import { compose, automation } from '@cortezaproject/corteza-js'
+import { compose, automation, NoID } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import base from '../base'
 
 export default {
@@ -181,6 +182,15 @@ export default {
         this.processing = false
       }
     },
+
+    handleButtonLabel (label) {
+      return evaluatePrefilter(label, {
+        record: this.record,
+        recordID: (this.record || {}).recordID || NoID,
+        ownerID: (this.record || {}).ownedBy || NoID,
+        userID: (this.$auth.user || {}).userID || NoID,
+      })
+    },
   },
 }
 </script>

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

@@ -129,8 +129,9 @@
 
 <script>
 import base from './base'
-import { compose } from '@cortezaproject/corteza-js'
+import { compose, NoID } from '@cortezaproject/corteza-js'
 import { fetchID } from 'corteza-webapp-compose/src/lib/block'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   i18nOptions: {
@@ -234,7 +235,14 @@ export default {
 
     getTabTitle ({ title, block = {} }, tabIndex) {
       const { title: blockTitle, kind } = block
-      return title || blockTitle || kind || `${this.$t('tab')} ${tabIndex + 1}`
+      const prefilteredTitle = evaluatePrefilter(blockTitle, {
+        record: this.record,
+        recordID: (this.record || {}).recordID || NoID,
+        ownerID: (this.record || {}).ownedBy || NoID,
+        userID: (this.$auth.user || {}).userID || NoID,
+      })
+
+      return title || prefilteredTitle || blockTitle || kind || `${this.$t('tab')} ${tabIndex + 1}`
     },
 
     isTabLazy ({ block = {} }) {
@@ -257,6 +265,7 @@ export default {
     .card {
       border-radius: 0;
     }
+
     .card-header {
       border-radius: 0;
     }

client/web/compose/src/components/PageBlocks/Wrap/Card.vue

@@ -14,10 +14,10 @@
         <div v-if="!headerSet">
           <div class="d-flex">
             <h5
-              v-if="block.title"
+              v-if="blockTitle"
               class="text-truncate mb-0"
             >
-              {{ block.title }}
+              {{ blockTitle }}
 
               <slot name="title-badge" />
             </h5>

client/web/compose/src/components/PageBlocks/Wrap/Plain.vue

@@ -17,7 +17,7 @@
             <h5
               class="text-truncate mb-0"
             >
-              {{ block.title }}
+              {{ blockTitle }}
 
               <slot name="title-badge" />
             </h5>

client/web/compose/src/components/PageBlocks/Wrap/base.vue

@@ -1,5 +1,6 @@
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   i18nOptions: {
@@ -79,6 +80,15 @@ export default {
       const params = this.block.blockID === NoID ? { block: this.block } : { blockID: this.block.blockID }
       return this.isBlockMagnified ? undefined : params
     },
+
+    blockTitle () {
+      return evaluatePrefilter(this.block.title, {
+        record: this.$attrs.record,
+        recordID: (this.$attrs.record || {}).recordID || NoID,
+        ownerID: (this.$attrs.record || {}).ownedBy || NoID,
+        userID: (this.$auth.user || {}).userID || NoID,
+      })
+    },
   },
 }
 </script>

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

@@ -198,8 +198,9 @@ metric:
     dimensionFieldLabel: Field
     dimensionFieldPlaceholder: Dimension field
     dimensionLabel: Dimension
-    filterFootnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
     filterLabel: Filter
+    filterFootnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
+    transformFootnote: Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
     labelLabel: Label
     labelPlaceholder: Label
     metricFieldLabel: Field