{"_id":"@atlassian-pi/jira-metaui-transformer","_rev":"4-d84021fa9d8dd377965ac3d4f50310b5","name":"@atlassian-pi/jira-metaui-transformer","dist-tags":{"latest":"3.0.4"},"versions":{"3.0.0":{"name":"@atlassian-pi/jira-metaui-transformer","version":"3.0.0","author":{"name":"Atlassian"},"license":"MIT","_id":"@atlassian-pi/jira-metaui-transformer@3.0.0","maintainers":[{"name":"atlassianartifactteam","email":"eng-development-tooling-secrets-and-artifacts@atlassian.com"}],"homepage":"https://bitbucket.org/atlassianlabs/pi-clients/src/master/packages/jira-metaui-transformer/README.md","bugs":{"url":"https://bitbucket.org/atlassianlabs/pi-clients/issues"},"dist":{"shasum":"bb5bb449b8a0926c4b8771d43de9897ee73b57d8","tarball":"https://registry.npmjs.org/@atlassian-pi/jira-metaui-transformer/-/jira-metaui-transformer-3.0.0.tgz","fileCount":14,"integrity":"sha512-IaRjrv0q8C2ecqZia7iAUVAO8hbOF3JNyNmAETd2fw0Nx7KNYS5HqcjG8rAbeRb7aNux7FET1rC4Z1Y82SOE3g==","signatures":[{"sig":"MEYCIQCmxkLR7uIn8PCuh1svIyiv0bJ6Yjt61I61YT1mdCXcbgIhANRgIcs+8KfA4JD7CVZfwDQyFbJFo4+kHRApIghN1YXr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":148931},"main":"./index.js","_from":"file:/tmp/package-1-69a156c7-96cd7cc3296c9aa1a607b5db-2.tgz","types":"./dist/index.d.ts","module":"./esm/index.js","gitHead":"dd60fd222d3911bba00edffde9996e9291c7a056","private":false,"typings":"./index.d.ts","_npmUser":{"name":"atlassianartifactteam","email":"eng-development-tooling-secrets-and-artifacts@atlassian.com"},"_resolved":"/tmp/package-1-69a156c7-96cd7cc3296c9aa1a607b5db-2.tgz","_integrity":"sha512-IaRjrv0q8C2ecqZia7iAUVAO8hbOF3JNyNmAETd2fw0Nx7KNYS5HqcjG8rAbeRb7aNux7FET1rC4Z1Y82SOE3g==","repository":{"url":"git+https://bitbucket.org/atlassianlabs/pi-clients.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform jira meta information to a ui descriptor","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@babel/runtime":">=7.10.0","@atlassian-pi/jira-pi-meta-models":"^3.0.0","@atlassian-pi/jira-pi-common-models":"^3.0.0"},"publishConfig":{"registry":"https://packages.atlassian.com/api/npm/npm-public/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/jira-metaui-transformer_3.0.0_1772181198182_0.1952747485486217","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@atlassian-pi/jira-metaui-transformer","version":"3.0.1","author":{"name":"Atlassian"},"license":"MIT","_id":"@atlassian-pi/jira-metaui-transformer@3.0.1","maintainers":[{"name":"atlassianartifactteam","email":"eng-development-tooling-secrets-and-artifacts@atlassian.com"}],"homepage":"https://bitbucket.org/atlassianlabs/pi-clients/src/master/packages/jira-metaui-transformer/README.md","bugs":{"url":"https://bitbucket.org/atlassianlabs/pi-clients/issues"},"dist":{"shasum":"c0ff40156cb1768e1dd8d4b1d4ae1b6ca596a370","tarball":"https://registry.npmjs.org/@atlassian-pi/jira-metaui-transformer/-/jira-metaui-transformer-3.0.1.tgz","fileCount":14,"integrity":"sha512-G7EaPoGjMqwb0XyJQ3T0pPCyEOxlj5Xc+m8tEi7Dqr/VTQMqyvi38b0BBnRkahhKOmglTB7vU2jmlZmBGI1GSw==","signatures":[{"sig":"MEYCIQDFhL5fM635tPG6Ylz1PmfFCq/BNUw0/zJJB51Cbd/2ywIhAOnT47OB8fdtqXil0PjrApO37GwYUn9Nv3FvYBRBqZQf","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":148931},"main":"./index.js","_from":"file:/tmp/package-1-69a58144-0ce55761c4e8459ba86af15d-2.tgz","types":"./dist/index.d.ts","module":"./esm/index.js","gitHead":"d5654ddf9956789d2571ca2bef2e8cbbfc455a49","private":false,"typings":"./index.d.ts","_npmUser":{"name":"atlassianartifactteam","email":"eng-development-tooling-secrets-and-artifacts@atlassian.com"},"_resolved":"/tmp/package-1-69a58144-0ce55761c4e8459ba86af15d-2.tgz","_integrity":"sha512-G7EaPoGjMqwb0XyJQ3T0pPCyEOxlj5Xc+m8tEi7Dqr/VTQMqyvi38b0BBnRkahhKOmglTB7vU2jmlZmBGI1GSw==","repository":{"url":"git+https://bitbucket.org/atlassianlabs/pi-clients.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform jira meta information to a ui descriptor","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@babel/runtime":">=7.10.0","@atlassian-pi/jira-pi-meta-models":"^3.0.1","@atlassian-pi/jira-pi-common-models":"^3.0.1"},"publishConfig":{"registry":"https://packages.atlassian.com/api/npm/npm-public/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/jira-metaui-transformer_3.0.1_1772454220998_0.17863113955024135","host":"s3://npm-registry-packages-npm-production"}},"3.0.3":{"name":"@atlassian-pi/jira-metaui-transformer","version":"3.0.3","author":{"name":"Atlassian"},"license":"MIT","_id":"@atlassian-pi/jira-metaui-transformer@3.0.3","maintainers":[{"name":"atlassianartifactteam","email":"eng-development-tooling-artifacts@atlassian.com"}],"homepage":"https://bitbucket.org/atlassianlabs/pi-clients/src/master/packages/jira-metaui-transformer/README.md","bugs":{"url":"https://bitbucket.org/atlassianlabs/pi-clients/issues"},"dist":{"shasum":"eef07eca0db1f212605818f4adf24b317d002f1a","tarball":"https://registry.npmjs.org/@atlassian-pi/jira-metaui-transformer/-/jira-metaui-transformer-3.0.3.tgz","fileCount":14,"integrity":"sha512-FU3QYwGezVYvwyPW0yzmI3gp80V/ei94UxUHdBs44rFOvoLn9WmEjp+vmjcWoHxv9ZAlp2W32AiltdN1o6F13A==","signatures":[{"sig":"MEYCIQDu4ZjOSHq34/Vp2RrIA8IdY7wBvbgPd55f2caFIsS2/wIhAPaUg8CEVM7c8wwf+Rh4S0u+JC6ixIIRbaTvxPiGj9uk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149899},"main":"./index.js","_from":"file:/tmp/package-1-6a02ddf3-35e11aedaf5d12fc2f1d7d71-2.tgz","types":"./dist/index.d.ts","module":"./esm/index.js","gitHead":"3a1090f554b5fd042d0a8778c518f85ade08c83b","private":false,"typings":"./index.d.ts","_npmUser":{"name":"atlassianartifactteam","email":"eng-development-tooling-artifacts@atlassian.com"},"_resolved":"/tmp/package-1-6a02ddf3-35e11aedaf5d12fc2f1d7d71-2.tgz","_integrity":"sha512-FU3QYwGezVYvwyPW0yzmI3gp80V/ei94UxUHdBs44rFOvoLn9WmEjp+vmjcWoHxv9ZAlp2W32AiltdN1o6F13A==","repository":{"url":"git+https://bitbucket.org/atlassianlabs/pi-clients.git","type":"git"},"_npmVersion":"10.8.2","description":"Transform jira meta information to a ui descriptor","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@babel/runtime":">=7.10.0","@atlassian-pi/jira-pi-meta-models":"^3.0.3","@atlassian-pi/jira-pi-common-models":"^3.0.1"},"publishConfig":{"registry":"https://packages.atlassian.com/api/npm/npm-public/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/jira-metaui-transformer_3.0.3_1778572791516_0.4931321384923517","host":"s3://npm-registry-packages-npm-production"}},"3.0.4":{"name":"@atlassian-pi/jira-metaui-transformer","version":"3.0.4","description":"Transform jira meta information to a ui descriptor","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://bitbucket.org/atlassianlabs/pi-clients.git"},"homepage":"https://bitbucket.org/atlassianlabs/pi-clients/src/master/packages/jira-metaui-transformer/README.md","author":{"name":"Atlassian"},"license":"MIT","private":false,"publishConfig":{"registry":"https://packages.atlassian.com/api/npm/npm-public/"},"module":"./esm/index.js","main":"./index.js","dependencies":{"@atlassian-pi/jira-pi-common-models":"^3.0.1","@atlassian-pi/jira-pi-meta-models":"^3.0.4","@babel/runtime":">=7.10.0"},"gitHead":"0a88851c6fe6d9937899ebc8faac47d9d528c023","typings":"./index.d.ts","_id":"@atlassian-pi/jira-metaui-transformer@3.0.4","bugs":{"url":"https://bitbucket.org/atlassianlabs/pi-clients/issues"},"_integrity":"sha512-6UeX49AaUzseNVjiUaBSqSmCNT3BjY80JAeN5CtSRm3Cl9xPdLPjS3XOMgHsiH/+PBzKnMiamkHXQZZ1XEabVg==","_resolved":"/tmp/package-1-6a0560e9-8bac8a295cb35ecbe93cf2c6-1.tgz","_from":"file:/tmp/package-1-6a0560e9-8bac8a295cb35ecbe93cf2c6-1.tgz","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6UeX49AaUzseNVjiUaBSqSmCNT3BjY80JAeN5CtSRm3Cl9xPdLPjS3XOMgHsiH/+PBzKnMiamkHXQZZ1XEabVg==","shasum":"f0774c9ae668e62de29e1192b1563ec9b6974c40","tarball":"https://registry.npmjs.org/@atlassian-pi/jira-metaui-transformer/-/jira-metaui-transformer-3.0.4.tgz","fileCount":14,"unpackedSize":149899,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD/lJlwc+hzzQAMk4ZvCzfs2wz/YWKU7x6XSykjj3SQ2AIhALUEMgeQPNHLZFT7PZfR6SLQG5zTJ2JXAMig3ylh4wGk"}]},"_npmUser":{"name":"atlassianartifactteam","email":"eng-development-tooling-artifacts@atlassian.com"},"directories":{},"maintainers":[{"name":"atlassianartifactteam","email":"eng-development-tooling-artifacts@atlassian.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/jira-metaui-transformer_3.0.4_1778737390014_0.23293920271909663"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-27T08:33:18.057Z","modified":"2026-05-14T05:43:10.275Z","3.0.0":"2026-02-27T08:33:18.324Z","3.0.1":"2026-03-02T12:23:41.179Z","3.0.3":"2026-05-12T07:59:51.644Z","3.0.4":"2026-05-14T05:43:10.157Z"},"bugs":{"url":"https://bitbucket.org/atlassianlabs/pi-clients/issues"},"author":{"name":"Atlassian"},"license":"MIT","homepage":"https://bitbucket.org/atlassianlabs/pi-clients/src/master/packages/jira-metaui-transformer/README.md","repository":{"type":"git","url":"git+https://bitbucket.org/atlassianlabs/pi-clients.git"},"description":"Transform jira meta information to a ui descriptor","maintainers":[{"name":"atlassianartifactteam","email":"eng-development-tooling-artifacts@atlassian.com"}],"readme":"#jira-metaui-transformer\n\n## **_ Use At Your Own Risk! _**\n\nThis library is used internally at Atlassian and is unsupported.\n\n### What's this for?\n\nThis library takes Jira field level meta-data from multiple Jira endpoints and transforms them into a more useable UI descriptor.\n\nIt also deals with unknown non-renderable custom-field types as well as fixes a lot of inconsistencies within the Jira meta-data itself.\n\nThis only provides a UI descirptor which can then be used to generate a Jira-like create issue UI.\n\n### Installation\n\n`npm i @atlassian-pi/jira-metaui-transformer`\n\n### Simple Usage\n\n```typescript\nimport {\n    CreateIssueScreenTransformer,\n    FieldTransformerResult,\n    JiraSiteInfo,\n    UIType,\n    FieldUI,\n    InputFieldUI\n} from '@atlassian-pi/jira-metaui-transformer';\n\nconst dummyHttpClient = new SomeHttpClientOfYourChoice();\n\n// NOTE: the library expects JSON Objects. If your http client doesn't auto-parse json, you may need to call something like response.body.json\n\n// Get the Jira meta-data\nconst jiraMeta = dummyHttpClient.get(\n    'https://api.atlassian.com/ex/jira/ACLOUDID/rest/api/2/issue/createmeta?projectKeys=TESTPROJECT&expand=projects.issuetypes.fields'\n);\nconst allFields = dummyHttpClient.get('https://api.atlassian.com/ex/jira/ACLOUDID/rest/api/2/field');\nconst issueLinkTypes = dummyHttpClient.get('https://api.atlassian.com/ex/jira/ACLOUDID/rest/api/2/issueLinkType');\n\n// Create the transformer for the current site (see below for details about site info)\nconst siteInfo = { baseApiUrl: 'https://api.atlassian.com/ex/jira/ACLOUDID/rest', isCloud: true };\n\nconst createIssueTransformer: CreateIssueScreenTransformer<JiraSiteInfo> = new CreateIssueScreenTransformer(\n    siteInfo,\n    '2',\n    allFields,\n    issueLinkTypes\n);\n\n// Transform the meta-data\n// Note: the call to createmeta specified a single projectKey so there will only be a single project returned.\n// This is considered the best practice and you should provide a project selector if needed and make a new call\n// to createmeta and the transformer when the project changes.\n\nconst transformerResult = await createIssueTransformer.transformIssueScreens(meta.projects[0]);\n\n// Loop over the fields and create the UI\nObject.values(transformerResult.issueTypeUIs[transformerResult.selectedIssueType.id].fields).forEach(\n    (field: FieldUI) => {\n        switch (field.uiType) {\n            case UIType.Input: {\n                if ((field as InputFieldUI).isMultiline) {\n                    return <textarea />;\n                } else {\n                    return <input />;\n                }\n            }\n        }\n    }\n);\n```\n\n### Running the Example\n\nin the [examples folder](./src/examples) of this project there's a small example that uses json text files for the input data. When it's run it will dump the result to the console as well as to a file named result.json in the current directory.\n\nTo run the example, from the project root: `npm run-script examples`\n\n### Inputs\n\nThe transformer requires 3 separate bits of Jira data: createmeta, fields (allfields), and issueLinkTypes.\nThe transformer itself doesn't make any http calls allowing the caller to use any http client they wish.\nThese 3 bits of data should come from the endpoints in the above example and **must** be in JSON format (not a string).\n\n#### Projects\n\nAs note in the example, it's best to call createmeta with a single projectKey as calling it without a projectKey or multiple projectKeys will result in a ton of data and poor performance. If your UI needs to handle multiple projects, we suggest adding a project selector dropdown and then re-running the transformation process when the user selects a different project.\n\nThe call to `CreateIssueScreenTransformer.transformIssueScreens` has a single required parameter which is the project node from the createmeta response.\nIf you've followed the 'best practice' you should just be able to pass it `metaresponse.projects[0]`. (be sure to check that you actually got a project back and not an empty array).\n\n#### SiteInfo\n\nThe transformer needs to generate Jira URLs for things like auto-completion and select item creation. To accommodate this, you need to provide the baseApiUrl, a cloud flag, and an API version to the transformer.\n\nApart from URL generation, the siteDetails are also added to each issueTypeUI in the result. This is handy for making any extra calls your code may need especially in a multi-site scenario. The siteDetails can be of any type you wish and can have any extra fields you wish so long as it contains baseApiUrl and isCloud fields.\n\nTo facilitate proper typing when adding the siteDetails to results, the transofrmer requires a generic type to tell it what kind type it should be returning.\nspecifically, the type it needs is: `<S extends JiraSiteInfo>` where JiraSiteInfo includes the 2 required fields. If you don't need or want to use a custom siteDetails type, you can simply use JiraSiteInfo.\n\n#### Common Fields\n\nThe result of the transform marks each field as either 'common' or 'advanced' by way of an `advanced:boolean` flag on each field. When false, the field is considered common, and when true the field is considered advanced.\n\nThis feature is to enable the UI code to split the common field inputs from the advanced field inputs and/or only show the very minimal set of fields required to create an issue.\n\nThe default set of fields considered as 'common' are:\n\n-   project\n-   issuetype\n-   summary\n-   description\n-   fixVersions\n-   components\n-   labels\n\nThis list is exposed as the const `defaultCommonFields`.\nThe set of common field keys can be overridden by passing `commonFields:string[]` to the `transformIssueScreens` call.\n\nAlso when calling `CreateIssueScreenTransformer.transformIssueScreens` you can pass an optional boolean flag `requiredAsCommon` which will mark any required field as common even if it's not in the list of common field keys. These 2 parameters can be used in tandem to easily get a list of the minimal set of fields you required to create an issue. `requiredAsCommon` defaults to true;\n\n#### Filtering Fields\n\nJira returns some fields that shouldn't be sent as part of the create issue call and they need to be filtered out of the UI. On top of that, there may be some fields you simply never want to render and want to exclude them from the transformer results.\n\nMuch like the `commonFields` parameter, there's also an optional `filterFieldKeys?: string[]` parameter that allows you to pass field keys you want filtered from the results.\n\nThe default set of filtered keys is:\n\n-   parent\n-   reporter\n-   statuscategorychangedate\n-   lastViewed\n\nThis list is exposed as the const `defaultFieldFilters`\n\n### Understanding the results\n\nThe result of the transformation is a `CreateMetaTransformerResult` object.\nThe top-level fields are:\n\n| Name              | Description                                                                                                                                                                                                                       |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| issueTypes        | An array of IssueType objects that can be rendered. IssueTypes with non-renderable required fields are excluded. The IssueType objects are augmented with an `epic` boolean flag to easily tell if the issuetype is an epic type. |\n| selectedIssueType | The first renderable IssueType. This can be used to pre-select the issue type on the first render. This IssueType is guaranteed to be renderable                                                                                  |\n| issueTypeUIs      | An object containing the UI descriptors for all renderable issuetypes where the key is the issuetype ID and the value is an object containing the UI details                                                                      |\n| problems          | An object containing a problem report for each/any issuetype. The keys are the issuetype ID and the value is the problem reporter                                                                                                 |\n\nOnce you receive a result, you need to choose which issuetype you want to render a screen for. For the first render you're probably going to want to render the first issuetype that's renderable. You can get the UI details like this:\n`result.issueTypeUIs[result.selectedIssueType.id]`\n\nThis will return the `IssueTypeUI` object you can use for rendering.\n\nWhen building your UI, you can provider a dropdown containing the renderable issuetypes so user's can switch the type of issue to create. When the user selects a new issuetype, you can get the new screen to render by simply doing:\n`result.issueTypeUIs[userSelectedIssueType.id]`\n\n#### IssueTypeUI Objects\n\nIssueTypeUI objects are the main entry point in rendering a UI. The top-level fields are as such:\n\n| Name                | Description                                                                                                                                                                                                                                                                                                                            |\n| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| fields              | And object containing FieldUI descriptors whose keys are the field's key and the value is a FieldUI descriptor. These describe **what kind** of UI to render                                                                                                                                                                           |\n| fieldValues         | An object containing the current value of any given field. The keys are the field's key and the value is the current value. It's encouraged to mutate this object to keep state as user's fill in the create issue form.                                                                                                               |\n| selectFieldOptions  | And object containing the current options for a select field. The keys are the field's key and the value is an array of the options. It's encouraged to mutate this object and use it as state for select boxes. e.g. when a user creates a new version/component/label you can add it to the proper list in this object and re-render |\n| nonRenderableFields | An array of fields that cannot be rendered with the known UI types.                                                                                                                                                                                                                                                                    |\n| siteDetails         | The site details object passed into the transformer                                                                                                                                                                                                                                                                                    |\n| epicFieldInfo       | An object containing the IDs and names of the epicName and epicLink fields as well as a flag to determine if epics are enabled in Jira.                                                                                                                                                                                                |\n\nWhy all of these objects with field key -> value? Why not just use 'allowedValues' on a field for select boxes like Jira does? After lots of iterations, we've determined that more often than not when rendering a UI, especially with user input handlers and async calls it's easier to manage state with these separate objects and the only sensible way to deal with the dynamic nature of Jira fields is to use dictionaries keyed by the field keys. This makes it possible to changes various portions of state without having to keep references of the fields all over the place.\n\n#### FieldUI Objects\n\nOnce you've picked an issue type and your ready to render individual fields, you'll loop through the `fields` of the IssueTypeUI object. Each field is a `FieldUI` object that gives you a descriptor of what to render in the UI.\n\nThere are too many variations of UITypes to detail all of them here so let's just pick a simple 'input' and a 'select'...\nFor starters **all** FieldUI objects contain a set of common fields:\n\n| Name         | Type    | Description                                                       |\n| ------------ | ------- | ----------------------------------------------------------------- |\n| required     | boolean | A flag to tell if this is a required field                        |\n| name         | string  | The display name of the field                                     |\n| key          | string  | The field key. This can be used in all other state object lookups |\n| uiType       | string  | The type of UI element to render                                  |\n| displayOrder | number  | The display order of the field used for sorting the fields        |\n| valueType    | string  | The type of value the field holds                                 |\n| advanced     | boolean | A flag to tell if this is a common or advanced field              |\n\nThe 'input' UIType adds a single field:\n\n| Name        | Type    | Description                                                               |\n| ----------- | ------- | ------------------------------------------------------------------------- |\n| isMultiline | boolean | A flag to tell if this is a single line 'input' or a multiline 'textarea' |\n\nThe 'select' UIType does not contain isMultiline but adds the following fields:\n\n| Name            | Type    | Description                                                                                       |\n| --------------- | ------- | ------------------------------------------------------------------------------------------------- |\n| isMulti         | boolean | A flag to tell if this the user should be allowed to select multiple values                       |\n| isCreateable    | boolean | A flag to tell if this the user should be able to create new select options                       |\n| autoCompleteUrl | string  | The full URL to be used for searching for options. This will be blank if search is not supported  |\n| createUrl       | string  | The full URL to be used for creating new options. This will be blank if creation is not supported |\n\n#### UITypes\n\nBelow is a list of all supported UIType values. These are exposed as an enum called `UIType` to make switch statements easier\n\n| enum         | value          |\n| ------------ | -------------- |\n| Select       | 'select'       |\n| Checkbox     | 'checkbox'     |\n| Radio        | 'radio'        |\n| Input        | 'input'        |\n| Date         | 'date'         |\n| DateTime     | 'datetime'     |\n| IssueLinks   | 'issuelinks'   |\n| IssueLink    | 'issuelink'    |\n| Subtasks     | 'subtasks'     |\n| Timetracking | 'timetracking' |\n| Worklog      | 'worklog'      |\n| Comments     | 'comments'     |\n| Watches      | 'watches'      |\n| Votes        | 'votes'        |\n| Attachment   | 'attachment'   |\n| NonEditable  | 'noneditable'  |\n| Participants | 'participants' |\n\n#### ValueTypes\n\nEach field has a value type. Below is a list of all supported ValueTypes. These are exposed as an enum called `ValueType`.\n\n| enum         | value                                                                                                                                                            |\n| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| String       | 'string'                                                                                                                                                         |\n| Number       | 'number'                                                                                                                                                         |\n| Url          | 'url'                                                                                                                                                            |\n| DateTime     | 'datetime'                                                                                                                                                       |\n| Option       | 'option', // as type: single select or radio, as array items: multi-select or checkboxes (also check schema), {id, value}                                        |\n| Resolution   | 'resolution', // single select, {id, name}                                                                                                                       |\n| Priority     | 'priority', // single select, {id, name, iconUrl}                                                                                                                |\n| User         | 'user', // single select, {key, accountId, accountType, name, emailAddress, avatarUrls{'48x48'...}, displayName, active, timeZone, locale}                       |\n| Status       | 'status', // {description, iconUrl, name, id, statusCategory{id, key, colorName, name}}                                                                          |\n| Transition   | 'transition', // array of transitions                                                                                                                            |\n| Progress     | 'progress', //part of time tracking                                                                                                                              |\n| Date         | 'date',                                                                                                                                                          |\n| Votes        | 'votes', // for display: {votes:number, hasVoted:boolean}                                                                                                        |\n| IssueType    | 'issuetype', // single select, {id, description, iconUrl, name, subtask:boolean, avatarId}                                                                       |\n| Project      | 'project', //single select, { id, key, name, projectTypeKey, simplified:boolean, avatarUrls{ '48x48'... }}                                                       |\n| Watches      | 'watches', // mutli-user picker for edit, for display: {watchCount:number, isWatching:boolean, self:url } self contains url to get the user details for watchers |\n| Timetracking | 'timetracking', //timetracking UI                                                                                                                                |\n| Team | 'team',                                                                                                                                |\n| CommentsPage | 'comments-page', // textarea, system schema will be 'comment'                                                                                                    |\n| Version      | 'version', // multi-select, {id, name, archived:boolean, released:boolean}                                                                                       |\n| IssueLinks   | 'issuelinks',                                                                                                                                                    |\n| IssueLink    | 'issuelink', // used for subtask parent link                                                                                                                     |\n| Component    | 'component', // mutli-select, {id, name}                                                                                                                         |\n| Worklog      | 'worklog',                                                                                                                                                       |\n| Attachment   | 'attachment',                                                                                                                                                    |\n| Group        | 'group',                                                                                                                                                         |\n\n### Tips and Tricks\n\n#### Sorting\n\nBy default, Jira returns fields generally in the order they should be displayed. Unfortunately Jira does not include the sort order as a datapoint anywhere in the payload and so the order can get lost when sending json objects between backend and UI code. To correct this the transformer adds `displayOrder` to each field so they can be re-sorted if needed.\n\nIf you'd like to sort fields, here's an example of how to do it:\n\n```typescript\nfunction sortFieldValues(fields: FieldUIs): FieldUI[] {\n    return Object.values(fields).sort((left: FieldUI, right: FieldUI) => {\n        if (left.displayOrder < right.displayOrder) {\n            return -1;\n        }\n        if (left.displayOrder > right.displayOrder) {\n            return 1;\n        }\n        return 0;\n    });\n}\n```\n\n#### Separating Common from Advanced Fields\n\nAs discussed above, all fields are either 'common' or 'advanced' and are marked as such with the `advanced` boolean on each field.\n\nIf you need to separate the common fields from advanced fields for rendering (and you do), here's an example of how to do it:\n\n```typescript\nconst orderedValues: FieldUI[] = sortFieldValues(data.fields);\n\nconst advancedFields = [];\nconst commonFields = [];\n\norderedValues.forEach(field => {\n    if (field.advanced) {\n        advancedFields.push(field);\n    } else {\n        commonFields.push(field);\n    }\n});\n```\n\n#### Full complicated UI example\n\nIf you like pain and want to see this stuff in action, take a look at [the createIssueWebview.ts (controller)](https://bitbucket.org/atlassianlabs/atlascode/src/devel/src/webviews/createIssueWebview.ts) and [the CreateIssuePage.tsx (ui)](https://bitbucket.org/atlassianlabs/atlascode/src/devel/src/webviews/components/issue/CreateIssuePage.tsx) files in the atlascode project.\n","readmeFilename":"README.md"}