cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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

Highlighted
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!

Highlighted
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
secondImage

New Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

August 2020 CYST Challenge

Check out the winners of the recent 'Can You Solve These?' community challenge!

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Users online (3,814)