((resolve, reject) => item);
101 | };
102 |
103 | const changeSelectedHero = (shName: string) => {
104 | let filteredHeros = heroList.filter((h) => h.pmav_name === (shName ?? ""));
105 | setSelectedHero(filteredHeros[0]);
106 | openPanel();
107 | };
108 |
109 | const showHeroDetails = () => {
110 | let filteredHeros = heroList.filter((h) => h.pmav_name === (heroPersona.text ?? ""));
111 | setSelectedHero(filteredHeros[0]);
112 | openPanel();
113 | };
114 |
115 | const filterPersonasByText = (filterText: string): IPersonaProps[] => {
116 | return heroPersonaList.filter((item) => doesTextStartWith(item.text as string, filterText));
117 | };
118 |
119 | const populateMRUs = () => {
120 | setMRUSuperHeroPersona([]);
121 | mruSuperHero?.map(async (sh: string) => {
122 | let filteredHero = heroList.filter((h) => h.pmav_name === (sh ?? ""))[0];
123 | let shUrl = await ApiHelper.GetSuperHeroImageUrl(sh);
124 |
125 | let cardStyle = {
126 | backgroundImage: "url(" + shUrl + ")",
127 | backgroundPosition: "center",
128 | };
129 |
130 | let card = (
131 |
132 |
133 |
{sh}
134 |
135 | {sh} was created by {filteredHero.pmav_publisher} publisher.
136 |
137 |
145 |
146 |
157 |
158 | {props.text}
159 |
160 | ) => console.log("onBlur called"),
167 | onFocus: (ev: React.FocusEvent) => console.log("onFocus called"),
168 | "aria-label": "Hero Picker",
169 | }}
170 | onItemSelected={onItemSelected}
171 | resolveDelay={300}
172 | styles={marginStyles}
173 | />
174 |
175 |
182 |
183 |
184 |
Most Recently Searched Super Heros
185 |
186 | {mruSuperHeroPersona}
187 |
194 |
195 | {selectedHero?.pmav_name ?? "--"}
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 | Stats
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 | );
214 | };
215 |
216 | function onRenderSecondaryText(props: IPersonaProps | undefined): JSX.Element {
217 | return (
218 |
219 | {props?.secondaryText}
220 |
221 | );
222 | }
223 |
224 | function removeDuplicates(personas: IPersonaProps[], possibleDupes: IPersonaProps[] | undefined) {
225 | return personas.filter((persona) => !listContainsPersona(persona, possibleDupes));
226 | }
227 |
228 | function listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[] | undefined) {
229 | if (!personas || !personas.length || personas.length === 0) {
230 | return false;
231 | }
232 | return personas.filter((item) => item.text === persona.text).length > 0;
233 | }
234 |
235 | function doesTextStartWith(text: string, filterText: string): boolean {
236 | return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
237 | }
238 |
239 | export default HeroPicker;
240 |
--------------------------------------------------------------------------------
/src/helper/api-helper.tsx:
--------------------------------------------------------------------------------
1 | export default class ApiHelper {
2 | /**
3 | * GetSuperHeroImageUrl will retrieve the super hero image from custom API
4 | */
5 | public static async GetSuperHeroImageUrl(superheroName: string): Promise {
6 | let headers = new Headers();
7 | headers.append("Content-Type", "application/json");
8 | headers.append("Access-Control-Allow-Origin", "https://powermaverick.crm.dynamics.com");
9 | headers.append("Access-Control-Allow-Credentials", "true");
10 |
11 | let raw = JSON.stringify({
12 | name: superheroName,
13 | });
14 |
15 | let requestOptions: RequestInit = {
16 | method: "POST",
17 | mode: "cors",
18 | headers: headers,
19 | body: raw,
20 | redirect: "follow",
21 | };
22 |
23 | let shData = await fetch("https://maverick-superheros.azurewebsites.net/superhero", requestOptions);
24 | let shJsonData = await shData.json();
25 |
26 | return shJsonData.url;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/helper/data-helper.tsx:
--------------------------------------------------------------------------------
1 | export default class DataHelper {
2 | /**
3 | * Fetches the data from Dataverse based on provided FetchXML
4 | */
5 | public static Fetch(fetchXml: string): any[] {
6 | let values: any[] = [];
7 |
8 | var xmlParser = new DOMParser();
9 | var parsedFetchXml = xmlParser.parseFromString(fetchXml, "text/xml");
10 | var entityName = (parsedFetchXml.getElementsByTagName("entity")[0] as any).attributes["name"].value;
11 |
12 | var encodedFetchXml = encodeURIComponent(fetchXml);
13 |
14 | return this.GetXrmContext()
15 | .WebApi.retrieveMultipleRecords(entityName, "?fetchXml=" + encodedFetchXml)
16 | .then(
17 | (results: any) => {
18 | let formattedResults = this.FormatRecords(results.entities);
19 | values = values.concat(formattedResults);
20 | return values;
21 | },
22 | function (error: any) {
23 | // TODO
24 | },
25 | );
26 | }
27 |
28 | private static GetXrmContext() {
29 | if ((window as any).Xrm) {
30 | return (window as any).Xrm;
31 | } else if ((window as any).opener && (window as any).opener.Xrm) {
32 | // Ribbon button dialogs
33 | return (window as any).opener.Xrm;
34 | } else if ((window as any).parent && (window as any).parent.Xrm) {
35 | // Dashboard & sitemap standalone pages
36 | return (window as any).parent.Xrm;
37 | } else if ((window as any).opener && (window as any).opener.parent && (window as any).opener.parent.Xrm) {
38 | // Tree view dialogs (dialog opened from a form-hosted web resource)
39 | return (window as any).opener.parent.Xrm;
40 | } else if ((window as any).opener && (window as any).opener.opener && (window as any).opener.opener.Xrm) {
41 | // Dialog in a dialog (account i/s changes on save)
42 | return (window as any).opener.opener.Xrm;
43 | }
44 | }
45 |
46 | private static FormatRecords(records: any) {
47 | let formattedResults: any[] = [];
48 |
49 | if (records.length > 0) {
50 | for (var i = 0; i < records.length; i++) {
51 | let currentResult = records[i];
52 | let formattedResult: any = {};
53 | for (var key in currentResult) {
54 | if (key === "@odata.etag") {
55 | formattedResult.recordVersion = currentResult[key];
56 | } else if (key.indexOf("_") === 0) {
57 | // This is a lookup's property
58 | var attribute = key.substring(1, key.indexOf("_value"));
59 | if (!formattedResult[attribute]) {
60 | formattedResult[attribute] = {};
61 | }
62 | if (this.EndsWith(key, "_value")) {
63 | formattedResult[attribute].Id = currentResult[key];
64 | } else if (this.EndsWith(key, "_value@OData.Community.Display.V1.FormattedValue")) {
65 | formattedResult[attribute].Name = currentResult[key];
66 | } else if (this.EndsWith(key, "_value@Microsoft.Dynamics.CRM.lookuplogicalname")) {
67 | formattedResult[attribute].LogicalName = currentResult[key];
68 | }
69 | } else if (key.indexOf(".") > 0) {
70 | // Aliased values will contain a . after the alias name. Using 0 to ensure we are grabbing an aliased value and not some other odata property starting with '.'
71 | var alias = key.substring(0, key.indexOf("."));
72 | var aliasedAttribute = key.substring(key.indexOf(".") + 1, key.length);
73 | if (!formattedResult[alias]) {
74 | formattedResult[alias] = {};
75 | }
76 |
77 | if (
78 | this.EndsWith(key, "@OData.Community.Display.V1.FormattedValue") ||
79 | this.EndsWith(key, "@Microsoft.Dynamics.CRM.lookuplogicalname") ||
80 | this.EndsWith(key, "@OData.Community.Display.V1.AttributeName")
81 | ) {
82 | // handle aliased when the id is processed
83 | continue;
84 | } else if (currentResult[key + "@Microsoft.Dynamics.CRM.lookuplogicalname"]) {
85 | // Try to identify if the current key is for a lookup or not. Can't just assume lookups will end with 'id'.
86 | formattedResult[alias][aliasedAttribute] = {
87 | Id: currentResult[key],
88 | Name: currentResult[key + "@OData.Community.Display.V1.FormattedValue"],
89 | LogicalName: currentResult[key + "@Microsoft.Dynamics.CRM.lookuplogicalname"],
90 | };
91 | } else {
92 | formattedResult[alias][aliasedAttribute] = currentResult[key];
93 | }
94 | } else {
95 | formattedResult[key] = currentResult[key];
96 | }
97 | }
98 | formattedResults.push(formattedResult);
99 | }
100 | }
101 |
102 | return formattedResults;
103 | }
104 |
105 | private static EndsWith(str: any, suffix: any) {
106 | return str.indexOf(suffix, str.length - suffix.length) !== -1;
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/src/helper/hero-helper.tsx:
--------------------------------------------------------------------------------
1 | import DataHelper from "./data-helper";
2 |
3 | export default class HeroHelper {
4 | /**
5 | * GetAllHeros will retrieve data from Hero table in Dataverse
6 | */
7 | public static async GetAllHeros(): Promise {
8 | const fetch = `
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | `;
28 | const response = await DataHelper.Fetch(fetch);
29 | return response;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 |
5 | ReactDOM.render(
6 |
7 |
8 | ,
9 | document.getElementById("root"),
10 | );
11 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext",
8 | "ES2015"
9 | ],
10 | "sourceMap": true,
11 | "allowJs": true,
12 | "skipLibCheck": true,
13 | "esModuleInterop": true,
14 | "allowSyntheticDefaultImports": true,
15 | "strict": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "module": "esnext",
19 | "moduleResolution": "node",
20 | "resolveJsonModule": true,
21 | "isolatedModules": true,
22 | "noEmit": true,
23 | "jsx": "react-jsx"
24 | },
25 | "include": [
26 | "src/**/*"
27 | ],
28 | "exclude": [
29 | "node_modules",
30 | "dist"
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------