Spotlight

Spotlight highlights a certain component on page.

Documentation
Panel is highlighted on validation error.
New User
<script type="text/javascript">
//<![CDATA[
    function handleForm(xhr,status,args) {
if(args.validationFailed)
    PF('spot').show();
else
    PF('spot').hide();
    }
//]]>
		</script>


Panel is highlighted on validation error.

<h:form>  
    <p:growl id="growl" />

    <p:panel id="pnl" header="New User" style="margin-top:10px">
        <p:messages id="messages" />
        <h:panelGrid columns="3" id="grid" cellpadding="5">
            <p:outputLabel for="username" value="Username" />
            <p:inputText id="username" value="#{spotlightView.username}" required="true">
                <f:validateLength minimum="2" />
            </p:inputText>
            <p:message for="username" />

            <p:outputLabel for="email" value="Surname:" />
            <p:inputText id="email" value="#{spotlightView.email}" required="true"/>
            <p:message for="email" />
        </h:panelGrid>

        <p:commandButton value="Save" icon="pi pi-check" action="#{spotlightView.save}" update="growl grid" oncomplete="handleForm(xhr, status, args)"/>
    </p:panel>

    <p:spotlight target="pnl" widgetVar="spot"/>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.