{"id":4921,"date":"2015-08-28T11:31:57","date_gmt":"2015-08-28T10:31:57","guid":{"rendered":"https:\/\/help.instantatlas.com\/dashboard-builder-desktop\/desktop-user-guide\/the-instantatlas-designer\/the-designer-window\/"},"modified":"2021-12-08T12:08:16","modified_gmt":"2021-12-08T12:08:16","slug":"the-designer-window","status":"publish","type":"page","link":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/desktop-user-guide\/the-instantatlas-designer\/the-designer-window\/","title":{"rendered":"The Designer Window"},"content":{"rendered":"

The Designer has menus, a toolbar and a canvas. The menus and toolbar give you access to the various functions, such as opening a configuration file, and the canvas allows you to view the various template components (e.g. map, data table, bar chart, bar chart title, etc.).<\/p>\n

Menus and Toolbars<\/span><\/h2>\n

The image below\u00a0shows the Designer menus and toolbar.<\/p>\n

\"\"<\/a><\/p>\n

The menus and toolbar give you easy access to the Designer options. You can access a menu by clicking on it or holding down the \u2018Alt\u2019 key on your keyboard and pressing the underlined character in the menu name. For example, you can hold down \u2018Alt\u2019 and press \u2018F\u2019 to access the File menu. Note that these keyboard shortcuts exist for many functions in the Designer. If you hold your mouse pointer over an option in any of the drop down menus, a tooltip will appear. Similarly, if you hold your mouse pointer over an icon in the toolbar, a tooltip will appear.<\/p>\n

File<\/strong><\/h3>\n

Open<\/strong>
\nClick \u2018Open\u2019 and the \u2018Open configuration file…\u2019 dialog will appear. Alternatively hold down \u2018Ctrl\u2019 and press \u2018O\u2019 on your keyboard. Choose the file called \u2018config.xml\u2019 for the report you wish to change and click \u2018Open\u2019.<\/p>\n

\"\"<\/a><\/p>\n

Save<\/strong>
\nClick \u2018Save\u2019 to save changes to the configuration file you are changing. Alternatively hold down \u2018Ctrl\u2019 and press \u2018S\u2019 on your keyboard. The changes are saved to both the config.xml as well as the config-vars.xml.js file of your report. When restarted, the dynamic report will reflect any changes that you have made in the Designer.<\/p>\n

Save As<\/strong>
\nClick \u2018Save As\u2019 if you wish to save your changes to a new configuration file. Alternatively hold down \u2018Ctrl\u2019 and \u2018Shift\u2019 and press \u2018S\u2019 on your keyboard, the \u2018Save configuration file as…\u2019 dialog will open. Browse to the folder in which you wish to save your new configuration file, type a name in the \u2018File Name\u2019 box and click \u2018Save\u2019.<\/p>\n

This option is useful if you wish to save different designs for a report. Simply save the different configuration files to the report\u2019s folder with names such as \u2018config1.xml\u2019, \u2018config2.xml\u2019, \u2018config3.xml\u2019, etc. The Designer will save the corresponding file variants for local use with respective names such as config1-vars.xml.js\u2019, \u2018config2-vars.xml.js\u2019, \u2018config3-vars.xml.js\u2019, etc. Once you have saved these files, you simply choose which one is active by renaming it \u2018config.xml\u2019 and ‘config-vars.xml.js’ respectively. This is because by default an InstantAtlas report looks for a configuration file in its folder called \u2018config.xml\u2019 (or ‘config-vars.xml.js’ for use with the atlas-launch.html<\/a> file) and will ignore any others.<\/p>\n

Revert<\/strong>
\nClick \u2018Revert\u2019 and then \u2018To Template\u2019 if you wish to return to the original design, thereby reversing any changes you have made. Click \u2018Revert\u2019 and then \u2018To File\u2019 if you wish to return to the design as it was when you last clicked \u2018Save\u2019.<\/p>\n

Recent Files<\/strong>
\nClick \u2018Recent File\u2019 to access a list of recently opened files.<\/p>\n

Close<\/strong>
\nClick \u2018Close\u2019 to close the Designer. If you have not saved your changes, you will be prompted to do so.<\/p>\n

Edit<\/h3>\n

Undo<\/strong>
\nClick \u2018Undo\u2019 to undo changes that you make to your design. Alternatively hold down \u2018Ctrl\u2019 and press \u2018Z\u2019 on your keyboard. Most changes can be undone in this way. You can click \u2018Undo\u2019 multiple times in a row to undo a series of changes. This option will be greyed out if there are no changes to undo.<\/p>\n

Redo<\/strong>
\nClick \u2018Redo\u2019 to reapply any changes that you have undone by clicking \u2018Undo\u2019. Alternatively hold down \u2018Ctrl\u2019 and press \u2018Y\u2019 on your keyboard. You can click \u2018Redo\u2019 multiple times in a row to reapply a series of changes. This option will be greyed out if there are no changes to reapply.<\/p>\n

Delete<\/strong>
\nAll of the components (e.g. charts, chart titles, buttons, etc) can be deleted. To delete a component, click on it to select it in the interface and then click \u2018Delete\u2019. Alternatively you can press \u2018Delete\u2019 on your keyboard. The component will disappear.<\/p>\n

General Properties<\/strong>
\nClick \u2018General Properties\u2019 to access the general properties for the dynamic report. Alternatively hold down \u2018Ctrl\u2019 and \u2018Shift\u2019 and press \u2018P\u2019 on your keyboard. This will show the general properties in the pane located on the right side of your designer window. See the section below for more instructions on changing properties.<\/p>\n

Select<\/h3>\n

The \u2018Select\u2019 menu allows you to easily select components in your report. This is useful if you want to change properties of a component that is hidden behind another component e.g. the data explorer that might be hidden behind the map.<\/p>\n

Insert<\/h3>\n

Button<\/strong>
\nClick \u2018Button\u2019 to insert a new button that will be displayed in your report and can be made to link to a resource of your choice (e.g. a webpage or a PDF document saved on your computer). You can also use the new button to toggle components or call JavaScript commands. Click on the new button in the canvas to select it and drag it to the desired location. If necessary, you can resize it by dragging the selection handles. Refer to the section \u2018 Button Properties<\/a>\u2019 for instructions on changing the properties for your new button.<\/p>\n

Image<\/strong>
\nClick \u2018Image\u2019 to insert any static image of your choice into your report. This might be the logo of your organisation or a corporate banner for example. JPEG, PNG and GIF image formats are all supported. Click on the new image in the canvas to select it and drag it to the desired location. If necessary, you can resize it by dragging the selection handles. For instructions on how to make changes to the properties of your new image please refer to the section \u2018Image Properties<\/a>\u2019.<\/p>\n

Text<\/strong>
\nClick \u2018Text\u2019 to insert any text of your choice into your report. Click on the new text in the canvas to select it and drag it to the desired location. For instructions on how to make changes to the properties of your new text please refer to section \u2018Text Properties<\/a>\u2019.<\/p>\n

Deleted components and components that are hidden by default<\/strong>
\nYou have the option of inserting previously deleted components and various components that are not shown by default in your InstantAtlas reports. Click on the \u2018Insert\u2019 menu.<\/p>\n

\"\"<\/a><\/p>\n

Layout<\/h3>\n

The \u2018Layout\u2019 options allow you to rapidly align multiple objects. You must first select multiple components to align \u2013 you can do this by holding down the \u2018Shift\u2019 button on your keyboard while clicking components in the canvas.<\/p>\n

\"image27\"<\/span> Note that it is possible to move selected components as a group simply by clicking and dragging any of the selected components.<\/p>\n

Once you have selected two or more components, the layout options become active. These are available from the menu but also from the properties pane on the right.<\/p>\n

\"Alignment\"<\/a><\/p>\n

Simply click the option for the alignment you wish to achieve.<\/p>\n

Style<\/h3>\n

Edit Styles<\/strong>
\nClick \u2018Edit Styles\u2019 to open the InstantAtlas Style Editor. This tool lists all the styles used by the report. Note that most of these can be edited via the Designer (see below). It is therefore unlikely you will need to use the Style Editor unless you are making advanced style changes (e.g. adding new styles or making global style changes).<\/p>\n

Palettes<\/strong>
\nClick \u2018Palettes\u2019 if you wish to edit the palettes or colour schemes used to shade the map features in your dynamic reports. The \u2018Map Palettes & Colour Schemes\u2019 dialog will open. For instructions on how to make changes please refer to section \u2018Editing Map Palettes<\/a>\u2019.<\/p>\n

View<\/h3>\n

The View menu contains a list of zoom options. Choose a new zoom level to zoom into or out of the canvas. Alternatively, choose \u2018Fit\u2019 to make the canvas fit the Designer window. There are keyboard shortcuts for each zoom level (shown to the right of the zoom percentage).<\/p>\n

Help<\/h3>\n

Help on the Designer<\/strong><\/p>\n

Click \u2018Help on the Designer\u2019 to access the help pages for the Designer.<\/p>\n

About<\/strong>
\nClick \u2018About\u2019 to open the \u2018About\u2019 dialog. It contains information regarding your Designer application, including the version number and the location of your licence file.<\/p>\n

\"\"<\/a><\/a><\/p>\n

There are also three buttons linking to additional information. The \u2018Legal\u2019 button links to the InstantAtlas End-User Licence Agreement. The \u2018Licence\u2019 button links to \u2018Licence File Information\u2019, from which you can also upload a new licence file. The \u2018Templates\u2019 button links to an overview of available templates and also allows new templates to be uploaded.<\/p>\n

The Designer Canvas<\/span><\/h2>\n

The image below shows an example of the Designer canvas in \u2018Wireframe View\u2019 with the Properties Pane.<\/p>\n

\"\"<\/a><\/p>\n

The size and position of the components in your report are shown in the canvas. You can click any component to select it. When selected, a component gains a dashed border with resize handles. To resize a component, hover over a resize handle until a double-sided arrow appears, click and hold down the mouse over the handle, then move the mouse to see the component resize. You can move components by hovering over a component (but away from the resize handles); then click and hold down your mouse key and move the mouse to move the component. To deselect a component, click on an empty part of the canvas. Clicking on an empty part of the canvas will also cause General Properties to appear in the right-hand panel of the screen. When a component it selected, the\u00a0 component’s properties will show in the properties pane on the right side of the Designer window instead.<\/a><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The Designer has menus, a toolbar and a canvas. The menus and toolbar give you access to the various functions, such as opening a configuration file, and the canvas allows you to view the various template components (e.g. map, data table, bar chart, bar chart title, etc.). Menus and Toolbars The image below\u00a0shows the Designer … Continue reading The Designer Window<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":4871,"menu_order":1,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-4921","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/4921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/comments?post=4921"}],"version-history":[{"count":0,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/4921\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/4871"}],"wp:attachment":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/media?parent=4921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}