How to do grey highlights in a form control using buttons

[unknow122]

Hi,

I am trying to create a mini version of dictionary on Powerapps. I am completely new to it and I am in the learning process of it. On the sharepoint list, I have created a small table with the words and its meaning. And on powerapps when I use the form control (vertical form), It has a standard format. I would like to add a customized touch to it. Like having a grey color on each of the block and with buttons having a rounded corners. I have attached a picture as an example. Then upon clicking on the button it takes you to the next screen that shows the meaning of it. How do I do that? Like for each and every word (A TO Z), will I have to create separate screens that shows the description?

[HenriDesmet59]

Hello @unknow122 ,

First I think It's better to use a "Vertical Gallery" to display your list from SharePoint.

In this gallery, you will have to create a template with the control you want and the color etc...

Then With the gallery control, you have a parameter "OnSelect". In this parameter, you can Navigate to another screen and pass in parameter the Item selected in the gallery : 

Navigate(Full_def_screen, CoverRight, {Selected_Item: Gallery.Selected})

In the next screen you will have the variable "Selected_Item" and you can bind It on different control you have on your screen. 

For example a control for the name of the Item, you will put in the "Text" parameter : Selected_Item.Title.

Tell me If you need more help 🙂 

Henri

[unknow122]

@HenriDesmet59 wit regards to the vertical gallery, you said : you will have to create a template with the control. But powerapps already gives you one type of format. And as shown in the screenshot I would like to add round corners but not sure of how to do that as there is no radiustopleft, radiustopright etc properly for the vertical gallery. 

I did not understand this section: In the next screen you will have the variable "Selected_Item" and you can bind It on different control you have on your screen. 

what is the next screen? Is the screen(as shown in the screenshot) when you click it, it takes you to the next screen that displays the description?? 

[HenriDesmet59]

To display a round corner you can use the Input text control for example. In this control there is an option for the radius. Then you put this control in "Disabled" mode and you put it in the background of the row.

The "next screen" is indeed the screen that displays the description 🙂 

[unknow122]

@HenriDesmet59, but to display the sharepoint list, I have to use the Vertical gallery right? Then how can I use the input text control to display the sharepoint list? I am aware that the text input control has a radius property. Additionally, if I put the text input control on a disabled mode, can I still navigate to the screen that displays the description?

[HenriDesmet59]

Yes you can use a vertical gallery 🙂

When you use a gallery, you can choose which control are displayed on each line of the gallery.

You can put any control you want in a row of a gallery, in your case, you can put a disabled text input in the background that will be there just for the design.

Then you can put 2 text box to display the title and a short description.

Then the thing that will make you navigate to the screen that displays the description is the parameter "OnSelect" of the vertical gallery. 

This parameter will be trigger when you click on a row of the gallery. 

Sorry for my english !

[unknow122]

@HenriDesmet59 @With regards to this - 

“When you use a gallery, you can choose which control are displayed on each line of the gallery.

You can put any control you want in a row of a gallery, in your case, you can put a disabled text input in the background that will be there just for the design.“ is there a way where you could show me a step step process? Or maybe screenshot? 

[HenriDesmet59]

Yes sorry my explanations are a bit messy 😕 

You can look at this very nice tutorial, in the "PowerApps gallery layout" topic :

Power Apps Gallery Control - Helpful tutorial - SPGuides

It's showing how to change the layout of a gallery 🙂 

[unknow122]

@HenriDesmet59 I used the blog topic you described. It was partially helpful. I kinda reached to the stage where I could get text input control (as shown above in the screenshot previously). But there is a slight problem. 

I have highlighted the yellow section. It doesn't look like 1 proper box, whereas as shown before it looks like 1 box. Is there a better way to do that?

[HenriDesmet59 · Accepted solution]

Ah yes so you put 2 input text box that's right ?

What you can do is to put one big text box, but not write inside it.

Then you can put 2 label text control in your gallery where you want to display your informations. 

The input text box will just be in the background for the design 🙂