Markdown Editor Control

To write formatted lightweight text, the Studio has a control called Markdown Editor. Markdown is a simple syntax that formats text as headers, lists, boldface, and so on.
The Markdown Editor allows you to write markdown and has a preview if you need to see the output in between. The output of this control is the markdown string.

UI Properties

Info

  • Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

  • Label: The text that is displayed helps the user to understand the type of control it represents.

  • Tooltip: The option to add tooltip text as a hint to the user. It is visible when you switch on the visibility toggle property.

  • Description: The option to provide a description that you can add for your control. It is visible when you switch on the visibility toggle property.

  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

  • Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.

  • Hidden: The hidden option helps to hide control from the user. This helps when you don’t want the user to view the control.

  • Trigger Dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here. By default, Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

    • Hide on desktop: This option hides the selected control in the desktop view.

    • Hide on Mobile: This option hides the selected control in the mobile view.

    • Dynamic Height: This option dynamically increases /decreases the height of the text control based on the given content.

    • Maintain space when hidden: This option maintains the specified space between controls when a particular control is hidden. When control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.

Note: Hide on desktop, Hide on Mobile, Dynamic Height, and Maintain space when hidden are
available in Basic Freeflow Editor Only.

Properties

image

One can provide the theme to this control and make it fit to screen.

How to use Markdown Editor

Select Markdown Editor under the Custom section from Controls.

Bind data to Markdown Editor

There are different ways in which you can bind data to the Markdown Editor control.

  1. Data: This is the data that does not change over a period of time. Such data is used to assign default values in fields in your application. The static data should be based on markdown language / HTML language.

  2. Controls: This allows you to get data from one of the App controls.

  3. Variables & Keywords: This assigns the value of the variables and keywords defined or available in the app.

  4. Query String: You can also select from the available query string to bind data to the control.

  5. LoggedIn User: You can display the properties related to the LoggedIn User like username, usermail, Admin, status, and so on. You can select a single property only. Select column and click Save .

  6. Connectors: This allows you to select a configured connector and call its API to fetch values and bind the values returned by the respective API. You can select multiple keys to display values.

  7. Custom Formula: This can be used to apply formulas and store the output of those formulas. You can learn more about formulas here.

  8. Custom JavaScript: You can also add a Custom JavaScript to fetch data and use it for your app operations.

Sample data:

**Sample Markdown** 
# h1 Heading 
## h2 Heading 
### h3 Heading 
#### h4 Heading 
##### h5 Heading 
###### h6 Heading 
## Horizontal Rules 
___ 
--- 
*** 
  "Smartypants, double quotes" and 'single quotes      
## Emphasis       
**This is bold text**       
__This is bold text__      
*This is italic text*       
_This is italic text_       
~~Strikethrough~~  
## Blockquotes      
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other... 
> > > ...or with spaces between arrows.

Add to action on Markdown Editor

image

value_change :

Whenever you change the value in the Markdown Editor control the subsequent actions would be triggered. The action flow would be the same with the same set of on-screen and server-side actions that you have been using for the action button, list controls, and others. The frequency/speed of change can be controlled using debounce property for the control.

Control features

To view the full feature of the control, we have to view it in preview mode. There are list of properties and tools available in the control itself.

  • Bold (B)/ Italic (I) - These help in to provide a bold and italic attribute respectively.

  • Heading (H) - This on-click will give the whole line a heading attribute. It starts with heading 1, then heading 2, and goes on, on repeated clicks on the same line.

  • Quote (“) - This on-click will make the sentence as quoted.

  • General List/Control List – This click makes each line in bullet and numbered list format respectively.

  • Link – This on click, enables you to add a link to a word(s).

  • Insert Image – This on-click enables you to insert an image by providing the image URL.

Toggle Preview – This click enables you to toggle between the markdown editor mode and the preview screen mode with formatted text.

  • Toggle Side by Side – This on click will split the control screen and one section will be the markdown editor and the other part would be a preview window of the formatted texts.

  • Fullscreen – This on click will make the control full screen.

  • Markdown Guide – To know more about markdown formats, you can click here and redirect to markdown guide.

DronaHQ Docs have found a new place!

We have updated and moved our documentation to docs.dronahq.com.
You can continue to ask questions in the community here.