Exploiting the Chrome debugger to help Alpha Anywhere developer to visually enhance user experience

We provide custom software development, and mainly use the Alpha AnyWhere software development tool, which was formerly known as Alpha Five. Our staff has over 30 years of experience in software development for a variety of clients including Avis Car Rental company. In this project, Avis trusted us with their contract manager software for 30 locations throughout Northern NJ in the United States. Our Alpha AnyWhere developers also specialize in developing accounting software such as extensive payroll systems.

In this List View we track down the audit trail from multiple clients such as component name, any object that was selected, some values such as PO number and more. This type of audit trail can be its own video.

This video provides steps of how to use the chrome debugger to gain a better control of the user interface.

We Demo in the above of how to capture the innerHTML code from the Chrome debugger. In addition, how insert the innerHTML within the javaScript function while using Alpha AnyWhere component and also formally known as Alpha Five.

We grayed out buttons when they are disabled to make it more obvious to users that they are currently un-applicable. This feature enhances the user-friendliness of the interface, saving time and increasing productivity.

See the below example when the component is loaded and the buttons are disabled with gray color.

Alpha AnyWhere UX Component Disabled Buttons With Gray Color. These are the default colors when loaded.

When the drop down “By User” is selected, the below is what the end-user would see.

Alpha AnyWhere UX Component Enabled Buttons With their natural Colors. The minute the user enters any value the buttons are enabled with their default colors.

Below are the steps to get into the google chrome debugger:

  1. Run this UX component under the chrome browser and on your keyboard hit CTRL-SHIFT-J, now, you’re in the Chrome debugger. You could also just right click and select the Inspect option however, the first option is slightly faster.

  2. Click on the first option to select an element in the page to inspect:
    Select an element
  3. Move the mouse cursor on top of the button and hover on top of it. The label as shown in the image below pops up. The info that is shown in this label depends on where your cursor is positioned on top of the button. In the below example it shows the background padding code of the button element, if you move the cursor above the Excel icon, it will show you this code: DLG1.V.R1.BUTTON_EXPORT_TO_EXECL.ICON.
    Showing the element details from the left side of the button while using the chrome debugger inspector.
  4. Click on the left side of the button to get the below code on the right side within the chrome debugger:
    Showing the java script button’s code at the right side of the Google chrome debugger.
  5. Double click on this line: DLG1.V.R1.BUTTON_EXPORT_TO_EXECL right near the ID and then right click to copy it.
    Get the button ID via the chrome debugger.
  6. Click the Console option:
    In the Chrome Console Debugger enter the button ID as it was shown when the element was inspected.

    Enter the expression that was copied from item 5 above as follows: $('DLG1.V.R1.BUTTON_EXPORT_TO_EXECL').innerHTML;

    The $ sign is a substitution to the Java Script function which would otherwise be: document.getElementById("MyButton");
    In the Chrome Console Debugger enter the button ID and use the js function named: document.getElementById() instead of dollar sign.
  7. Press Enter after the innerHTML as shown in step 6 above to grab the entire innerHTML code:
  8. Replace the DLG1 with: {dialog.ComponentName} which is an Alpha AnyWhere place holder. In order to change the text in blue to gray, alter the code with #808080. The below code displays this.
  9. The actual Java Script function which is called from the button’s Enable/Disable property is:

    ExportToExcelAllowed(ActivityDateFrom, ActivityDateTo, ActivityUserSelection)

    See below the entire example of the JavaScript function:
    ------------------------------------------------------------------------------------
    We use the ButtonColor variable, either for the Blue or Gray color for the innerHTML line.

    If you click on the above link you can get the actual code.

For more questions regarding our software developmnet or our database services, please call us at: 732-536-4765.

You may also check our database department for our remote DBA solutions.

Doron Farber - The Farber Consulting Group

I started to develop custom software since 1985 while using dBase III from Aston Tate. From there I moved to FoxBase and to FoxPro and ended up working with Visual FoxPro until Microsoft stopped supporting that great engine. With the Visual FoxPro, I developed the VisualRep which is Report and Query Engine. We are also a dot net development company, and one of our projects is a web scrapping from different web sites. We are Alpha AnyWhere developers, and the Avis Car Rental company trusted us with their contract management software that we developed with the Alpha Five software Engine.

Comments

Got questions about unleashing the full potential of your project?
We’ve got the answers!

Contact Us

Search