Add button to menus / scenes

command_adminOrganization Administrator

Image buttons are built to maintain your company’s brand standards. Designed to be flattened images that contain colors, fonts and images specific to your brand and will look clean and consistent across all technology platforms.

Step 1)

From the main Applications list menu in your Command.App builder, locate the application you want to edit and click the Edit button. Edit_Button

Step 2)

Navigate to the scene / menu you want to add or change buttons on and click Edit. Edit_Button

Step 3)

There is a tab halfway down your menu that says Widgets. Edit_Button Click it.

Step 4)

To add a button, you have two choices:

Preferred choice

  • Image Button – An image that was created in a graphic editor (PPT, Photoshop, etc..) that you can use as a flattened image. The Command.App platform uses .PNG or .JPG format.

Alternative

  • Label Button – If you know CSS, you can create a code based button that can be used.

Step 5)

If you select Image button, click the Add Widget button to the right. Widget Button
This will add the button widget to a list below.

Step 6)

You are then able to click the orange button widget bar and it will open the configuration options.

Add Image Button

  • Select Image – Allows you to locate the piece of content you want to use for your button in your asset library. If it isn’t currently in your asset library, you can upload that image at this point.
  • CSS Classes – This is the name you give your button to place it on your device. You will use this under the Scene or Application Stylesheet tab. EXAMPLE: main-menu-button or application-videos
    • Requirements include:
      • All lowercase letters
      • No spaces, instead use a hyphen (-)
      • Cannot use numbers to begin the title (419-spec-videos)
  • Button Display Name – This is the name in you give your widget in the list. It is only visible by the organization administrator, so name it whatever you want!
  • Action – What does this button do? This is where you set what the button does when you touch it.
Actions

None

Go Back

Open A Collection

Go To A Menu

Go To the Home Menu

Send An Email

The image will do nothing when touched

Navigates back one menu from where you are.

Navigates to a content collection

Navigates to another scene/menu

Navigates to the Home / Main Menu

Allows the user to email whatever content you want attached to this button. You will select a pre-designed email template and the file you want to send.

Exit The Application

Open an External Website

Will exit out of your app and take you back to the Command.App app activation menu.

Will take you to a website from the app. This will not exit from the app, rather launch a browser inside the app.

Open Content Search & Lookup

Platform Upgrade – A toolset that users can quickly access any content item via a serial number (sku), item number or description.  For more information, visit https://command-app.com/toolsets/

Open a Quote Builder

Platform Upgrade – A toolset that users can create quotes inside the app and deliver them to the client on-the-spot.  For more information, visit https://command-app.com/toolsets/

Open a Cost Calculator

Platform Upgrade – A toolset that uses a pre-built calculator to compare against your competition. For more information, visit https://command-app.com/toolsets/

Open the Form History

Platform Upgrade – A toolset to view forms created in the field, specific to each user. For more information, visit https://command-app.com/toolsets/

Open the Sales Quote History

Platform Upgrade – A toolset to view submitted sales quotes, specific to each user. For more information, visit https://command-app.com/toolsets/

If you have added an image button and set the action tied to it, your steps are complete. Please review the CSS Themes article to understand your media query for your devices and learn how to place the button on your menu.


Create a Label button using CSS.

Step 1)

Select Label Button and click the Add Widget button to the right. This will add the button widget to a list below.

Step 2)

You are then able to click the Label Button Widget and it will open the configuration options.

  • Action – What does this button do? This is where you set what the button does when you touch it.
  • CSS Classes – This is the name you give your button to place it on your device. You will use this under the Scene or Application Stylesheet tab. EXAMPLE: main-menu-button or application-videos
    • Requirements include:
      • All lowercase letters
      • No spaces, instead use a hyphen (-)
      • Cannot use numbers to begin the title (419-spec-videos)
  • Button Display Name – This is the name in you give your widget in the list. It is only visible by the organization administrator, so name it whatever you want!
  • Action – What does this button do? This is where you set what the button does when you touch it.

If you have added an your label button and set the action tied to it, your steps are complete. Please review the CSS Themes article to understand your media query for your devices and learn how to place the button on your menu.