Skip to end of metadata
Go to start of metadata

A major update to the Visual Constructor is released on May 17th.


Was


Past Issues

The following issues existed, that made work in Constructor slower and more difficult.

  1. Speed of work of the Drag and Drop, on large and complex screens with hundreds of elements.
  2. Possible visual differences between "Layout edit" (which was an emulator), and resulting in-app view. 
  3. Extra time scrolling the app inside "device frames"
  4. Inability to quickly view the app filled with data from different users/objects
  5. Uninformative drag and drop positioning
  6. Confusing and heavy-looking "Layout Edit", when using lots of long hashtag references
  7. Difficult to click copy/paste/duplicate/delete menu on complex screens


All solved!

Now

  1. The engine that runs the Constructor screen has been deeply reengineered:
    1. the speed of "drag and drop" for even very large screens is now 1-3 seconds
    2. the view of the screen is now an actual live application, not an emulator
  2. The visual part is cleaner, more transparent, more flexible in settings and needs less effort during app development:


What changed in the overall interface

Corresponds to numbers above ↑

  1. The "device frames" are deleted, the screen now is a full-screen feed.
  2. You can change object/user ID on a fly, to see how the app will look with different kind of data
  3. The screen name, which you edit, now is here and you can open it in a separate window by pressing an arrow
  4. The switch between "Layout Edit" and "Live Edit" is now a "mouse pointer", meaning you can click through the app
  5. The panel to Duplicate, Copy/Paste, and Delete a component from the screen is now static, so there is no need to "aim" during clicking


New screen pane manage functions


  • You can now select how will the screen look in Drag and Drop (former Layout) mode.
    Note the red mark ↓ block from your Demo app's screen called  "Math expressions and operations" 



  • The previous Layout edit showed these lengthy #hashtags#, note the green marked block ↑



  • Now you can "Render hashtags" and continue working with a clean interface, as your users would actually see.
    Note 2 amber blocks ↓.



  • The data is pulled in hashtags comes from a user IDentified in the magenta block ↑.



  • The "Display service labels" function allows seeing which components have hashtags and which are hidden by default.
    Note 2 red blocks ↓.



  • Point mouse at the hashtag label marked green ↓, and you will see where hashtags are used on this particular component.
    In this case - 5 hashtags exist in the Text field of the Properties tab and in Visibility settings:



New Drag and Drop quick targeting


  • When you place and re-arrange components on the screen it is now easier to select drop location.



  • Note the cyan block ↑ above marks the block, where you are targeting the components
    and the red-lined block ↑ changes with mouse move to select where to drop, above or below.

    You can always use the Components tree in the left panel, for maximum precision of placement, as shown ↓.



As usual - Looking forward to your questions and comments in the Support channels!


  • No labels