Adding custom properties to widgets

Adding custom properties to widgets

  
I would like to take an existing widget that comes bundled with OutSystems, and extend it to add a custom property that abstracts some logic.

For example, say I have some logic that allows the developer to create a fancy looking tooltip that is displayed when the user hovers over an element.  To install a tooltip on a button, the developer needs to drag over a new button from the widget toolbox then add two extended properties to it:
  • title: "tooltip text"
  • placement: "top"

Instead of having the developer manually set the two extended properties above, I would like to create two new properties on the button itself, called "Tooltip" and "Tooltip Placement".  Tooltip would be a text field and Tooltip Placement would be a dropdown containing "top", "right", "bottom", and "left":



This strategy allows any developer to start using the tooltips without needing to know what manual properties are required to get them initialized, and what values the "placement" can be.

Is there any way to do this?

(Please note that tooltips are not my only use case for this.  I'd like a general solution, not just one that can handle the tooltips example.  If there is another way to do tooltips, that's fine, but I'd still like a general solution to the problem at hand.)

Thanks,
Mike
Hi Mike,

Currently it is not possible to extend the Development Environment in that way. What you can do to create reusable elements is to use web blocks and you can use the Input Parameters to create the same effect.

So in your case you'd need to create two input parameters one of type Text to receive the Tooltip and the other one with a type of a public Static Entity (e.g call TooltipPosition) that would allow the developers to have a drop down with the options matching the records of the static entity.

if you open RichWidgets you'll see that this is the approach used in many widgets (including the commonly used Icon and FeedbackMessage).

Hope this helps,
Guilherme
Hi Guilherme, thanks for the response.

I am aware of the web blocks and using them with input parameters, but I was looking for a different solution.

I'm trying to achieve what is essentially a decorator pattern (http://en.wikipedia.org/wiki/Decorator_pattern).  The problem with the web block strategy is that for each behavior I want to bestow on the original object, I need to put everything in another web block.  If I have 5 behaviors on a button (not a far-fetched amount), then I would end up with something that looks like this in the widget tree:

-- Web Block 1
----Web Block 2
------Web Block 3
--------Web Block 4
----------Web Block 5
------------Button

Which would generate HTML that looks something like this:  (for 1 button)

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <input type="submit" />
          </div>
          <script type="text/javascript">
            // some
            // JavaScript
            // function
            // to pass down behaviors
            // to the base component
          </script>
        </div>
        <script type="text/javascript">
         // some
         // JavaScript
         // function
         // to pass down behaviors
         // to the base component
        </script>
      </div>
      <script type="text/javascript">
       // some
       // JavaScript
       // function
       // to pass down behaviors
       // to the base component
      </script>
    </div>
    <script type="text/javascript">
     // some
     // JavaScript
     // function
     // to pass down behaviors
     // to the base component
    </script>
  </div>
  <script type="text/javascript">
   // some
   // JavaScript
   // function
   // to pass down behaviors
   // to the base component
  </script>
</div>

Instead of just:
<input type="submit" />

Since the placeholders in each web block generate a wrapping container (generally a <div>), then the HTML markup would be huge and very nested (as seen above).  I would also need to run JavaScript after every web block (also seen above) to apply the behavoir to the button at the very bottom of the web block stack, and that can get very complicated.  If there were 50 things on a page that each inherit 5 behaviors (in reality there would be many more), that's an automatic 250 JavaScript <script> tags and 200 extra <divs>.

Thank you for confirming that OutSystems currently does not support this.  I will explore other options, and if they are viable enough, offer the idea(s) back to the community.