MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11109 from Budibase/new-design-empty-state 

New Empty State for Design Section
This commit is contained in:
Andrew Kingston 2023-07-11 13:55:08 +01:00 committed by GitHub
parent 13debfc398 40b12d8b55
commit 85e1073dec
17 changed files with 183 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/builder/src/components/common/CreationPage.svelte Normal file
View File

@ -0,0 +1,39 @@
<script>
import { Icon, Heading } from "@budibase/bbui"
export let showClose = false
export let onClose = () => {}
export let heading = ""
</script>
<section class="page">
<div class="closeButton">
{#if showClose}
<Icon hoverable name="Close" on:click={onClose} />
{/if}
</div>
<div class="heading">
<Heading weight="light">{heading}</Heading>
</div>
<slot />
</section>
<style>
.page {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.heading {
text-align: center;
}
.closeButton {
height: 38px;
display: flex;
justify-content: right;
width: 100%;
}
</style>

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte → packages/builder/src/components/design/ScreenDetailsModal.svelte
View File

17
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -15,8 +15,6 @@
import { createValidationStore } from "helpers/validation/yup" import { createValidationStore } from "helpers/validation/yup"
import * as appValidation from "helpers/validation/yup/app" import * as appValidation from "helpers/validation/yup/app"
import TemplateCard from "components/common/TemplateCard.svelte" import TemplateCard from "components/common/TemplateCard.svelte"
import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
import { Roles } from "constants/backend"
import { lowercase } from "helpers" import { lowercase } from "helpers"
export let template export let template
@ -142,21 +140,6 @@
// Create user // Create user
await auth.setInitInfo({}) await auth.setInitInfo({})
// Create a default home screen if no template was selected
if (template == null) {
let defaultScreenTemplate = createFromScratchScreen.create()
defaultScreenTemplate.routing.route = "/home"
defaultScreenTemplate.routing.roldId = Roles.BASIC
try {
await store.actions.screens.save(defaultScreenTemplate)
} catch (err) {
console.error("Could not create a default application screen", err)
notifications.warning(
"Encountered an issue creating the default screen."
)
}
}
$goto(`/builder/app/${createdApp.instance._id}`) $goto(`/builder/app/${createdApp.instance._id}`)
} catch (error) { } catch (error) {
creating = false creating = false

39
packages/builder/src/pages/builder/app/[application]/data/new.svelte
View File

@ -7,12 +7,13 @@
} from "stores/backend" } from "stores/backend"
import { hasData } from "stores/selectors" import { hasData } from "stores/selectors"
import { Icon, notifications, Heading, Body } from "@budibase/bbui" import { notifications, Body } from "@budibase/bbui"
import { params, goto } from "@roxi/routify" import { params, goto } from "@roxi/routify"
import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte" import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte" import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
import DatasourceOption from "./_components/DatasourceOption.svelte" import DatasourceOption from "./_components/DatasourceOption.svelte"
import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte" import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
import CreationPage from "components/common/CreationPage.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons/index.js" import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte" import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
@ -46,16 +47,11 @@
bind:this={externalDatasourceModal} bind:this={externalDatasourceModal}
/> />
<div class="page"> <CreationPage
<div class="closeButton"> showClose={hasData($datasources, $tables)}
{#if hasData($datasources, $tables)} onClose={() => $goto("./table")}
<Icon hoverable name="Close" on:click={$goto("./table")} /> heading="Add new data source"
{/if} >
</div>
<div class="heading">
<Heading weight="light">Add new data source</Heading>
</div>
<div class="subHeading"> <div class="subHeading">
<Body>Get started with our Budibase DB</Body> <Body>Get started with our Budibase DB</Body>
<div <div
@ -113,30 +109,13 @@
</DatasourceOption> </DatasourceOption>
{/each} {/each}
</div> </div>
</div> </CreationPage>
<style> <style>
.page {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.closeButton {
height: 38px;
display: flex;
justify-content: right;
width: 100%;
}
.heading {
margin-bottom: 12px;
}
.subHeading { .subHeading {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 12px;
margin-bottom: 24px; margin-bottom: 24px;
} }

165
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
View File

@ -1,165 +0,0 @@
<script>
import { tables } from "stores/backend"
import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
import blankScreenPreview from "./blankScreenPreview.png"
import listScreenPreview from "./listScreenPreview.png"
export let onConfirm
export let onCancel
let listScreenModeKey = "autoCreate"
let blankScreenModeKey = "blankScreen"
let selectedScreenMode
const confirmScreenSelection = async () => {
await onConfirm(selectedScreenMode)
}
</script>
<div>
<ModalContent
title="Add screens"
confirmText="Continue"
cancelText="Cancel"
onConfirm={confirmScreenSelection}
{onCancel}
disabled={!selectedScreenMode}
size="M"
>
<Layout noPadding gap="S">
<div
class="screen-type item blankView"
class:selected={selectedScreenMode == blankScreenModeKey}
on:click={() => {
selectedScreenMode = blankScreenModeKey
}}
>
<div class="content screen-type-wrap">
<img
alt="blank screen preview"
class="preview"
src={blankScreenPreview}
/>
<div class="screen-type-text">
<Heading size="XS">Blank screen</Heading>
<Body size="S">Add an empty blank screen</Body>
</div>
</div>
<div
style="color: var(--spectrum-global-color-green-600); float: right"
>
<div
class={`checkmark-spacing ${
selectedScreenMode == blankScreenModeKey ? "visible" : ""
}`}
>
<Icon size="S" name="CheckmarkCircle" />
</div>
</div>
</div>
<div class="listViewTitle">
<Heading size="XS">Quickly create a screen from your data</Heading>
</div>
<div
class="screen-type item"
class:selected={selectedScreenMode == listScreenModeKey}
on:click={() => {
selectedScreenMode = listScreenModeKey
}}
class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
.length}
>
<div class="content screen-type-wrap">
<img
alt="list screen preview"
class="preview"
src={listScreenPreview}
/>
<div class="screen-type-text">
<Heading size="XS">List view</Heading>
<Body size="S">
Create, edit and view your data in a list view screen with side
panel
</Body>
</div>
</div>
<div
style="color: var(--spectrum-global-color-green-600); float: right"
>
<div
class={`checkmark-spacing ${
selectedScreenMode == listScreenModeKey ? "visible" : ""
}`}
>
<Icon size="S" name="CheckmarkCircle" />
</div>
</div>
</div>
</Layout>
</ModalContent>
</div>
<style>
.screen-type-wrap {
display: flex;
flex-direction: row;
align-items: center;
}
.disabled {
opacity: 0.3;
pointer-events: none;
}
.checkmark-spacing {
margin-right: var(--spacing-m);
opacity: 0;
}
.content {
letter-spacing: 0px;
}
.item {
cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all;
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
border-width: 1px;
display: flex;
justify-content: space-between;
align-items: center;
}
.item:hover,
.selected {
background: var(--spectrum-alias-background-color-tertiary);
}
.screen-type-wrap .screen-type-text {
padding-left: var(--spectrum-alias-item-padding-xl);
}
.screen-type-wrap .screen-type-text :global(h1) {
padding-bottom: var(--spacing-xs);
}
.screen-type-wrap :global(.spectrum-Icon) {
min-width: var(--spectrum-icon-size-m);
}
.screen-type-wrap :global(.spectrum-Heading) {
padding-bottom: var(--spectrum-alias-item-padding-s);
}
.preview {
width: 140px;
}
.listViewTitle {
margin-top: 35px;
}
.blankView {
margin-top: 10px;
}
.visible {
opacity: 1;
}
</style>

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
View File

@ -9,7 +9,7 @@
Helpers, Helpers,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import ScreenDetailsModal from "./ScreenDetailsModal.svelte" import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { makeComponentUnique } from "builderStore/componentUtils" import { makeComponentUnique } from "builderStore/componentUtils"

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
View File

@ -1,17 +1,16 @@
<script> <script>
import { Search, Layout, Select, Body, Button } from "@budibase/bbui" import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
import Panel from "components/design/Panel.svelte" import Panel from "components/design/Panel.svelte"
import { goto } from "@roxi/routify"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { store, sortedScreens, userSelectedResourceMap } from "builderStore" import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import ScreenWizard from "./ScreenWizard.svelte"
import RoleIndicator from "./RoleIndicator.svelte" import RoleIndicator from "./RoleIndicator.svelte"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
let searchString let searchString
let accessRole = "all" let accessRole = "all"
let showNewScreenModal
$: filteredScreens = getFilteredScreens( $: filteredScreens = getFilteredScreens(
$sortedScreens, $sortedScreens,
@ -31,7 +30,7 @@
<Panel title="Screens" borderRight> <Panel title="Screens" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Button on:click={showNewScreenModal} cta>Add screen</Button> <Button on:click={() => $goto("../../new")} cta>Add screen</Button>
<Search <Search
placeholder="Search" placeholder="Search"
value={searchString} value={searchString}
@ -74,5 +73,3 @@
</Layout> </Layout>
{/if} {/if}
</Panel> </Panel>
<ScreenWizard bind:showModal={showNewScreenModal} />

BIN
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 106 KiB

45
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import ScreenDetailsModal from "./ScreenDetailsModal.svelte" import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
import NewScreenModal from "./NewScreenModal.svelte"
import DatasourceModal from "./DatasourceModal.svelte" import DatasourceModal from "./DatasourceModal.svelte"
import ScreenRoleModal from "./ScreenRoleModal.svelte" import ScreenRoleModal from "./ScreenRoleModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
@ -11,11 +10,11 @@
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { Roles } from "constants/backend" import { Roles } from "constants/backend"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { goto } from "@roxi/routify"
let pendingScreen let pendingScreen
// Modal refs // Modal refs
let newScreenModal
let screenDetailsModal let screenDetailsModal
let datasourceModal let datasourceModal
let screenAccessRoleModal let screenAccessRoleModal
@ -26,16 +25,6 @@
let blankScreenUrl = null let blankScreenUrl = null
let screenMode = null let screenMode = null
// External handler to show the screen wizard
export const showModal = () => {
selectedTemplates = null
blankScreenUrl = null
screenMode = null
pendingScreen = null
screenAccessRole = Roles.BASIC
newScreenModal.show()
}
// Creates an array of screens, checking and sanitising their URLs // Creates an array of screens, checking and sanitising their URLs
const createScreens = async ({ screens, screenAccessRole }) => { const createScreens = async ({ screens, screenAccessRole }) => {
if (!screens?.length) { if (!screens?.length) {
@ -43,6 +32,8 @@
} }
try { try {
let screenId
for (let screen of screens) { for (let screen of screens) {
// Check we aren't clashing with an existing URL // Check we aren't clashing with an existing URL
if (hasExistingUrl(screen.routing.route)) { if (hasExistingUrl(screen.routing.route)) {
@ -64,7 +55,8 @@
screen.routing.roleId = screenAccessRole screen.routing.roleId = screenAccessRole
// Create the screen // Create the screen
await store.actions.screens.save(screen) const response = await store.actions.screens.save(screen)
screenId = response._id
// Add link in layout for list screens // Add link in layout for list screens
if (screen.props._instanceName.endsWith("List")) { if (screen.props._instanceName.endsWith("List")) {
@ -74,7 +66,10 @@
) )
} }
} }
$goto(`./${screenId}`)
} catch (error) { } catch (error) {
console.log(error)
notifications.error("Error creating screens") notifications.error("Error creating screens")
} }
} }
@ -104,18 +99,24 @@
} }
// Handler for NewScreenModal // Handler for NewScreenModal
const confirmScreenSelection = async mode => { export const show = mode => {
selectedTemplates = null
blankScreenUrl = null
screenMode = mode screenMode = mode
pendingScreen = null
screenAccessRole = Roles.BASIC
if (mode === "autoCreate") { if (mode === "table") {
datasourceModal.show() datasourceModal.show()
} else { } else if (mode === "blank") {
let templates = getTemplates($store, $tables.list) let templates = getTemplates($store, $tables.list)
const blankScreenTemplate = templates.find( const blankScreenTemplate = templates.find(
t => t.id === "createFromScratch" t => t.id === "createFromScratch"
) )
pendingScreen = blankScreenTemplate.create() pendingScreen = blankScreenTemplate.create()
screenDetailsModal.show() screenDetailsModal.show()
} else {
throw new Error("Invalid mode provided")
} }
} }
@ -155,7 +156,7 @@
// Submit screen config for creation. // Submit screen config for creation.
const confirmScreenCreation = async () => { const confirmScreenCreation = async () => {
if (screenMode === "blankScreen") { if (screenMode === "blank") {
confirmBlankScreenCreation({ confirmBlankScreenCreation({
screenUrl: blankScreenUrl, screenUrl: blankScreenUrl,
screenAccessRole, screenAccessRole,
@ -166,7 +167,7 @@
} }
const roleSelectBack = () => { const roleSelectBack = () => {
if (screenMode === "blankScreen") { if (screenMode === "blank") {
screenDetailsModal.show() screenDetailsModal.show()
} else { } else {
datasourceModal.show() datasourceModal.show()
@ -174,14 +175,9 @@
} }
</script> </script>
<Modal bind:this={newScreenModal}>
<NewScreenModal onConfirm={confirmScreenSelection} />
</Modal>
<Modal bind:this={datasourceModal}> <Modal bind:this={datasourceModal}>
<DatasourceModal <DatasourceModal
onConfirm={confirmScreenDatasources} onConfirm={confirmScreenDatasources}
onCancel={() => newScreenModal.show()}
initalScreens={!selectedTemplates ? [] : [...selectedTemplates]} initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
/> />
</Modal> </Modal>
@ -198,7 +194,6 @@
<Modal bind:this={screenDetailsModal}> <Modal bind:this={screenDetailsModal}>
<ScreenDetailsModal <ScreenDetailsModal
onConfirm={confirmScreenBlank} onConfirm={confirmScreenBlank}
onCancel={() => newScreenModal.show()}
initialUrl={blankScreenUrl} initialUrl={blankScreenUrl}
/> />
</Modal> </Modal>

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
View File

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
View File

@ -40,14 +40,14 @@
</script> </script>
<ModalContent <ModalContent
title="Autogenerated screens" title="Access"
confirmText="Done" confirmText="Done"
cancelText="Back" cancelText="Back"
{onConfirm} {onConfirm}
{onCancel} {onCancel}
disabled={!!error} disabled={!!error}
> >
Select which level of access you want your screens to have Select the level of access required to see these screens
<Select <Select
bind:value={screenAccessRole} bind:value={screenAccessRole}
on:change={onChangeRole} on:change={onChangeRole}

BIN
packages/builder/src/pages/builder/app/[application]/design/blank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

67
packages/builder/src/pages/builder/app/[application]/design/index.svelte
View File

@ -1,67 +1,12 @@
<script> <script>
import { store, selectedScreen } from "builderStore"
import { onMount } from "svelte"
import { redirect } from "@roxi/routify" import { redirect } from "@roxi/routify"
import { Layout, Button, Detail, notifications } from "@budibase/bbui" import { store as frontendStore } from "builderStore"
import Logo from "assets/bb-space-man.svg"
import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
import { Roles } from "constants/backend"
let loaded = false $: {
if ($frontendStore.screens.length > 0) {
const createFirstScreen = async () => { $redirect(`./${$frontendStore.screens[0]._id}`)
let screen = createFromScratchScreen.create()
screen.routing.route = "/home"
screen.routing.roldId = Roles.BASIC
screen.routing.homeScreen = true
try {
const savedScreen = await store.actions.screens.save(screen)
notifications.success("Screen created successfully")
$redirect(`./${savedScreen._id}`)
} catch (err) {
console.error("Could not create screen", err)
notifications.error("Error creating screen")
}
}
onMount(() => {
if ($selectedScreen) {
$redirect(`./${$selectedScreen._id}`)
} else if ($store.screens?.length) {
$redirect(`./${$store.screens[0]._id}`)
} else { } else {
loaded = true $redirect("./new")
} }
}) }
</script> </script>
{#if loaded}
<div class="centered">
<Layout gap="S" justifyItems="center">
<img class="img-size" alt="logo" src={Logo} />
<div class="new-screen-text">
<Detail size="L">LET’S BRING THIS APP TO LIFE</Detail>
</div>
<Button on:click={createFirstScreen} size="M" cta icon="Add">
Create first screen
</Button>
</Layout>
</div>
{/if}
<style>
.centered {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.new-screen-text {
width: 150px;
text-align: center;
font-weight: 600;
}
.img-size {
width: 170px;
}
</style>

104
packages/builder/src/pages/builder/app/[application]/design/new.svelte Normal file
View File

@ -0,0 +1,104 @@
<script>
import { Body } from "@budibase/bbui"
import CreationPage from "components/common/CreationPage.svelte"
import blankImage from "./blank.png"
import tableImage from "./table.png"
import CreateScreenModal from "./_components/CreateScreenModal.svelte"
import { store } from "builderStore"
import { goto } from "@roxi/routify"
let createScreenModal
$: hasScreens = $store.screens?.length
</script>
<div class="page">
<CreationPage
showClose={$store.screens.length > 0}
onClose={() => $goto(`./${$store.screens[0]._id}`)}
heading={hasScreens ? "Create new screen" : "Create your first screen"}
>
<div class="subHeading">
<Body size="L">Start from scratch or create screens from your data</Body>
</div>
<div class="cards">
<div class="card" on:click={() => createScreenModal.show("blank")}>
<div class="image">
<img alt="" src={blankImage} />
</div>
<div class="text">
<Body size="S">Blank screen</Body>
<Body size="XS">Add an empty blank screen</Body>
</div>
</div>
<div class="card" on:click={() => createScreenModal.show("table")}>
<div class="image">
<img alt="" src={tableImage} />
</div>
<div class="text">
<Body size="S">Table</Body>
<Body size="XS">View, edit and delete rows on a table</Body>
</div>
</div>
</div>
</CreationPage>
</div>
<CreateScreenModal bind:this={createScreenModal} />
<style>
.page {
padding: 28px 40px 40px 40px;
}
.subHeading :global(p) {
text-align: center;
margin-top: 12px;
margin-bottom: 24px;
color: var(--grey-6);
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
margin: 12px;
max-width: 235px;
transition: filter 150ms;
}
.card:hover {
filter: brightness(1.1);
cursor: pointer;
}
.image {
border-radius: 4px 4px 0 0;
width: 100%;
max-height: 127px;
overflow: hidden;
}
.image img {
width: 100%;
}
.text {
border: 1px solid var(--grey-4);
border-radius: 0 0 4px 4px;
padding: 8px 16px 13px 16px;
}
.text :global(p:nth-child(1)) {
margin-bottom: 6px;
}
.text :global(p:nth-child(2)) {
color: var(--grey-6);
}
</style>

BIN
packages/builder/src/pages/builder/app/[application]/design/table.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

7
packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
View File

@ -7,8 +7,6 @@
import { API } from "api" import { API } from "api"
import { store, automationStore } from "builderStore" import { store, automationStore } from "builderStore"
import { auth, admin } from "stores/portal" import { auth, admin } from "stores/portal"
import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
import { Roles } from "constants/backend"
let name = "My first app" let name = "My first app"
let url = "my-first-app" let url = "my-first-app"
@ -38,11 +36,6 @@
// Create user // Create user
await auth.setInitInfo({}) await auth.setInitInfo({})
let defaultScreenTemplate = createFromScratchScreen.create()
defaultScreenTemplate.routing.route = "/home"
defaultScreenTemplate.routing.roldId = Roles.BASIC
await store.actions.screens.save(defaultScreenTemplate)
appId = createdApp.instance._id appId = createdApp.instance._id
return createdApp return createdApp
} }