SuperFlexi conditional display

Post here if you have questions about creating SuperFlexi Solutions.

The SuperFlexi documentation is very thorough, so you might want to start there.

This thread is closed to new posts. You must sign in to post in the forums.
5/6/2019 1:34:42 PM
Gravatar
Total Posts 5

SuperFlexi conditional display

Hello! SuperFlexi is a great addition to MojoPortal. I'd like to build in some conditional logic in the display area <ItemMarkup> - but I don't know if this is possible.

Basically, I'd like to have some of the content markup in the SuperFlexi solution display only if the non-required field is used. Is there a way to surround HTML inside the ItemMarkup with a tag that says if the field is used, then display the markup ,otherwise don't show it. An example would be a link: <a href="$link$"> Currently, if $link$ is empty, then the display would be <a href=""> which still creates an anchor tag. This is only an example, there are many cases where adding conditional logic would be helpful.

Thanks, Doug

 

 

5/6/2019 4:01:25 PM
Gravatar
Total Posts 211
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: SuperFlexi conditional display

Hi Doug,

There are a few ways to go about this. Probably the easiest way is to use the <PreTokenString> and <PostTokenString> attributes on your field. So for the $link$ field in your field definition file, add something like the following:

<PreTokenString><![CDATA[
            <a href="
        ]]></PreTokenString>
        <PostTokenString><![CDATA[
            "> My Link Text</a>
        ]]></PostTokenString>

In the case that you want your link text to be determined by another field, you can use the token of that field in place of "My Link Text", but only if the fields are in the correct order. The field determining the text must be above the field using the token.

If you have a more complex interaction that you need there are other options which I can explain, just let me know.

Hope this helps!

5/6/2019 4:15:27 PM
Gravatar
Total Posts 5

Re: SuperFlexi conditional display

Thanks Isaac! That's what I was looking for. I found 'PreTokenString' in the SuperFlexi docs, so I think I'm good to go. smiley

5/8/2019 12:11:04 PM
Gravatar
Total Posts 5

Re: SuperFlexi conditional display

Hi Issac,

I'm trying to nest elements in the PostTokenString

        <PostTokenString>

            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>

        </PostTokenString>

I have the 'make it a link' swap working, but I want the link to wrap an image. Is this sort of thing possible with the PrePost string feature?

Thanks, Doug

5/9/2019 5:25:12 PM
Gravatar
Total Posts 211
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: SuperFlexi conditional display

Hi Doug,

In order to properly understand what's going on I kind of need to see more of the field definition file. For instance, I need to know where $image$ and $title$ are being defined. Can you post the fields with the tokens $image$, $title$, and the one which the PostTokenString you showed below is being defined, and keep them in the same order which they appear in the field definition file?

Thanks

5/9/2019 5:37:37 PM
Gravatar
Total Posts 5

Re: SuperFlexi conditional display

Thanks Issac - here is the code (I wanted to wrap the $image$ with image tag code, but for now I just want it to output the image path - which it does not. The make it a link swap works though, it just outputs $image$ instead of the path.)   

 <Field

        name="title"

        label="Title"

        controlType="TextBox"

        required="false"

        requiredMessageFormat="Title is required."

        token="$title$"

        isSearchable="true"

 

        editPageControlWrapperCssClass="settingrow"

        editPageLabelCssClass="settinglabel"

        editPageControlCssClass="forminput"

        sortOrder="100"

    />

 

    <Field

        name="target"

        label="Target Attribute Code (_blank)"

        controlType="TextBox"

        required="false"

        requiredMessageFormat="Title is required."

        token="$target$"

        isSearchable="true"

 

        editPageControlWrapperCssClass="settingrow"

        editPageLabelCssClass="settinglabel"

        editPageControlCssClass="forminput"

        sortOrder="102"

    />

    <Field

        name="makeitalink"

        label="Make My Textbox A Link?"

        controlType="CheckBox"

        token="$makeitalink$"

        sortOrder="112"

 

        checkBoxReturnBool="false"

        checkBoxReturnValueWhenTrue="$url-token$"

        checkBoxReturnValueWhenFalse="$image$"

    />

    <Field

        name="mylinkbox"

        label="My URL"

        controlType="LinkPicker"

        token="$url-token$"

        sortOrder="120"

    >

        <PreTokenString>

            <![CDATA[<a href="]]>

        </PreTokenString>

        <PostTokenString>

            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>

        </PostTokenString>

    </Field>

    <Field

        name="image"

        label="Slide Image"

        controlType="ImagePicker"

        required="false"

        requiredMessageFormat="Slide Image is required for each box."

        token="$image$"

 

        editPageControlWrapperCssClass="settingrow"

        editPageLabelCssClass="settinglabel"

        editPageControlCssClass="form-control"

        sortOrder="110"

    />

5/9/2019 6:57:06 PM
Gravatar
Total Posts 211
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: SuperFlexi conditional display

Hi Doug,

The problem you're having is caused by sort orders.  I believe earlier when I explained how the ordering needed to work I said it backwards to what I meant, sorry about any confusion! Here is an accurate description: When you have a field which uses another field's token in it's value (return bool or pre/post token strings included), the field which uses the token in it's value must have a lower sortOrder than the field which is identified with the token.

In the code below, I have fixed the sort orders and also wrapped your $image$ with an img tag via pre/post, and as a bonus I included some CSS to make the visual order in which your inputs appear the same as what you had originally even though they're rendered in a different order for SuperFlexi's sake. You can put your sortOrder values to whatever they need to be in order to be processed correctly, but still control the order that the inputs display in by changing the "order-#" class in the editPageControlWrapperCssClass value.

    <Field
        name="title"
        label="Title"
        controlType="TextBox"
        required="false"
        requiredMessageFormat="Title is required."
        token="$title$"
        isSearchable="true"

        editPageControlWrapperCssClass="settingrow order-1"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="forminput"
        sortOrder="120"
    />

    <Field
        name="target"
        label="Target Attribute Code (_blank)"
        controlType="TextBox"
        required="false"
        requiredMessageFormat="Title is required."
        token="$target$"
        isSearchable="true"

        editPageControlWrapperCssClass="settingrow order-2"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="forminput"
        sortOrder="130"
    />

    <Field
        name="makeitalink"
        label="Make My Textbox A Link?"
        controlType="CheckBox"
        token="$makeitalink$"
        sortOrder="100" 

        checkBoxReturnBool="false"
        checkBoxReturnValueWhenTrue="$url-token$"
        checkBoxReturnValueWhenFalse="$image$"

        editPageControlWrapperCssClass="settingrow order-3"
    />

    <Field
        name="image"
        label="Slide Image"
        controlType="ImagePicker"
        required="false"
        requiredMessageFormat="Slide Image is required for each box."
        token="$image$"

        editPageControlWrapperCssClass="settingrow order-4"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="form-control"
        sortOrder="140"
    >
        <PreTokenString>
            <![CDATA[<img src="]]>
        </PreTokenString>
        <PostTokenString>
            <![CDATA[" />]]>
        </PostTokenString>
    </Field>

    <Field
        name="mylinkbox"
        label="My URL"
        controlType="LinkPicker"
        token="$url-token$"
        sortOrder="110"

        editPageControlWrapperCssClass="settingrow order-5"
    >
        <PreTokenString>
            <![CDATA[<a href="]]>
        </PreTokenString>
        <PostTokenString>
            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>
        </PostTokenString>
    </Field>

    <Styles>
        <Style>
            <![CDATA[
                div[id$="_customControls"] {
                    display: flex;
                    flex-flow: row wrap;
                }

                .settingrow {
                    flex: 0 1 100%;
                }

                .order-1 {
                    order: 1
                }
                .order-2 {
                    order: 2
                }
                .order-3 {
                    order: 3
                }
                .order-4 {
                    order: 4
                }
                .order-5 {
                    order: 5
                }
            ]]>
        </Style>
    </Styles>

Hope this helps!

5/10/2019 1:23:27 PM
Gravatar
Total Posts 5

Re: SuperFlexi conditional display

Hi Issac,

That worked great, thanks!

Note: I tried to add title="$title$" to the image tag and that did not work. Since title comes before image, I thought that would work.

Also, the '_customControls' flex addition did not work. I changed the ID to 'ctl00_mainContent_customControls' but that did not help.

Thanks, Doug

 

 

5/13/2019 3:03:55 PM
Gravatar
Total Posts 211
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: SuperFlexi conditional display

Doug,

To make the title work on the image tag, the image field's sortOrder needs to be lower than the title field's sortOrder. So for instance, changing the sortOrder of image to 115 works, because that is lower than the order of title but still higher than the order of mylinkbox

As for the CSS, there must be something in your skin that's changing the element which wraps all of the settingrows in your solution. If you can open your field page (sign in and click the edit link on an item in the solution), and user the browsers tools (f12) to inspect the page, you can look and see what element is wrapping all of the settingrows and change the div[id$="_customControls"] selector to match it, then everything should work. I should also mention that the CSS I provided only works in modern browsers, IE10 and below do not support flex box.

Hope this helps!

You must sign in to post in the forums. This thread is closed to new posts.