@openmrs/esm-form-engine-lib 4.2.2-pre.2464 → 4.2.2-pre.2470

package/dist/components/inputs/ui-select-extended/ui-select-extended.component.js

@@ -48,12 +48,15 @@ const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
         items,
         value
     ]);
+    const hasCodes = useMemo(()=>items.some((item)=>item.code), [
+        items
+    ]);
     const debouncedSearch = debounce((searchTerm, dataSource)=>{
         setIsSearching(true);
         dataSource.fetchData(searchTerm, config).then((dataItems)=>{
             if (dataItems.length) {
                 const currentSelectedItem = items.find((item)=>item.uuid == value);
-                const newItems = dataItems.map(dataSource.toUuidAndDisplay);
+                const newItems = dataItems.map((item)=>dataSource.toUuidAndDisplay(item, config));
                 if (currentSelectedItem && !newItems.some((item)=>item.uuid == currentSelectedItem.uuid)) {
                     newItems.unshift(currentSelectedItem);
                 }
@@ -88,7 +91,7 @@ const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
                 referencedValue: dataSourceDependentValue
             }).then((dataItems)=>{
                 if (!ignore) {
-                    setItems(dataItems.map(dataSource.toUuidAndDisplay));
+                    setItems(dataItems.map((item)=>dataSource.toUuidAndDisplay(item, config)));
                     setIsLoading(false);
                 }
             }).catch((err)=>{
@@ -121,10 +124,10 @@ const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
         if (value && !isDirty && dataSource && isSearchable && !items.length) {
             // For search-based instances, fetch the initial item to resolve its display property
             setIsLoading(true);
-            dataSource.fetchSingleItem(value).then((item)=>{
+            dataSource.fetchSingleItem(value, config).then((item)=>{
                 if (!ignore) {
                     setItems([
-                        dataSource.toUuidAndDisplay(item)
+                        dataSource.toUuidAndDisplay(item, config)
                     ]);
                     setIsLoading(false);
                 }
@@ -143,14 +146,15 @@ const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
         isDirty,
         dataSource,
         isSearchable,
-        items
+        items,
+        config
     ]);
     if (isLoading) {
         return /*#__PURE__*/ React.createElement(DropdownSkeleton, null);
     }
     return isViewMode(sessionMode) || isTrue(field.readonly) ? /*#__PURE__*/ React.createElement(FieldValueView, {
         label: t(field.label),
-        value: value ? items.find((item)=>item.uuid == value)?.display : value,
+        value: value ? getItemText(items.find((item)=>item.uuid == value)) : value,
         conceptName: field.meta?.concept?.display,
         isInline: isInline
     }) : !field.isHidden && /*#__PURE__*/ React.createElement("div", {
@@ -161,7 +165,14 @@ const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
             field: field
         }),
         items: items,
-        itemToString: (item)=>item?.display,
+        itemToElement: (item)=>/*#__PURE__*/ React.createElement("span", {
+                className: styles.item
+            }, hasCodes && /*#__PURE__*/ React.createElement("span", {
+                className: styles.code
+            }, item?.code), /*#__PURE__*/ React.createElement("span", {
+                className: styles.label
+            }, item?.display)),
+        itemToString: getItemText,
         selectedItem: selectedItem,
         placeholder: isSearchable ? t('search', 'Search') + '...' : null,
         onChange: ({ selectedItem })=>{
@@ -198,3 +209,6 @@ const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
     })));
 };
 export default UiSelectExtended;
+export function getItemText(item) {
+    return item?.code ? `${item.code} ${item.display}` : item?.display ?? '';
+}

package/dist/components/inputs/ui-select-extended/ui-select-extended.scss

@@ -17,3 +17,27 @@
 .loader {
   padding: 0.25rem 0.5rem;
 }
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.code {
+  flex: none;
+  min-width: 4rem;
+  max-width: 8rem;
+  overflow: hidden;
+  color: inherit;
+  font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
+  font-weight: 600;
+  text-overflow: ellipsis;
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/datasources/concept-data-source.js

@@ -1,12 +1,16 @@
 import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
 import { BaseOpenMRSDataSource } from "./data-source.js";
 import { isEmpty } from "../validators/form-validator.js";
+const baseConceptRepresentation = 'custom:(uuid,display,conceptClass:(uuid,display))';
+const codedConceptRepresentation = 'custom:(uuid,display,conceptClass:(uuid,display),mappings:(conceptMapType:(uuid,display),conceptReferenceTerm:(code,conceptSource:(uuid))))';
+const sameAsConceptMapTypeUuid = '35543629-7d8c-11e1-909d-c80aa9edcf4e';
 export class ConceptDataSource extends BaseOpenMRSDataSource {
     fetchData(searchTerm, config) {
         if (isEmpty(config?.class) && isEmpty(config?.concept) && !config?.useSetMembersByConcept && isEmpty(searchTerm)) {
             return Promise.resolve([]);
         }
-        let searchUrl = `${restBaseUrl}/concept?name=&searchType=fuzzy&v=custom:(uuid,display,conceptClass:(uuid,display))`;
+        const representation = config?.conceptSourceUuid ? codedConceptRepresentation : baseConceptRepresentation;
+        let searchUrl = `${restBaseUrl}/concept?name=&searchType=fuzzy&v=${representation}`;
         if (config?.class) {
             if (typeof config.class == 'string') {
                 const urlParts = searchUrl.split('searchType=fuzzy');
@@ -19,7 +23,8 @@ export class ConceptDataSource extends BaseOpenMRSDataSource {
         }
         if (config?.concept && config?.useSetMembersByConcept) {
             let urlParts = searchUrl.split('?name=&searchType=fuzzy&v=');
-            searchUrl = `${urlParts[0]}/${config.concept}?v=custom:(uuid,setMembers:(uuid,display))`;
+            const setMemberRepresentation = config?.conceptSourceUuid ? 'custom:(uuid,setMembers:(uuid,display,mappings:(conceptMapType:(uuid,display),conceptReferenceTerm:(code,conceptSource:(uuid)))))' : 'custom:(uuid,setMembers:(uuid,display))';
+            searchUrl = `${urlParts[0]}/${config.concept}?v=${setMemberRepresentation}`;
             return openmrsFetch(searchTerm ? `${searchUrl}&q=${searchTerm}` : searchUrl).then(({ data })=>{
                 // return the setMembers from the retrieved concept object
                 return data['setMembers'];
@@ -29,7 +34,26 @@ export class ConceptDataSource extends BaseOpenMRSDataSource {
             return data.results;
         });
     }
+    fetchSingleItem(uuid, config) {
+        const representation = config?.conceptSourceUuid ? codedConceptRepresentation : baseConceptRepresentation;
+        return openmrsFetch(`${restBaseUrl}/concept/${uuid}?v=${representation}`).then(({ data })=>data);
+    }
+    toUuidAndDisplay(data, config) {
+        const item = super.toUuidAndDisplay(data);
+        const code = this.getConceptSourceMapping(data, config?.conceptSourceUuid)?.conceptReferenceTerm?.code;
+        return code ? {
+            ...item,
+            code
+        } : item;
+    }
+    getConceptSourceMapping(concept, conceptSourceUuid) {
+        if (!conceptSourceUuid) {
+            return undefined;
+        }
+        const mappingsToSource = concept.mappings?.filter((mapping)=>mapping.conceptReferenceTerm?.conceptSource?.uuid === conceptSourceUuid) ?? [];
+        return mappingsToSource.find((mapping)=>mapping.conceptMapType?.uuid === sameAsConceptMapTypeUuid || mapping.conceptMapType?.display?.toUpperCase() === 'SAME-AS') ?? mappingsToSource[0];
+    }
     constructor(){
-        super(`${restBaseUrl}/concept?v=custom:(uuid,display,conceptClass:(uuid,display))`);
+        super(`${restBaseUrl}/concept?v=${baseConceptRepresentation}`);
     }
 }

package/dist/src/components/inputs/ui-select-extended/ui-select-extended.component.d.ts

@@ -2,4 +2,8 @@ import React from 'react';
 import { type FormFieldInputProps } from '../../../types';
 declare const UiSelectExtended: React.FC<FormFieldInputProps>;
 export default UiSelectExtended;
+export declare function getItemText(item?: {
+    code?: string;
+    display?: string;
+}): string;
 //# sourceMappingURL=ui-select-extended.component.d.ts.map

package/dist/src/components/inputs/ui-select-extended/ui-select-extended.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-select-extended.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/ui-select-extended/ui-select-extended.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO3E,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2LnD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ui-select-extended.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/ui-select-extended/ui-select-extended.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO3E,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkMnD,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAE9E"}

package/dist/src/datasources/concept-data-source.d.ts

@@ -1,6 +1,26 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
 import { BaseOpenMRSDataSource } from './data-source';
+interface ConceptMapping {
+    conceptMapType?: {
+        uuid?: string;
+        display?: string;
+    };
+    conceptReferenceTerm?: {
+        code?: string;
+        conceptSource?: {
+            uuid?: string;
+        };
+    };
+}
+interface ConceptResource extends OpenmrsResource {
+    mappings?: Array<ConceptMapping>;
+}
 export declare class ConceptDataSource extends BaseOpenMRSDataSource {
     constructor();
     fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]>;
+    fetchSingleItem(uuid: string, config?: Record<string, any>): Promise<ConceptResource | null>;
+    toUuidAndDisplay(data: ConceptResource, config?: Record<string, any>): OpenmrsResource;
+    private getConceptSourceMapping;
 }
+export {};
 //# sourceMappingURL=concept-data-source.d.ts.map

package/dist/src/datasources/concept-data-source.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"concept-data-source.d.ts","sourceRoot":"","sources":["../../../src/datasources/concept-data-source.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,qBAAa,iBAAkB,SAAQ,qBAAqB;;IAK1D,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;CAgC5E"}
+{"version":3,"file":"concept-data-source.d.ts","sourceRoot":"","sources":["../../../src/datasources/concept-data-source.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAQtD,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,oBAAoB,CAAC,EAAE;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,aAAa,CAAC,EAAE;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,UAAU,eAAgB,SAAQ,eAAe;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;CAClC;AAED,qBAAa,iBAAkB,SAAQ,qBAAqB;;IAK1D,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAqC3E,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IAK5F,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,eAAe;IAMtF,OAAO,CAAC,uBAAuB;CAgBhC"}

package/dist/src/types/index.d.ts

@@ -61,11 +61,11 @@ export interface DataSource<T> {
      * Fetches a single item from the data source based on its UUID.
      * This is used for value binding with previously selected values.
      */
-    fetchSingleItem(uuid: string): Promise<T | null>;
+    fetchSingleItem(uuid: string, config?: Record<string, any>): Promise<T | null>;
     /**
      * Maps a data source item to an object with a uuid and display property
      */
-    toUuidAndDisplay(item: T): OpenmrsResource;
+    toUuidAndDisplay(item: T, config?: Record<string, any>): OpenmrsResource;
 }
 export interface ControlTemplate {
     name: string;

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/transformers/default-schema-transformer.js

@@ -265,10 +265,12 @@ function handleQuestionsWithObsComments(sectionQuestions) {
 }
 function handleDiagnosis(question) {
     if ('dataSource' in question.questionOptions && question.questionOptions['dataSource'] === 'diagnoses' || question.type === 'diagnosis') {
+        const datasourceConfig = question.questionOptions.datasource?.config;
         question.questionOptions.datasource = {
             name: 'problem_datasource',
             config: {
-                class: question.questionOptions.diagnosis?.conceptClasses
+                ...datasourceConfig,
+                class: question.questionOptions.diagnosis?.conceptClasses ?? datasourceConfig?.class
             }
         };
         if (question.questionOptions.diagnosis?.conceptSet) {
@@ -278,6 +280,8 @@ function handleDiagnosis(question) {
                 datasource: {
                     name: 'problem_datasource',
                     config: {
+                        ...datasourceConfig,
+                        concept: question.questionOptions.diagnosis.conceptSet,
                         useSetMembersByConcept: true
                     }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "4.2.2-pre.2464",
+  "version": "4.2.2-pre.2470",
   "description": "React Form Engine for O3",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx

@@ -46,6 +46,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
   }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
 
   const selectedItem = useMemo(() => items.find((item) => item.uuid == value) || null, [items, value]);
+  const hasCodes = useMemo(() => items.some((item) => item.code), [items]);
 
   const debouncedSearch = debounce((searchTerm: string, dataSource: DataSource<OpenmrsResource>) => {
     setIsSearching(true);
@@ -55,7 +56,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
       .then((dataItems) => {
         if (dataItems.length) {
           const currentSelectedItem = items.find((item) => item.uuid == value);
-          const newItems = dataItems.map(dataSource.toUuidAndDisplay);
+          const newItems = dataItems.map((item) => dataSource.toUuidAndDisplay(item, config));
           if (currentSelectedItem && !newItems.some((item) => item.uuid == currentSelectedItem.uuid)) {
             newItems.unshift(currentSelectedItem);
           }
@@ -98,7 +99,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
         .fetchData(null, { ...config, referencedValue: dataSourceDependentValue })
         .then((dataItems) => {
           if (!ignore) {
-            setItems(dataItems.map(dataSource.toUuidAndDisplay));
+            setItems(dataItems.map((item) => dataSource.toUuidAndDisplay(item, config)));
             setIsLoading(false);
           }
         })
@@ -128,10 +129,10 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
       // For search-based instances, fetch the initial item to resolve its display property
       setIsLoading(true);
       dataSource
-        .fetchSingleItem(value)
+        .fetchSingleItem(value, config)
         .then((item) => {
           if (!ignore) {
-            setItems([dataSource.toUuidAndDisplay(item)]);
+            setItems([dataSource.toUuidAndDisplay(item, config)]);
             setIsLoading(false);
           }
         })
@@ -146,7 +147,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
     return () => {
       ignore = true;
     };
-  }, [value, isDirty, dataSource, isSearchable, items]);
+  }, [value, isDirty, dataSource, isSearchable, items, config]);
 
   if (isLoading) {
     return <DropdownSkeleton />;
@@ -155,7 +156,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
   return isViewMode(sessionMode) || isTrue(field.readonly) ? (
     <FieldValueView
       label={t(field.label)}
-      value={value ? items.find((item) => item.uuid == value)?.display : value}
+      value={value ? getItemText(items.find((item) => item.uuid == value)) : value}
       conceptName={field.meta?.concept?.display}
       isInline={isInline}
     />
@@ -167,7 +168,13 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
             id={field.id}
             titleText={<FieldLabel field={field} />}
             items={items}
-            itemToString={(item) => item?.display}
+            itemToElement={(item) => (
+              <span className={styles.item}>
+                {hasCodes && <span className={styles.code}>{item?.code}</span>}
+                <span className={styles.label}>{item?.display}</span>
+              </span>
+            )}
+            itemToString={getItemText}
             selectedItem={selectedItem}
             placeholder={isSearchable ? t('search', 'Search') + '...' : null}
             onChange={({ selectedItem }) => {
@@ -207,3 +214,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
 };
 
 export default UiSelectExtended;
+
+export function getItemText(item?: { code?: string; display?: string }): string {
+  return item?.code ? `${item.code} ${item.display}` : item?.display ?? '';
+}

package/src/components/inputs/ui-select-extended/ui-select-extended.scss

@@ -17,3 +17,27 @@
 .loader {
   padding: 0.25rem 0.5rem;
 }
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.code {
+  flex: none;
+  min-width: 4rem;
+  max-width: 8rem;
+  overflow: hidden;
+  color: inherit;
+  font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
+  font-weight: 600;
+  text-overflow: ellipsis;
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/datasources/concept-data-source.ts

@@ -1,10 +1,32 @@
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl, type OpenmrsResource } from '@openmrs/esm-framework';
 import { BaseOpenMRSDataSource } from './data-source';
 import { isEmpty } from '../validators/form-validator';
 
+const baseConceptRepresentation = 'custom:(uuid,display,conceptClass:(uuid,display))';
+const codedConceptRepresentation =
+  'custom:(uuid,display,conceptClass:(uuid,display),mappings:(conceptMapType:(uuid,display),conceptReferenceTerm:(code,conceptSource:(uuid))))';
+const sameAsConceptMapTypeUuid = '35543629-7d8c-11e1-909d-c80aa9edcf4e';
+
+interface ConceptMapping {
+  conceptMapType?: {
+    uuid?: string;
+    display?: string;
+  };
+  conceptReferenceTerm?: {
+    code?: string;
+    conceptSource?: {
+      uuid?: string;
+    };
+  };
+}
+
+interface ConceptResource extends OpenmrsResource {
+  mappings?: Array<ConceptMapping>;
+}
+
 export class ConceptDataSource extends BaseOpenMRSDataSource {
   constructor() {
-    super(`${restBaseUrl}/concept?v=custom:(uuid,display,conceptClass:(uuid,display))`);
+    super(`${restBaseUrl}/concept?v=${baseConceptRepresentation}`);
   }
 
   fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]> {
@@ -12,7 +34,8 @@ export class ConceptDataSource extends BaseOpenMRSDataSource {
       return Promise.resolve([]);
     }
 
-    let searchUrl = `${restBaseUrl}/concept?name=&searchType=fuzzy&v=custom:(uuid,display,conceptClass:(uuid,display))`;
+    const representation = config?.conceptSourceUuid ? codedConceptRepresentation : baseConceptRepresentation;
+    let searchUrl = `${restBaseUrl}/concept?name=&searchType=fuzzy&v=${representation}`;
     if (config?.class) {
       if (typeof config.class == 'string') {
         const urlParts = searchUrl.split('searchType=fuzzy');
@@ -28,7 +51,10 @@ export class ConceptDataSource extends BaseOpenMRSDataSource {
 
     if (config?.concept && config?.useSetMembersByConcept) {
       let urlParts = searchUrl.split('?name=&searchType=fuzzy&v=');
-      searchUrl = `${urlParts[0]}/${config.concept}?v=custom:(uuid,setMembers:(uuid,display))`;
+      const setMemberRepresentation = config?.conceptSourceUuid
+        ? 'custom:(uuid,setMembers:(uuid,display,mappings:(conceptMapType:(uuid,display),conceptReferenceTerm:(code,conceptSource:(uuid)))))'
+        : 'custom:(uuid,setMembers:(uuid,display))';
+      searchUrl = `${urlParts[0]}/${config.concept}?v=${setMemberRepresentation}`;
       return openmrsFetch(searchTerm ? `${searchUrl}&q=${searchTerm}` : searchUrl).then(({ data }) => {
         // return the setMembers from the retrieved concept object
         return data['setMembers'];
@@ -39,4 +65,32 @@ export class ConceptDataSource extends BaseOpenMRSDataSource {
       return data.results;
     });
   }
+
+  fetchSingleItem(uuid: string, config?: Record<string, any>): Promise<ConceptResource | null> {
+    const representation = config?.conceptSourceUuid ? codedConceptRepresentation : baseConceptRepresentation;
+    return openmrsFetch(`${restBaseUrl}/concept/${uuid}?v=${representation}`).then(({ data }) => data);
+  }
+
+  toUuidAndDisplay(data: ConceptResource, config?: Record<string, any>): OpenmrsResource {
+    const item = super.toUuidAndDisplay(data);
+    const code = this.getConceptSourceMapping(data, config?.conceptSourceUuid)?.conceptReferenceTerm?.code;
+    return code ? { ...item, code } : item;
+  }
+
+  private getConceptSourceMapping(concept: ConceptResource, conceptSourceUuid?: string): ConceptMapping | undefined {
+    if (!conceptSourceUuid) {
+      return undefined;
+    }
+
+    const mappingsToSource =
+      concept.mappings?.filter((mapping) => mapping.conceptReferenceTerm?.conceptSource?.uuid === conceptSourceUuid) ??
+      [];
+    return (
+      mappingsToSource.find(
+        (mapping) =>
+          mapping.conceptMapType?.uuid === sameAsConceptMapTypeUuid ||
+          mapping.conceptMapType?.display?.toUpperCase() === 'SAME-AS',
+      ) ?? mappingsToSource[0]
+    );
+  }
 }

package/src/transformers/default-schema-transformer.ts

@@ -295,10 +295,12 @@ function handleDiagnosis(question: FormField) {
     ('dataSource' in question.questionOptions && question.questionOptions['dataSource'] === 'diagnoses') ||
     question.type === 'diagnosis'
   ) {
+    const datasourceConfig = question.questionOptions.datasource?.config;
     question.questionOptions.datasource = {
       name: 'problem_datasource',
       config: {
-        class: question.questionOptions.diagnosis?.conceptClasses,
+        ...datasourceConfig,
+        class: question.questionOptions.diagnosis?.conceptClasses ?? datasourceConfig?.class,
       },
     };
     if (question.questionOptions.diagnosis?.conceptSet) {
@@ -308,6 +310,8 @@ function handleDiagnosis(question: FormField) {
         datasource: {
           name: 'problem_datasource',
           config: {
+            ...datasourceConfig,
+            concept: question.questionOptions.diagnosis.conceptSet,
             useSetMembersByConcept: true,
           },
         },

package/src/types/index.ts

@@ -75,12 +75,12 @@ export interface DataSource<T> {
    * Fetches a single item from the data source based on its UUID.
    * This is used for value binding with previously selected values.
    */
-  fetchSingleItem(uuid: string): Promise<T | null>;
+  fetchSingleItem(uuid: string, config?: Record<string, any>): Promise<T | null>;
 
   /**
    * Maps a data source item to an object with a uuid and display property
    */
-  toUuidAndDisplay(item: T): OpenmrsResource;
+  toUuidAndDisplay(item: T, config?: Record<string, any>): OpenmrsResource;
 }
 
 export interface ControlTemplate {