ant-design/a32e47c5-async.b96e847a.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["a32e47c5"],{"09dde160":function(e,a,s){"use strict";s.d(a,"__esModule",{value:!0}),s.d(a,"texts",{enumerable:!0,get:function(){return t;}}),s("6207f8ca");let t=[{value:"Detail Pages display the complete data to users. Users can edit the information or do other operations.",paraId:0},{value:"To increase the information viewing and searching efficiency. To raise the convenience of operation.",paraId:1,tocIndex:0},{value:"\n  ",paraId:2},{value:"\n    ",paraId:2},{value:"\n    ",paraId:2},{value:"\n      ",paraId:2},{value:"\n      ",paraId:2},{value:"Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.",paraId:3,tocIndex:2},{value:"\n    ",paraId:2},{value:"\n  ",paraId:2},{value:"\n  ",paraId:2},{value:"\n    ",paraId:2},{value:"\n    ",paraId:2},{value:"\n      ",paraId:2},{value:"\n      ",paraId:2},{value:"In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.",paraId:4,tocIndex:3},{value:"\n    ",paraId:2},{value:"\n  ",paraId:2},{value:"\n  ",paraId:2},{value:"\n    ",paraId:2},{value:"\n    ",paraId:2},{value:"\n      ",paraId:2},{value:"\n      ",paraId:2},{value:"Reduce the use of complex structures, try to use similar layouts and modules to reduce the interference of structural differences to users, and let them focus on information itself.",paraId:5,tocIndex:4},{value:"\n    ",paraId:2},{value:"\n  ",paraId:2},{value:"Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.",paraId:6},{value:"Basic Detail Templates",paraId:2},{value:"Basic layout templates display the main information on one whole card, using non-column split lines to separate the content into groups.",paraId:7},{value:"When to use",paraId:8},{value:"To display information with less content and low complexity.",paraId:9},{value:"Document Detail Templates display the detailed information of approval documents. They use cards to separate the modules with complex content.",paraId:10},{value:"When to use",paraId:11},{value:"To display approval process and detailed approval information, as well as some approval operations.",paraId:12},{value:"Related operations",paraId:13},{value:"Pass, reject, transfer, sign, suspend and withdraw.",paraId:14},{value:"Deal with complex details in the following way: Divide information with high complexity and weak correlation into multiple parts. And put the parts into groups according to their relativities, with tabs, steps, cards, etc.",paraId:15},{value:"Advanced Detail Templates",paraId:2},{value:"When to use",paraId:16},{value:"When the detail page has large and complex content, it has to be split into multiple tabs to guide users to browse information.",paraId:17},{value:"Divide the content into steps, letting users to browse and operate step by step.",paraId:18},{value:"When to use",paraId:19},{value:"Such templates are suitable for developing and collaborating processes.",paraId:20},{value:"Based on information complexity and correlation model, choose related modes to present the information, and select suitable layouts to display the contents of detail pages.",paraId:21},{value:"Conclude the closeness of each information module according to the relevance among them. Usually, the more relevant the contents are, the closer they are to each other.",paraId:22},{value:"Non-column split lines: to separate relevant contents;",paraId:23},{value:"Full-column split lines: to divide the content into multiple parts;",paraId:23},{value:"Cards: to display information on one topic;",paraId:23},{value:"Tabs: to put the information into groups according to some feature, such as version, intention, phase, etc.",paraId:23},{value:"Select presentation modes of the information according to its types and complexity. Abased on the complexity from low to high, the followings are available components:",paraId:24},{value:"Data Format",paraId:25,tocIndex:17},{value:"Button",paraId:26,tocIndex:17},{value:"Description",paraId:27,tocIndex:18},{value:"Collapse",paraId:28,tocIndex:18},{value:"Table",paraId:29,tocIndex:18},{value:"Fiori \u2013 How to Design an Object Page",paraId:30,tocIndex:19},{value:"SAP Fiori 2.0: The Object Page \u2014\u2014 Part 1: It's History",paraId:30,tocIndex:19},{value:"Object Page Floorplan",paraId:30,tocIndex:19},{value:"Principle of Product Display in Supermarkets",paraId:30,tocIndex:19}];},a32e47c5:function(e,a,s){"use strict";s.d(a,"__esModule",{value:!0}),s.d(a,"default",{enumerable:!0,get:function(){return p;}});var t=s("777fffbe"),n=s("f19d2b93"),i=t._(s("75f4da45")),l=t._(s("97c488ea")),d=t._(s("c96b0d01")),r=s("5b220c3d"),c=s("9c86e52a"),o=s("09dde160"),p=function(){return(0,n.jsx)(c.DumiPage,{children:(0,n.jsx)(r.Suspense,{fallback:(0,n.jsx)(d.default,{}),children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[0].value}),(0,n.jsxs)("h2",{id:"design-goals",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-goals",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Design Goals"]}),(0,n.jsx)("p",{children:o.texts[1].value}),(0,n.jsxs)("h2",{id:"design-principles",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-principles",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Design Principles"]}),(0,n.jsxs)("div",{className:"design-inline-cards",children:[o.texts[2].value,(0,n.jsxs)("div",{children:[o.texts[3].value,(0,n.jsx)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3CfhSZLxsIEAAAAAAAAAAABkARQnAQ"}),o.texts[4].value,(0,n.jsxs)("div",{children:[o.texts[5].value,(0,n.jsxs)("h4",{id:"direct",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#direct",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Direct"]}),o.texts[6].value,(0,n.jsx)("p",{children:o.texts[7].value}),o.texts[8].value]}),o.texts[9].value]}),o.texts[10].value,(0,n.jsxs)("div",{children:[o.texts[11].value,(0,n.jsx)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lN6IRbhv8fIAAAAAAAAAAABkARQnAQ"}),o.texts[12].value,(0,n.jsxs)("div",{children:[o.texts[13].value,(0,n.jsxs)("h4",{id:"clear-hierarchy",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#clear-hierarchy",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Clear hierarchy"]}),o.texts[14].value,(0,n.jsx)("p",{children:o.texts[15].value}),o.texts[16].value]}),o.texts[17].value]}),o.texts[18].value,(0,n.jsxs)("div",{children:[o.texts[19].value,(0,n.jsx)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jXDwQ6NF7dIAAAAAAAAAAABkARQnAQ"}),o.texts[20].value,(0,n.jsxs)("div",{children:[o.texts[21].value,(0,n.jsxs)("h4",{id:"concise",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#concise",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Concise"]}),o.texts[22].value,(0,n.jsx)("p",{children:o.texts[23].value}),o.texts[24].value]}),o.texts[25].value]})]}),(0,n.jsxs)("h2",{id:"typical-templates",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#typical-templates",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Typical Templates"]}),(0,n.jsxs)("h3",{id:"basic-layouts",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#basic-layouts",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Basic Layouts"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/pCRKNg9k17/1bd63a4b-d1f4-4e07-b22a-d473846ffa4c.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[26].value}),(0,n.jsxs)("h4",{id:"basic-detail-templates",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#basic-detail-templates",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),(0,n.jsx)(l.default,{href:"https://preview.pro.ant.design/profile/basic",sourceType:"a",children:o.texts[27].value})]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/mbOatwyvyE/0fb8dd2b-b0d6-4833-8eef-4b9bb403eece.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[28].value}),(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:o.texts[29].value})}),(0,n.jsx)("p",{children:o.texts[30].value}),(0,n.jsxs)("h4",{id:"document-detail-templates",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#document-detail-templates",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Document Detail Templates"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/scYc%24%24mD8l/17738081-f446-417b-9b32-a8c30de2f221.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[31].value}),(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:o.texts[32].value})}),(0,n.jsx)("p",{children:o.texts[33].value}),(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:o.texts[34].value})}),(0,n.jsx)("p",{children:o.texts[35].value}),(0,n.jsxs)("h3",{id:"complex-layouts",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#complex-layouts",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Complex Layouts"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/B76lyJVA80/3c938d7e-06a8-464c-b70c-5b2bebfcd638.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[36].value}),(0,n.jsxs)("h4",{id:"advanced-detail-templates",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#advanced-detail-templates",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),(0,n.jsx)(l.default,{href:"https://preview.pro.ant.design/profile/advanced",sourceType:"a",children:o.texts[37].value})]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/%241vXHbjQ2A/ad454bfb-55d8-43b1-b1fb-adfbc889045c.png"})}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/O0dPbOqGT0/07b6e341-2186-4a20-bc2c-513d91d3faa8.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:o.texts[38].value})}),(0,n.jsx)("p",{children:o.texts[39].value}),(0,n.jsxs)("h4",{id:"publish-process-templates",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#publish-process-templates",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Publish Process Templates"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/zMjpjg%24oaY/a9b7e996-ca9a-45d8-afbb-3c1727208629.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[40].value}),(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:o.texts[41].value})}),(0,n.jsx)("p",{children:o.texts[42].value}),(0,n.jsxs)("h2",{id:"design-suggestions",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-suggestions",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Design Suggestions"]}),(0,n.jsxs)("h4",{id:"how-to-choose-template",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-choose-template",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"How to choose template"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/1uy%243Y6SRp/1a6ff7f8-4cd0-483b-b8a5-c8d49c63fa92.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[43].value}),(0,n.jsxs)("h4",{id:"separation-methods",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#separation-methods",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Separation Methods"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/gadw%26gZBCW/f8c03ba9-73ae-40f6-b687-c322ecf963cb.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[44].value}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:o.texts[45].value}),(0,n.jsx)("li",{children:o.texts[46].value}),(0,n.jsx)("li",{children:o.texts[47].value}),(0,n.jsx)("li",{children:o.texts[48].value})]}),(0,n.jsxs)("h4",{id:"content-components",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#content-components",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Content Components"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/zos/antfincdn/J7ccrSNpjz/89878d45-ca15-4a6a-853e-3281fe02f114.png"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:o.texts[49].value}),(0,n.jsxs)("h2",{id:"read-more",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#read-more",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Read more"]}),(0,n.jsxs)("h4",{id:"related-global-rules",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#related-global-rules",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Related Global Rules"]}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{to:"/docs/spec/data-format",sourceType:"Link",children:o.texts[50].value})}),(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{to:"/docs/spec/buttons",sourceType:"Link",children:o.texts[51].value})})]}),(0,n.jsxs)("h4",{id:"related-modules-or-components",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#related-modules-or-components",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Related Modules or Components"]}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{to:"/components/descriptions/",sourceType:"Link",children:o.texts[52].value})}),(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{to:"/components/collapse/",sourceType:"Link",children:o.texts[53].value})}),(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{to:"/components/table/",sourceType:"Link",children:o.texts[54].value})})]}),(0,n.jsxs)("h4",{id:"reference",children:[(0,n.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#reference",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Reference"]}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{href:"https://blogs.sap.com/2017/08/06/fiori-elements-how-to-design-an-object-page/",sourceType:"a",children:o.texts[55].value})}),(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{href:"https://experience.sap.com/skillup/sap-fiori-2-0-the-object-page-part-1-its-history/",sourceType:"a",children:o.texts[56].value})}),(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{href:"https://experience.sap.com/fiori-design-web/object-page/",sourceType:"a",children:o.texts[57].value})}),(0,n.jsx)("li",{children:(0,n.jsx)(l.default,{href:"https://experience.sap.com/fiori-design-web/object-page/",sourceType:"a",children:o.texts[58].value})})]})]})]})})});};}}]);