SUGGESTION BOX: Show "Instructions" after importing Component

[ericonline]

Hello, just a cool suggestion here (not going to post in Ideas). 
From my experience, Components need to be "configured" after they are imported into a new app. It would be AWESOME if the Component maker could pass some simple "Instructions" along with the component. These instructions could include the configuration code. 

Example:

Responsive Screen Component: "cmpComponent"

- Custom Input Properties:

    - cmpHeader

    - cmpPrimaryColor

- Bar (Icon control) across component:

    - Text: cmpComponent.cmpHeader

    - Fill: cmpComponent.cmpPrimaryColor

- Instructions popup would read:

Steps to incorporate this Component.

1. Copy the following code to your apps OnStart or your screen's OnVisible property:
Set(varHeader, <enter your app name>);
Set(varPrimaryColor, <enter hex value>)

2. Select the Component in the Tree View

3. Set its properties accordingly:
- cmpHeader: varHeader
- cmpPrimaryColor: varPrimaryColor

[RezaDorrani · Accepted solution]

Hi @ericonline 

great suggestion

Alternatively, component can also include a label - which contains all the instructions which then can be deleted or hidden by the person importing it

I have been doing that for most of the components I build

Regards,

Reza Dorrani

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly

[ericonline]

Great suggestion @RezaDorrani ! I usually put that type of thing into a code comment, but components don't have a "top level" property (like OnStart or OnVisible) to put such a comment. 

I love this idea and call this a definite Solution!

[ericonline]

For the benefit of others, here are the instructions I created for a reusable screen component. These are placed inside an HTML Text control. Hope this helps!

"
<p>
    This component has 8 Custom Properties that must be instantiated after the component is imported.
<br>
    Copy the following code into the OnStart or OnVisible property of your app:
<br><br>
    <strong>NOTE:</strong> Everything shown between '- -' below must be customized by you, the app maker.
</p>
<ol>
<li>
<code>
Concurrent(
    ClearCollect(colMenuItems,
        {screen: -screenName as string-, icon: Icon.-whichever icon you want-},
        -repeat for each screen in the menu-
    ),
    Set(varLogo, -URL of your logo-);
    Set(varHeader, -name of app as string-),
    Set(varVersion, -version of app as string-);
    Set(varPrimaryColor, -hex value of color as #XXXXXX-),
    Set(varSecondaryColor, -hex value of color as #XXXXXX-),
    Set(varVersion, -version of your app as string-)
);
Set(varTimerStart,true);
Set(varTimerStart,false);
Set(varTimerStart,true);
</code>
</li>
<br>
<li>
After this code is instantiated, set the cmpRespScreen custom properties as such:
<ul>
<li>
<code>
cmpMenuItems = colMenuItems
<br>
cmpLogo = varLogo
<br>
cmpHeader = varHeader
<br>
cmpVersion = varVersion
<br>
cmpPrimaryColor = varPrimaryColor
<br>
cmpSecondaryColor = varSecondaryColor
<br>
cmpTimerStart = varTimerStart
<br>
cmpVersion = varVersion
</code>
</li>
</ul>
</li>
<br>
<li>
Finally, execute the OnStart or OnVisible code to see your component come alive!
</li>
</ol>
<p>
For support, contact me@mycompany.com.
</p>
"