In a mucow file, how to make condition HTML insertion in a pageItemHTML?

Question

In a mucow file, how to make condition HTML insertion in a pageItemHTML?

149 Views Asked by J.BizMai At 19 October 2017 at 15:13

I'm making a widget for Adobe Muse CC. I would like to hide/show a title and a logo inside a section html tag.

Initialize the component as a section tag with logo and title

Then, the user can :

Hide or Show the logo
Hide or Show the title

my-widget.mucow

<?xml version="1.0" encoding="UTF-8" ?>
<HTMLWidget name="toolbar" formatNumber="6" localization="none"  creator="CreatorName" supportedSizePolicies="fixed,browserWidth" outputAsFixedHeight="true" defaultWidth="900" defaultHeight="32" isResizable="true">
    <parameters>
        <!-- Widget options -->
        <builtIn name="width" value="900"/>
        <number name="paddingToolbarLeft" min="0" max="50" step="5" defaultValue="10" label="Padding Left : "/>
        <number name="paddingToolbarRight" min="0" max="50" step="5" defaultValue="10" label="Padding Right : "/>
        <separator/>
        <bool name="toggleLogo" label="Use Logo" defaultValue="noLogo">
            <trueVal value="yesLogo">
            // Show logo
            </trueVal>
            <falseVal value="noLogo" disableOptions="logoToolbar">
            // Hide logo
            </falseVal>
        </bool>
        <section label="Logo" expanded="true" name="logoToolbar" >
            <file fileTypes="*.png;*.jpg;*.jpeg;*.gif" filterLabel="Image Files" label="Image" name="logoToolbar" fileRequiedForOutput="true" tooltip="Image"/>
        </section>
        <separator/>
        <bool name="toggleTitle" label="Use Title" defaultValue="yesTitle">
            <trueVal value="yesTitle">
            // Show title
            </trueVal>
            <falseVal value="noTitle" disableOptions="titleToolbar">
            // Hide title
            </falseVal>
        </bool>
        <section label="Title" expanded="true" name="titleToolbar" >
            <text name="titleLabel" defaultValue="Toolbar" label="Title" />
            <number name="levelHeader" min="1" max="6" step="1" defaultValue="1" label="Level title : "/>
        </section>
        <separator/>
    </parameters>
    <headHTML>
     //css
    </headHTML>
    <pageItemHTML>
        <!-- insert the Widget <body> HTML here -->
        <![CDATA[
        <section class="toolbar">
            <img class="logo" src="{param_logoToolbar}"/> <-- hide or show
            <h{param_levelHeader} class="title">{param_titleLabel}</h{param_levelHeader}> <-- hide or show
       </section>
       ]]>
       </pageItemHTML>
  </HTMLWidget>

Is there a way to add these two toggle options ?

Original Q&A

There are 1 best solutions below

**Iamnino** · Answer 1 · 2017-11-27T22:40:55.760000

Yes you can.

As explained in the documentation (http://adobe-muse.github.io/MuCowDocs/#h-bool-) you can just use a trueval-tag and a falseval-tag to do what you want. Note, that between those tags you can add any of the Muse-HTML-components, not only the <pageItemHTML>.

For example

<parameters>
  <bool name="toggleIcon" label="Use Icon" defaultValue="noIcon">
        <trueVal value="yesIcon">
            <pageItemHTML>
                <![CDATA[ 
                    <!-- this is my TRUE-HTML content --> 
                ]]>
            </pageItemHTML>
        </trueVal>
        <falseVal>
            <pageItemHTML>
                <![CDATA[ 
                    <!-- this is my FALSE-HTML content --> 
                ]]>
            </pageItemHTML>
        </falseVal>
  </bool>
</parameters>

Edit

I think this documentation is better: https://github.com/Adobe-Muse/MuCowDocs

Edit2 Tested and working Code:

<?xml version="1.0" encoding="UTF-8" ?>
<HTMLWidget name="stackoverflowtest" formatNumber="6"
            localization="none" creator="Antonio"
            defaultWidth="300" defaultHeight="300"
            isResizable="true" isResponsive="true">
    <parameters>
        <info label="This is a test..." />
        <separator />
        <bool name="toggleIcon" label="Use Icon" defaultValue="noIcon">
            <trueVal value="yesIcon">
                <pageItemHTML>
                    <![CDATA[ 
                        <section class="my-widget">
                            <h1 class="title">Titre</h1>
                            <p>Here is my logo...</p>
                        </section>
                    ]]>
                </pageItemHTML>
            </trueVal>
            <falseVal value="noIcon">
                <pageItemHTML>
                    <![CDATA[ 
                        <section class="my-widget">
                            <h1 class="title">Nothing to show</h1>
                        </section>
                    ]]>
                </pageItemHTML>
            </falseVal>
        </bool>
    </parameters>
<pageItemPosterHTML>
<![CDATA[ ]]>
</pageItemPosterHTML>
</HTMLWidget>

EDIT3

After the third attempt I got what you want :D Just use Javascript to do that. You define as many checkboxes as needed and check their value with JS and do the rest... here a simple example:

<?xml version="1.0" encoding="UTF-8" ?>
<HTMLWidget name="stackoverflowtest" formatNumber="6"
                  localization="none" creator="Antonio"
                  defaultWidth="300" defaultHeight="300"
                  isResizable="true" isResponsive="true">
    <parameters>
        <info label="This is a test..." />
        <separator />
        <bool name="toggleIcon" label="Use Icon" defaultValue="noIcon">
            <trueVal value="true" />
            <falseVal value="false" />
        </bool>
    </parameters>
    <pageItemHTML>
        <![CDATA[
            <script>
            if ({param_toggleIcon}) {
                // create your element
                // and append it to the right position
            }
            </script>
        ]]>
    </pageItemHTML>
</HTMLWidget>

In a mucow file, how to make condition HTML insertion in a pageItemHTML?

There are 1 best solutions below

Related Questions in XML

Related Questions in WIDGET

Related Questions in MUSE

Trending Questions

Popular # Hahtags

Popular Questions