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 II
Dual Super User II

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 II
Dual Super User II

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

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

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
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (4,699)