{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"65%

About the Create App window

The Create App window consists of four distinct sections:

The section on the left side contains the different app items that can be added to your interface. To add an app item, select the one to use (hover over the object name for a brief description) and drag it into position in the middle section.
Once dropped into a group, the properties that are available for that type are displayed in the Properties section on the right. As you add and design the argument, the Command line view section at the bottom of the window displays the commands for the object, and the middle section updates interactively to display the argument. You can also preview it to see how the whole app looks and functions.

The middle section is the landing place for the objects you dragged and dropped from the left section, and it updates to display how the object looks as you define it in the Details section on the right.

The Details section on the right displays all of the available properties for the selected item. As you customize the app in the Details section, the middle section updates dynamically so you can see how it will look and act.

The Command line view at the bottom contains the command-line commands for the current item's properties. As you update the properties in the Details section, the Command line view updates as well.

At the top of the window are icons to save the app, preview the UI or JSON script, and set the argument order.

About designing the interface

Creating a new app interface is a basic process. You'll need to know how to use the tool — the executable or binary upon which the app is based. With that knowledge, you create the interface according to how you want it to be used in the DE.

An app interface in the DE is arranged in a hierarchy of two main pieces:

The framework consists of one or more groups. A group creates a conceptual boundary in the interface into which you add the relevant user input settings in the order and with the field names you want, as displayed when the app is viewed in the DE. For example, many DE apps have a first panel called File Inputs.
Inside each group, you add those user interface objects you need to facilitate the collection of user inputs. There are a number of different user interface objects from which to select, including input file fields, selection and checkbox fields, text and numerical input fields, and output file fields.

In the following example, we see three groups, with the Select input data group, as defined by the integrator, expanded:

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{"width":{"value":"65%"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"About the Create App window","type":"text"}]},{"type":"paragraph","content":[{"text":"The Create App window consists of four distinct sections:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":500,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1044,"id":"6547be93-23d4-4fe3-b5d2-bd7ba41d0959","collection":"contentId-242027107","type":"file","height":524},"marks":[{"type":"border","attrs":{"size":1,"color":"#758195"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The section on the left side contains the different app items that can be added to your interface. To add an app item, select the one to use (hover over the object name for a brief description) and drag it into position in the middle section.","type":"text"},{"type":"hardBreak"},{"text":" Once dropped into a group, the properties that are available for that type are displayed in the Properties section on the right. As you add and design the argument, the Command line view section at the bottom of the window displays the commands for the object, and the middle section updates interactively to display the argument. You can also preview it to see how the whole app looks and functions.","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The middle section is the landing place for the objects you dragged and dropped from the left section, and it updates to display how the object looks as you define it in the Details section on the right.","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Details","type":"text","marks":[{"type":"strong"}]},{"text":" section on the right displays all of the available properties for the selected item. As you customize the app in the Details section, the middle section updates dynamically so you can see how it will look and act.","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Command line view","type":"text","marks":[{"type":"strong"}]},{"text":" at the bottom contains the command-line commands for the current item's properties. As you update the properties in the Details section, the Command line view updates as well.","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"At the top of the window are icons to save the app, preview the UI or JSON script, and set the argument order.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"About designing the interface","type":"text"}]},{"type":"paragraph","content":[{"text":"Creating a new app interface is a basic process. You'll need to know how to use the tool — the executable or binary upon which the app is based. With that knowledge, you create the interface according to how you want it to be used in the DE.","type":"text"}]},{"type":"paragraph","content":[{"text":"An app interface in the DE is arranged in a hierarchy of two main pieces:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The framework consists of one or more ","type":"text"},{"text":"groups","type":"text","marks":[{"type":"strong"}]},{"text":". A group creates a conceptual boundary in the interface into which you add the relevant user input settings in the order and with the field names you want, as displayed when the app is viewed in the DE. For example, many DE apps have a first ","type":"text"},{"text":"panel","type":"text","marks":[{"type":"em"}]},{"text":" called ","type":"text"},{"text":"File Inputs","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inside each group, you add those user interface objects you need to facilitate the collection of user inputs. There are a number of different user interface objects from which to select, including input file fields, selection and checkbox fields, text and numerical input fields, and output file fields.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"In the following example, we see three groups, with the ","type":"text"},{"text":"Select input data","type":"text","marks":[{"type":"strong"}]},{"text":" group, as defined by the integrator, expanded:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":553,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":553,"id":"f7db40b6-f4d9-4d08-b5b4-ba49bdec274b","collection":"contentId-242027107","type":"file","height":315},"marks":[{"type":"border","attrs":{"size":1,"color":"#758195"}}]}]}]}],"version":1},"reason":"A column macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"35%

WhiteSmokeSteelBlueHelpful Links1pxWhite

On This Page:

20px

Related Pages:

Designing the Interface

Next steps