Page Open & Return Value

Scenario

In frontend development, there are often scenarios of Page A opening Page B. If you want to transfer parameters from Page A to Page B, you can transfer them directly through the URL. But if you want to return data from Page B to Page A, the operation logic will be more complex

CabloyJS provides a page interaction mechanism, which makes parameter passing and return value between pages very convenient and natural

Page A

Open Page B through method $view.navigate on Page A

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/page/openReturn.vue

onPerformOpen() {
  return new Promise((resolve, reject) => {
    this.$view.navigate('/test/party/kitchen-sink/page/pageReturn', {
      context: {
        params: {
          value: this.value,
        },
        callback: (code, data) => {
          if (code === 200) {
            this.value = data.value;
            resolve();
          }
          // Page B closed (no value returned)
          if (code === false) {
            reject();
          }
          // Page B closed (has value returned)
          if (code === null) {
            // do nothing
          }
        },
      },
    });
  });
},

Name	Description
context	context
context.params	parameters
context.callback	callback

context.callback may be invoked twice:

Page B returns value through callback, at this time code===200

invoke callback again when Page B is closed. If you have value returned to Page A, code===null. Otherwise, code===false

Page B

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/page/pageReturn.vue

<script>
import Vue from 'vue';
const ebPageContext = Vue.prototype.$meta.module.get('a-components').options.components.ebPageContext;
export default {
  mixins: [ebPageContext],
  data() {
    return {};
  },
  computed: {
    value() {
      return this.contextParams.value;
    },
  },
  methods: {
    onPerformDone() {
      const valueNew = this.value + 1;
      this.contextCallback(200, { value: valueNew });
      this.$f7router.back();
    },
  },
};

</script>

ebPageContext

The Page B component need to mixin component ebPageContext, so that it can get page parameters and invoke callback to return value

get page parameters

this.contextParams contains the parameters passed by Page A

return value

Return value to Page A through this.contextCallback

close page

Close Page B through this.$f7router.back, and navigate back to Page A