cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Super User
Super User

SUGGESTION BOX: Show "Instructions" after importing Component

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

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Dual Super User
Dual Super User

Re: SUGGESTION BOX: Show "Instructions" after importing Component

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

View solution in original post

3 REPLIES 3
Highlighted
Dual Super User
Dual Super User

Re: SUGGESTION BOX: Show "Instructions" after importing Component

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

View solution in original post

Super User
Super User

Re: SUGGESTION BOX: Show "Instructions" after importing Component

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!

Super User
Super User

Re: SUGGESTION BOX: Show "Instructions" after importing Component

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>
"

Helpful resources

Announcements
MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.

firstImage

New Ranks and Rank Icons released on April 21!

The time has come: We are finally able to share more details on the brand-new ranks coming to the Power Apps Community!

Power Platform 2020 release wave 1 plan

Power Platform 2020 release wave 1 plan

Features releasing from April 2020 through September 2020

Top Solution Authors
Top Kudoed Authors
Users online (8,361)