Building the demo CyberApp

This section is a step-by-step guide to building the SayHi demonstration Cyberapp.

The full process is broken into smaller, functional steps for your convenience:

• Step 1 - Creating the CyberApp

• Step 2 - Adding the Acronis integration catalog details

• Step 3 - Building the CyberApp functionality

  • Step 3a - Creating the CyberApp Version and extension point

  • Step 3b - Creating a form to display the selected greeting

  • Step 3c - Designing the greeting selection form

  • Step 3d - Disabling the buttons until a greeting has been selected

  • Step 3e - Mapping the greeting data to the greeting display form

• Step 4 - Deploying the CyberApp

• Step 5 - Testing the CyberApp

Note

If you prefer, you can import the SayHi Cyberapp Version and Description.

Step 1 - Creating the CyberApp

Create a CyberApp and name it SayHi.

Note

Do not turn on the Connection to Acronis API toggle switch, because SayHi does not need access to the Acronis API.

Step 2 - Adding the Acronis integration catalog details

Note

For MSPs to be able to find and enable a CyberApp, it must be listed in an Acronis integration catalog.

SayHi must appear in the catalog to enable it (even for a test deployment), so a valid Description is required.

Create a Description and complete the minimum required fields for the Description to be valid. For the purposes of the demo, the content is unimportant, but here is what we used:

• About CyberApp > Name: Say Hi!

• About CyberApp > Logo:

  

• About CyberApp > Catalog card description: Say “Hi!’ to the world!

• About CyberApp > Detail page title: Say “Hi!’ to the world!

• About CyberApp > Action button (website): www.demoisv.com

• Support contant > Company name: DemoISV

Step 3 - Building the CyberApp functionality

Step 3a - Creating the CyberApp Version and extension point

1. Create a Version with explicit partner and customer enablement options.

   Note

   Ensure that the Connection with your platform toggle switch is not turned on, because SayHi does not need access to your platform. If this toggle switch is enabled a CyberApp callback handler is expected.

2. Create a menu item.

   We named the menu item Say Hi!, and added it to the Acronis Cyber Platform Management menu by selecting Management from the Parent menu item in Protection Console dropdown.
   

Step 3b - Creating a form to display the selected greeting

We will start by creating a dependent form, which will display the chosen greeting.

1. Click to design the SayHi UI.

2. Click in the Form group area, and name the new form Saying Hi!.

3. From the CONTENT ELEMENTS menu, drag and drop a Text element and set the ID field to displaygreeting.

4. Drag and drop another Text element and set the ID field to displaymessage.

5. Create a form footer button to close the form.

   1. Click on an empty space on the form and scroll down to the Footer buttons section of the PROPERTIES tab.

   2. Set the label to Close.

   3. Assign the On click property to Close form.

   

Step 3c - Designing the greeting selection form

1. Select the Root form.

2. From the CONTENT ELEMENTS menu, drag and drop a Header element onto the form and change the Text field to “Instructions”.

3. From the CONTENT ELEMENTS menu, drag and drop a Text element below the header element and change the Text field to “Choose a greeting, then click a Say Hi! button”.

4. From the INPUT CONTROLS menu, drag and drop a Select element below the existing form elements.

   1. Set both the ID and Label fields to “Greeting”.

   2. Set Width to Full.

   3. Set Placeholder to “Choose a greeting”.

   4. Add Options to the select element. Set the Label and Value fields the same for all of them. We added four:

      • “Hello, World!”

      • “Hi, World!”

      • “Hey, World!”

      • “Howdy, World!”

5. From the INPUT CONTROLS enu, drag and drop an Input element under the Greeting select element.

   1. Set the ID to “message”.

   2. Set the Label to “Additional message”.

   3. Set the Width to Full.

   4. Set the Type to Textarea.

6. From the LAYOUT MANAGEMENT menu, drag and drop a Divider element below the existing form elements.

7. From the LAYOUT MANAGEMENT menu, drag and drop a Group element below the divider.

   1. Set Mode to Row.

   2. Set Gap size to Medium.

   3. Select the SPACING folder, and set the Inner top and Inner bottom settings to Small.

8. From the ACTION CONTROLS menu, drag and drop a Button element into the grop element.

   1. Set ID to “sidebarbutton”.

   2. Set Label to “Say Hi! in sidebar”.

   3. Set Width to Full.

   4. Set On click to Open form, Mode to Sidebar, and Form name to Saying Hi!.

   5. Click on SPACING, and set Outer top, Outer bottom, Inner top, and Inner bottom all to None.

9. From the ACTION CONTROLS menu, drag and drop a Button element into the grop element.

   1. Set ID to “popupbutton”.

   2. Set Label to “Say Hi! in popup”.

   3. Set Width to Full.

   4. Set On click to Open form, Mode to Popup, and Form name to Saying Hi!.

   5. Click on SPACING, and set Outer top, Outer bottom, Inner top, and Inner bottom all to None.

   

Step 3d - Disabling the buttons until a greeting has been selected

1. Select sidebarbutton and select the VISIBILITY folder.

2. Click New dependency.

3. Select Enabled from the State dropdown.

4. Click New condition.

5. Leave Condition type as Model.

6. Set Property name to greeting.

7. Select True from the Is dropdown.

8. Repeat steps 1 to 7 for popupbutton.

   

Step 3e - Mapping the greeting data to the greeting display form

We need to open the dependent form we just created, and map the chosen greeting from the Root form dropdown to the displaygreeting text element on the dependent form.

1. Select sidebarbutton.

2. Select the PROPERTIES tab.

3. In the On click > Input parameters mapping section:

   1. Click Add mapping.

   2. Select greeting from the Model dropdown, and select displaygreeting from the Parameter dropdown.

   3. Click Add mapping.

   4. Select message from the Model dropdown, and select displaymessage from the Parameter dropdown.

4. Repeat the above steps for popupbutton.

5. Click Done.

6. Click Save changes.

Step 4 - Deploying the CyberApp

Deploy the Description and Version you just created to your test environment.

Step 5 - Testing the CyberApp

1. Login to Acronis as an administrator.

2. Select INTEGRATIONS from the menu.

3. Find the SayHi CyberApp in the catalog.

4. Click Configure.

SayHi is now enabled. The menu item has been added to the Management menu. Click it to use the Cyberapp.