{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"style":{"value":"none"}},"macroMetadata":{"macroId":{"value":"37edb45f-75ef-498e-b9c2-96f919927959"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"473a2478-7f0d-4278-8c0c-eae3c16433c3"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Description","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"TabWidget","type":"text","marks":[{"type":"code"}]},{"text":" provides a elegant way to display multiple “pages“ of related content within the same DSL view and an alternative to page actions or buttons. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1145,"alt":"Screenshot 2024-10-21 at 10.57.26.png","id":"533c4b37-33de-4a91-a03d-0e6e77926634","collection":"contentId-298221708","type":"file","height":153}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Attributes","type":"text"}]},{"type":"paragraph","content":[{"text":"alignment","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"String","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - Determines the horizontal position of the tabs. Can be one of ","type":"text"},{"text":"left","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"center","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"right","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"direction","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"String","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - Determines orientation of the tabs. Can be one of ","type":"text"},{"text":"horizontal","type":"text","marks":[{"type":"code"}]},{"text":" or ","type":"text"},{"text":"vertical","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"stacked","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"Boolean","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - Used to display the icon for each tab above the label of the tab instead of before the label","type":"text"}]},{"type":"paragraph","content":[{"text":"activeTab","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"Number","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - Used to identify the current active tab","type":"text"}]},{"type":"paragraph","content":[{"text":"items","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"JSON Array","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - The actual tab items. Each item consists of ","type":"text"},{"text":"id","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"icon","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"label","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"id","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"Number ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":"- The ID of the Tab","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"icon","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"String || Null","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - Icon name as determined from ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://pictogrammers.com/library/mdi/"}},{"text":" ","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"label","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"String","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]},{"text":" - The tab label","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"A complete example of the JSON:","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n \"alignment\": \"left\",\n \"direction\": \"horizontal\",\n \"stacked\": false,\n \"activeTab\": 1,\n \"items\": [\n {\n \"id\": 1,\n \"label\": \"Tab 1\",\n \"icon\": \"home\"\n },\n {\n \"id\": 2,\n \"label\": \"Tab 2\",\n \"icon\": null\n }\n ]\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Example","type":"text"}]},{"type":"paragraph","content":[{"text":".vxml","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\t\n\n\n\n \n \n\n\n\n \n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"Model","type":"text"}]},{"type":"codeBlock","content":[{"text":"object TabItem {\n TAB_ALIGNMENT alignment;\n TAB_DIRECTION direction;\n bool stacked;\n int activeTab;\n jsonarray items;\n}\n\nenum TAB_ALIGNMENT {\n left,\n center,\n right\n}\n\nenum TAB_DIRECTION {\n horizontal,\n vertical\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Presenter ","type":"text"}]},{"type":"codeBlock","content":[{"text":"unit TabWidget;\n\njson rawTabContent;\njsonarray itemsArray;\nTabItem tabItem;\n\nvoid init() {\n tabItem = TabItem:new();\n tabItem.alignment = TAB_ALIGNMENT.left;\n tabItem.direction = TAB_DIRECTION.horizontal;\n tabItem.stacked = false;\n tabItem.activeTab = 1;\n itemsArray = /%[\n {\n \"id\": 1,\n \"label\": \"Tab 1\",\n \"icon\": \"home\"\n },\n {\n \"id\": 2,\n \"label\": \"Tab 2\",\n \"icon\": null\n }\n ]%/;\n\n tabItem.items = itemsArray;\n\n rawTabContent = \"{}\";\n rawTabContent.jsonPut(\"alignment\", tabItem.alignment);\n rawTabContent.jsonPut(\"direction\", tabItem.direction);\n rawTabContent.jsonPut(\"stacked\", tabItem.stacked);\n rawTabContent.jsonPut(\"activeTab\", tabItem.activeTab);\n rawTabContent.jsonPut(\"items\", tabItem.items);\n}\n\nDSL_VIEWS tabAction(json tabResponse) {\n tabItem.activeTab = tabResponse.jsonGet(\"id\");\n rawTabContent.jsonPut(\"activeTab\", tabItem.activeTab);\n return null;\n}\n\nbool showTabOneContent(){\n if(tabItem.activeTab == 1){\n return true;\n }\n return false;\n}\n\nbool showTabTwoContent(){\n if(tabItem.activeTab == 2){\n return true;\n }\n return false;\n}\n\n","type":"text"}]}],"version":1}

Browser not supported