├── .gitattributes
├── .gitignore
├── .prettierrc.json
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── xrm.js
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   ├── ModalInfo.vue
    │   ├── ModalStart.vue
    │   └── ModalSubmit.vue
└── vue.config.js


/.gitattributes:
--------------------------------------------------------------------------------
1 |  text=lf
2 |  *.css linguist-vendored eol=lf
3 |  *.scss linguist-vendored eol=lf
4 |  *.js linguist-vendored eol=lf
5 |  *.php eol=lf
6 |  CHANGELOG.md export-ignore 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "all",
3 |   "tabWidth": 2,
4 |   "singleQuote": true,
5 |   "semi": true
6 | }
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # multi-page-modal
2 | 
3 | ## Documentation
4 | Please see the following for information on how to use this module:
5 | 
6 | <https://tldr-dynamics.com/blog/create-multipage-modal-dialog-vue>
7 | 
8 | ![Demo](https://tldr-dynamics-assets.s3.us-east-2.amazonaws.com/img/posts/multipagemodal_105.gif)
9 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "multi-page-modal",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "bulma": "^0.9.2",
13 |     "core-js": "^3.6.5",
14 |     "vue": "^2.6.11",
15 |     "vue-router": "^3.4.3"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.5.0",
19 |     "@vue/cli-plugin-eslint": "~4.5.0",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-vue": "^6.2.2",
24 |     "vue-template-compiler": "^2.6.11"
25 |   },
26 |   "eslintConfig": {
27 |     "root": true,
28 |     "env": {
29 |       "node": true
30 |     },
31 |     "extends": [
32 |       "plugin:vue/essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     },
38 |     "rules": {}
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not dead"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tcorcor1/multipage-modal-D365-vue/cf12d093efa383c6fab9d3611484e8e774805ace/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <section class="head-nav">
 4 |       <div>
 5 |         <button
 6 |           v-if="this.$route.name !== this.routeCollection[0]"
 7 |           @click="previousPage()"
 8 |           class="button is-link is-outlined is-medium is-rounded"
 9 |         >
10 |           Back
11 |         </button>
12 |       </div>
13 |       <div>
14 |         <button
15 |           v-if="
16 |             this.$route.name !==
17 |               this.routeCollection[this.routeCollection.length - 1]
18 |           "
19 |           @click="nextPage()"
20 |           class="button is-link is-outlined is-medium is-rounded"
21 |         >
22 |           Next
23 |         </button>
24 |       </div>
25 |     </section>
26 |     <router-view />
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   name: 'App',
33 |   methods: {
34 |     nextPage() {
35 |       let currPageIndex = this.routeCollection.indexOf(this.$route.name);
36 |       const nextPage = this.routeCollection[++currPageIndex];
37 |       this.$router.push({ name: nextPage });
38 |     },
39 | 
40 |     previousPage() {
41 |       let currPageIndex = this.routeCollection.indexOf(this.$route.name);
42 |       const previousPage = this.routeCollection[--currPageIndex];
43 |       this.$router.push({ name: previousPage });
44 |     },
45 |   },
46 |   computed: {
47 |     routeCollection() {
48 |       return this.$router.options.routes.map(e => e.name);
49 |     },
50 |   },
51 | };
52 | </script>
53 | 
54 | <style>
55 | body {
56 |   height: 100%;
57 | }
58 | 
59 | #app {
60 |   font-family: Avenir, Helvetica, Arial, sans-serif;
61 |   -webkit-font-smoothing: antialiased;
62 |   -moz-osx-font-smoothing: grayscale;
63 |   text-align: center;
64 |   color: #2c3e50;
65 |   margin-top: 60px;
66 |   font-size: 1.25em;
67 |   padding: 0 10% 0 10%;
68 | }
69 | 
70 | .head-nav {
71 |   display: flex;
72 |   align-content: center;
73 |   width: 100%;
74 |   justify-content: space-between;
75 | }
76 | 
77 | .body {
78 |   min-height: 300px;
79 |   display: flex;
80 |   justify-content: center;
81 |   flex-direction: column;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/assets/xrm.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-undef */
 2 | /* eslint-disable no-unused-vars */
 3 | function multiModalForm(executionContext) {
 4 |   const formContext = executionContext.getFormContext();
 5 | 
 6 |   const dialogParameters = {
 7 |     pageType: 'webresource',
 8 |     webresourceName: 'cr847_/tldr/index.html',
 9 |   };
10 | 
11 |   const navigationOptions = {
12 |     target: 2,
13 |     width: 400,
14 |     height: 600,
15 |     position: 1,
16 |   };
17 | 
18 |   Xrm.Navigation.navigateTo(dialogParameters, navigationOptions).then(
19 |     function success() {
20 |       const formFields = window.sessionStorage.getItem('tldr-form');
21 |       console.log(JSON.parse(formFields));
22 |       formContext.getAttribute('cr847_forminputs').setValue(formFields);
23 |       /*
24 | 			DO YOUR PROCESSING WITH FORM DATA
25 | 			*/
26 |       //clean-up after
27 |       window.sessionStorage.setItem('tldr-form', '');
28 |     },
29 |     function error(e) {
30 |       console.log(e.message);
31 |     },
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import 'bulma/css/bulma.css';
 5 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | new Vue({
 9 |   render: h => h(App),
10 |   router,
11 | }).$mount('#app');
12 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import ModalStart from '../views/ModalStart.vue';
 4 | import ModalInfo from '../views/ModalInfo.vue';
 5 | import ModalSubmit from '../views/ModalSubmit.vue';
 6 | 
 7 | Vue.use(Router);
 8 | 
 9 | export default new Router({
10 |   mode: 'history',
11 |   routes: [
12 |     {
13 |       path: '*', // using ModalStart as catchall/fallback as using rel. path of web resource iframe would not match route
14 |       name: 'ModalStart',
15 |       component: ModalStart,
16 |     },
17 |     {
18 |       path: '/info',
19 |       name: 'ModalInfo',
20 |       component: ModalInfo,
21 |     },
22 |     {
23 |       path: '/submit',
24 |       name: 'ModalSubmit',
25 |       component: ModalSubmit,
26 |     },
27 |   ],
28 | });
29 | 


--------------------------------------------------------------------------------
/src/views/ModalInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="body">
 3 |     <p>PAGE 2</p>
 4 |     <strong>DIRECTIONS FOR SOMETHING IMPORTANT:</strong>
 5 |     <p>
 6 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 7 |       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 8 |       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 9 |       commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
10 |       velit esse cillum dolore eu fugiat nulla pariatur.
11 |     </p>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'ModalInfo',
18 | };
19 | </script>
20 | 
21 | <style scoped></style>
22 | 


--------------------------------------------------------------------------------
/src/views/ModalStart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="body">
 3 |     <p>PAGE 1</p>
 4 |     <strong>Get Started Now</strong>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'ModalStart',
11 | };
12 | </script>
13 | 
14 | <style scoped></style>
15 | 


--------------------------------------------------------------------------------
/src/views/ModalSubmit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <p>PAGE 3</p>
  4 |     <strong>IMPORTANT FORM</strong>
  5 |     <form>
  6 |       <div class="form-field">
  7 |         <label class="label" for="name">Name</label>
  8 |         <input
  9 |           id="name"
 10 |           class="input"
 11 |           type="text"
 12 |           placeholder="Provide Fullname"
 13 |         />
 14 |       </div>
 15 |       <div class="form-field">
 16 |         <label class="label" for="username">Username</label>
 17 |         <input
 18 |           id="username"
 19 |           class="input"
 20 |           type="text"
 21 |           placeholder="Provide Username"
 22 |         />
 23 |       </div>
 24 |       <div class="form-field">
 25 |         <label class="label" for="email">Email</label>
 26 |         <input
 27 |           id="email"
 28 |           class="input"
 29 |           type="text"
 30 |           placeholder="Provide Email"
 31 |         />
 32 |       </div>
 33 |       <div style="text-align: right;">
 34 |         <input
 35 |           type="submit"
 36 |           class="button is-primary is-medium"
 37 |           value="Submit"
 38 |           @click="submitFormHandler"
 39 |         />
 40 |       </div>
 41 |     </form>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import axios from 'axios';
 47 | 
 48 | export default {
 49 |   name: 'ModalSubmit',
 50 |   methods: {
 51 |     submitFormHandler(clickEvent) {
 52 |       clickEvent.preventDefault();
 53 | 
 54 |       const formFields = this.returnFormInputs();
 55 |       const fieldsJson = JSON.stringify(formFields);
 56 | 
 57 |       parent.window.sessionStorage.setItem('tldr-form', fieldsJson);
 58 |       window.close();
 59 |     },
 60 | 
 61 |     returnFormInputs() {
 62 |       return Array.from(document.getElementsByClassName('input'))
 63 |         .filter(e => e.value)
 64 |         .map(e => {
 65 |           return {
 66 |             id: e.id,
 67 |             value: e.value,
 68 |           };
 69 |         });
 70 |     },
 71 | 
 72 |     async triggerFlowWithFetch(clickEvent) {
 73 |       clickEvent.preventDefault();
 74 |       const flowEndpoint = process.env.VUE_APP_FLOW_ENDPOINT;
 75 |       const formFields = this.returnFormInputs();
 76 | 
 77 |       await fetch(flowEndpoint, {
 78 |         method: 'POST',
 79 |         headers: {
 80 |           'content-type': 'application/json;charset=UTF-8',
 81 |         },
 82 |         body: JSON.stringify(formFields),
 83 |       })
 84 |         .then(response => {
 85 |           if (response.ok) {
 86 |             return response.json();
 87 |           } else {
 88 |             throw new Error(
 89 |               'Multipage Modal Failure: POST response status not ok',
 90 |             );
 91 |           }
 92 |         })
 93 |         .then(result => {
 94 |           console.log('Fetch Response', result);
 95 |         })
 96 |         .catch(error => {
 97 |           console.error(error);
 98 |         });
 99 | 
100 |       window.close();
101 |     },
102 | 
103 |     async triggerFlowWithAxios(clickEvent) {
104 |       clickEvent.preventDefault();
105 |       const flowEndpoint = process.env.VUE_APP_FLOW_ENDPOINT;
106 |       const formFields = this.returnFormInputs();
107 | 
108 |       await axios
109 |         .post(flowEndpoint, {
110 |           headers: { 'content-type': 'application/json;charset=UTF-8' },
111 |           data: formFields,
112 |         })
113 |         .then(response => {
114 |           console.log('axios response', response);
115 |         })
116 |         .catch(error => {
117 |           console.error(
118 |             'Multipage Modal Failure: POST response status not ok',
119 |             error.message,
120 |           );
121 |         });
122 | 
123 |       window.close();
124 |     },
125 |   },
126 | };
127 | </script>
128 | 
129 | <style scoped>
130 | form {
131 |   margin: 20px;
132 | }
133 | 
134 | .form-field {
135 |   padding: 10px 0;
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   configureWebpack: {
 3 |     optimization: {
 4 |       splitChunks: false,
 5 |     },
 6 |   },
 7 |   css: {
 8 |     extract: false,
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------