{"componentChunkName":"component---src-pages-experimental-export-pattern-index-mdx","path":"/experimental/export-pattern/","result":{"pageContext":{"frontmatter":{"title":"Export pattern","description":"Exporting a resource saves data in a different format, external to the system."},"relativePagePath":"/experimental/export-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"6609d3b3-5458-52ea-8011-03682dd8e591","children":[],"parent":"3168b794-959a-528a-9a85-95ab2d14ab7d","internal":{"content":"---\ntitle: Export pattern\ndescription: Exporting a resource saves data in a different format, external to the system.\n---\n\n<PageDescription>\n\nWhen exporting something you have the ability to change the format of the object or resource you are exporting out external to the system. Downloading transfers a resource from a remote system to a local system without changing its format.\n\n</PageDescription>\n\n#### Status:\n\nExperimental\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n<AnchorLinks>\n\n<AnchorLink>Intuitive default name</AnchorLink>\n<AnchorLink>Editable name</AnchorLink>\n<AnchorLink small>Optional extras</AnchorLink>\n\n</AnchorLinks>\n\n![Example of an export modal in context](images/0.png)\n\n<Caption>Example of an export modal</Caption>\n\n![Example of a download modal in context](images/download0.png)\n\n<Caption>Example of a download modal in the context of a product</Caption>\n\n## Intuitive default name\n\nWhen a resource is given an intuitive name by default and there is no choice of an export or download location, the export occurs on the click of the Export button and nothing additional is displayed.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an export button on a data table](images/1.png)\n\n</Column>\n</Row>\n\n<Row>\n <Column colLg={8}>\n\n![Example of a download button](images/download1.png)\n\n<Caption>Example of a download button</Caption>\n\n </Column>\n</Row>\n\n## Editable name\n\nWhen a file's name can be edited before exporting or downloading, a dialog containing an editable textbox should be presented to the user. The textbox should be pre-populated with the file's default name.\n\nWhen downloading, the file extension is not displayed.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an export modal](images/2.png)\n\n![Example of validation errors](images/newimage1.png)\n\n<Caption>Validate the edited name's extension.</Caption>\n\n![Example of an export modal in its \"Exporting\" state](images/3.png)\n\n<Caption>Example of an export modal in its \"Exporting\" state</Caption>\n\n</Column>\n</Row>\n\n## Optional extras\n\n### Specify the export or download location\n\nWhen specifying the download location of a resource, clicking the primary “download” button activates the browser's default location panel. The file is downloaded once a location is selected and the user clicks Save.\n\n<Row>\n<Column colLg={8}>\n\n![Example of specifying an export location](images/newimage2.png)\n\n</Column>\n</Row>\n\n### Passive success modal\n\nYou can choose to show a passive modal when an export has succeeded.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a passive success modal](images/newimage3.png)\n\n</Column>\n</Row>\n\n### Errors and failures\n\nIn the event of an error, display the error in the modal.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an error state modal](images/newimage4.png)\n\n</Column>\n</Row>\n\n### Success notification\n\nA notification can be used to alert the user that an export has been successful.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a success notification](images/newimage5.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"771b3a627792a0e198be5488b1ec5c53","counter":1633,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Export pattern","description":"Exporting a resource saves data in a different format, external to the system."},"exports":{},"rawBody":"---\ntitle: Export pattern\ndescription: Exporting a resource saves data in a different format, external to the system.\n---\n\n<PageDescription>\n\nWhen exporting something you have the ability to change the format of the object or resource you are exporting out external to the system. Downloading transfers a resource from a remote system to a local system without changing its format.\n\n</PageDescription>\n\n#### Status:\n\nExperimental\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n<AnchorLinks>\n\n<AnchorLink>Intuitive default name</AnchorLink>\n<AnchorLink>Editable name</AnchorLink>\n<AnchorLink small>Optional extras</AnchorLink>\n\n</AnchorLinks>\n\n![Example of an export modal in context](images/0.png)\n\n<Caption>Example of an export modal</Caption>\n\n![Example of a download modal in context](images/download0.png)\n\n<Caption>Example of a download modal in the context of a product</Caption>\n\n## Intuitive default name\n\nWhen a resource is given an intuitive name by default and there is no choice of an export or download location, the export occurs on the click of the Export button and nothing additional is displayed.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an export button on a data table](images/1.png)\n\n</Column>\n</Row>\n\n<Row>\n <Column colLg={8}>\n\n![Example of a download button](images/download1.png)\n\n<Caption>Example of a download button</Caption>\n\n </Column>\n</Row>\n\n## Editable name\n\nWhen a file's name can be edited before exporting or downloading, a dialog containing an editable textbox should be presented to the user. The textbox should be pre-populated with the file's default name.\n\nWhen downloading, the file extension is not displayed.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an export modal](images/2.png)\n\n![Example of validation errors](images/newimage1.png)\n\n<Caption>Validate the edited name's extension.</Caption>\n\n![Example of an export modal in its \"Exporting\" state](images/3.png)\n\n<Caption>Example of an export modal in its \"Exporting\" state</Caption>\n\n</Column>\n</Row>\n\n## Optional extras\n\n### Specify the export or download location\n\nWhen specifying the download location of a resource, clicking the primary “download” button activates the browser's default location panel. The file is downloaded once a location is selected and the user clicks Save.\n\n<Row>\n<Column colLg={8}>\n\n![Example of specifying an export location](images/newimage2.png)\n\n</Column>\n</Row>\n\n### Passive success modal\n\nYou can choose to show a passive modal when an export has succeeded.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a passive success modal](images/newimage3.png)\n\n</Column>\n</Row>\n\n### Errors and failures\n\nIn the event of an error, display the error in the modal.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an error state modal](images/newimage4.png)\n\n</Column>\n</Row>\n\n### Success notification\n\nA notification can be used to alert the user that an export has been successful.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a success notification](images/newimage5.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3f757860/src/pages/experimental/export-pattern/index.mdx"}}}}