Fill color of Box with three different colors in background

[venka91]

Dear All, i am developing a dental application. I have teeth pictures placed on the box. Based on the dental examination, the box needs to be marked with different colors. Example, if teeth requires restoration, color is yellow. If teeth requires root canal then Red, if teeth requires restoration then black.

Could any one pls help. I have got a screen as attached. I am using image box load the teeth pic, and filling the background color of the control. i need something similar to this. How do i do and i am running out of ideas.  Because for the 20 individual teeth, the color needs to be done based on the diagnosis. Please help.

[venka91]

Dear All, i managed to make three different colors when the box is clicked with the below code.

UpdateContext({x: x+1});
Switch(x,1,UpdateContext({col:Red}),2,UpdateContext({col: Yellow}),3,UpdateContext({col: Black}),4,UpdateContext({x:0}))

and now i have another requirement and seeking your help.

I have 20 boxes. I have given them label as A, B, C, D., etc. User click on box and select the color based on the dental diagnosis made. Example : Red for Restoration, Yellow for Root Canal, Black for Extraction.

Now i would like to show which box is selected on my Diagnosis Summary.

I have 3 labels given on my Summary Screen.

Extraction: (i want to show which boxes are selected based on black color)

Root Canal: (i want to show which boxes are selected based on Red canal)

Restoration: (i want to show which boxes are selected based on Yellow color)

Pls team help i badly need the logic and help.

[Boynog]

Hi @venka91 ,

You just need to upload to SharePoint list and open it to gallery, then you can now update the status which is connected to the colors.

SharePoint List consist columns 
links of image, status, id

-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

[venka91]

it looks you have some idea. can you please little explain about that. i am really blank and scratching my head to find solution.

[rubin_boer]

hi @venka91 see if this will help you in addition before you save your data.

Add your images to the app if not already and show the in a gallery. as you need 20 images lets create a collection with twenty items. i included the image name, tooth number and diagnosis in the collection

ClearCollect(colDental,ForAll(Sequence(20),{toothnumber:Value, diagnosis:"none", img:toothache_50px}))

With the gallery's word wrap set to two i get two rows and 10 columns as below. add the image and a label to the gallery.

Click the image and set the Fill = Switch(true,
ThisItem.diagnosis = "Extraction", Black,
ThisItem.diagnosis = "Restoration", Red,
ThisItem.diagnosis = "Root Canal", Yellow,
RGBA(237, 237, 237, 1))

Add two labels to the app, outside of the gallery and call setthe text to:

label1 Text = "Selected Tooth: " & Char(YourGallery.Selected.toothnumber + 64) 

label2 Text = "Select diagnosis"

 Add a dropdown and set its Items = ["Extraction","Root Canal","Restoration"]

now when you click on a tooth, the label 1 will indicate which tooth you are selecting. Set the templatefile of the gallery to If(Self.IsSelected, WhiteSmoke, RGBA(0, 0, 0, 0)), this will show the user which tooth is selected additionally.

All of this will get you the following screen

Add the button and call it Apply diagnosis, when the user click this patch the collection according, Patch(colDental,Gallery23.Selected,{diagnosis:Dropdown5.SelectedText.Value}). lets diagnose three teeth , teeth A, I and P and give them all a different diagnosis.

The user can see which tooth is having which diagnosis

Is thi swhat you are looking for?

[venka91]

Thank a lot for taking time to write this code and tested. But not to trouble you further more, but still i need a helping hand.

I am not clear where to define the collection : ClearCollect(colDental,ForAll(Sequence(20),{toothnumber:Value, diagnosis:"none", img:AT});

1. Should i be giving this on screen onvisible ? or at the Gallery

2. I have different images to upload. But when i select the image property and apply an image, Gallery is reflecting the same image to all rows.

3.And after applying diagnosis, i have the screen as below and show the Diagnosis summary. Is that doable. i am attached image.

Kindly help. I have only you as the source to get this completed.

[rubin_boer · Accepted solution]

hi @venka91 

Question 1.

It will be best to do this collection in the OnStart property of the app (you only need to load this once). Now there is a few ways to go about getting to work with multiple images on a canvas app but since we started with a collection lets continue and you can try out a component by yourself as another way.

Question 2.

Add all your images to media section. I will add three images (mine are svg from the web), tooth-dental-svgrepo-com, tooth-shape-outline-svgrepo-com, and tooth-svgrepo-com  

Now the collection as per Question 1 (I will only add the three images)

OnStart = ClearCollect(colDental,ForAll(Sequence(3),{toothnumber: Value, diagnosis:"none", img:

Switch(true ,
Value=1,'tooth-dental-svgrepo-com',
Value=2,'tooth-shape-outline-svgrepo-com',
Value=3,'tooth-svgrepo-com')

)

At this point the collection have all three images in it not, just one like before. Here you will have to expand the switch command to include all your images.

Here is the gallery with all the teeth in the collection.

your Switch will have all the numbers from value 4 to value 20

Question 3.

Add another gallery and set its Items = AddColumns(GroupBy(Filter(colDental,diagnosis <> "none"),"diagnosis","Summary"),"Teeth",Summary.toothnumber)

Add two label to it

label 1 Text = ThisItem.diagnosis

label 2 Text = Concat(ThisItem.Summary,Char(toothnumber+64),", ")

label 2 Fill = Switch(true,
ThisItem.diagnosis = "Extraction", Black,
ThisItem.diagnosis = "Restoration", Red,
ThisItem.diagnosis = "Root Canal", Yellow,
RGBA(237, 237, 237, 1))

make sure the text can be read by changing the color of the text

Label 2 Color = Switch(true,
ThisItem.diagnosis = "Extraction", White,
ThisItem.diagnosis = "Restoration", Black,
ThisItem.diagnosis = "Root Canal", Black,
RGBA(237, 237, 237, 1))

Result:

Hope this sets you on your way. 

[venka91 · Accepted solution]

Thank you. I made a collection at the start of app and loaded all images to media section. But when i go and view my collection, i do not see the images included there. Also in gallery i am not able to see the uploaded image. Where i am making mistake? no idea.

Is that possible can you export the app and give it to me someway, i will go through and see where i am doing mistake and also will help me to learn.

[venka91]

Sorry, this worked perfectly as i need to close and open the app to get the collection refreshed.

You are my Life savior...  Millions of thanks to you. I am sure want to donate you something if you have Paypal account. Thanks a lot.

[venka91]

Last but not least, now i would like to store the result to share point list. I have not done with the gallery items as they are dynamic.

Example i have 3 columns in share point as "Extraction", "Root Canal" and " Restoration".

Whatever comes with the teeth label results comes in as per the above selection needs to be stored in Sharepoint list. Please help.