Replace multiple instances of text with different values?

[JasonWS]

Is it possible to replace all occurrences of a string within a larger string with different values? I'm trying to replace all of the hex color values in a string that forms an SVG file's code with colors selected via drop downs. I am forming a gallery of color dropdown dynamically based on how many hex values exist in the selected SVG code. Let's say a certain animated SVG code contains 15 hex values (#FFFFFF). I want to be able to override each of the 15 via a set of 15 dropdowns in a gallery. I want to do this without hard-coding 15 nested Substitute() functions, since the number of colors in a selected SVG may differ from one to the next.

Here is my code for an image showing an SVG with four colors. I'd like to avoid the nested Substitutes. The SVG code is provided by the Gallery1.Selected.'SVG Code', which is a SharePoint list with the SVG code contained in a "multiple lines of text" column. colColorOverride is dynamically created based on the number of hex color values in the SVG.

"data:image/svg+xml;utf8, " & EncodeUrl(
    Substitute(
        Substitute(
            Substitute(
                Substitute(
                    Gallery1.Selected.'SVG Code',
                    "ffffff",
                    LookUp(
                        colColorOverride,
                        Value = "color04",
                        Hex
                    ),
                    4
                ),
                "ffffff",
                LookUp(
                    colColorOverride,
                    Value = "color03",
                    Hex
                ),
                3
            ),
            "ffffff",
            LookUp(
                colColorOverride,
                Value = "color02",
                Hex
            ),
            2
        ),
        "ffffff",
        LookUp(
            colColorOverride,
            Value = "color01",
            Hex
        ),
        1
    )
)

[v-jefferni]

Hi @JasonWS ,

Loops aren't supported in PowerApps. For this circumstance, you need to use Power Automate flow to achieve your need.

First, you need to add a Number column to the collection as the index when the collection being created.

Second, pass the selected Code and collection to flow using a variable with JSON function:

Set(colJSON, JSON(colColorOverride, JSONFormat.IgnoreBinaryData));
Set(varNewCode, "data:image/svg+xml;utf8, " & EncodeUrl(Flow.Run(Gallery1.Selected.'SVG Code', colJSON).NewCode)

In the flow, create a string variable, parse the JSON string and loop it to modify, return the result NewCode to your App, save it in another variable varNewCode eventually.

Best regards,

[realwillwright]

Hi @JasonWS 

Could you have a separate collection which stores the the colour values as a table as below

Colour 1	#45a78c
Colour 2	#111223

Then reference those colours in the SVG in the code below, except the lookup will be different for each colour you want

LookUp(colColours, ColourId = "Colour 1").Colour

Then in the gallery you could use that collection as the data source and update the colour when a new option is chosen.
-------------------------------------------------------------------

If my reply helped you, please give a 👍
If it solved your issue, please give a 👍 & accept it as the Solution to help other community members find it.

[JasonWS]

I already am collecting all of the custom colors into a collection, which is patched with updates whenever one of the dropdowns is changed. I don't think referencing the collection directly in the SVG would quite work. This would need to be hardcoded in the svg code somehow.

@v-jefferni , although it's a little janky, I was able to achieve my desired result by triggering a 25ms timer that loops through all of the results of a MatchAll() function and performs a Replace() function using an incrementing index. I'm doing this once initially, and then every time one of the color dropdowns is changed. In the example of an animated SVG that has fifteen colors in it, the timer runs 16 times every time a color drop down is changed. On the 16th time (or one higher than the number of hex color values the selected SVG contains), the variable that enables the timer is set to false and it resets itself. The all happens in-memory of course, so it's nice and fast.