New component: Shepherd.js - ProductTour about primefaces-extensions

[rider87]

Yes, that is exactly what is requested for this new component.
Would be very great to have this component and get the information from the database.

[jepsar]

Why should this be a component? Can't this be done with vanilla JavaScript?

[melloware]

Any database interaction should happen in your backing beans and the Product tour should be not be aware of it like all other JSF components. This component just feels more flexible as raw JS code.

[rider87]

There is no interaction with the database, I need only the possibility to get the information from the database and not only "static" in the JSF page.
I have in mind a "model", like you know from p:menu....
So all information are coming from the database, so it´s completelly dynamic.
Maybe also a <p:repeat> would fit in this case.

In the backend you will define a Entity, like:
ProductTour

• ID
• Name

ProductTourPanel

• ID
• String headline;
• String contentHtml;
• String jsfId
• String width;
• String height;
• int ordering;
• ProduktTour_FK

Especially the "jsfId" is necessary. This is the ID, for which you have the "ProductTourPanel".

My scenario would be:

• User will generate a "ProductTour".
• A ProductTour can have 1....n ProductTourPanel
• The user will create ProductTourPanel... The content can be HTML, which will be stored than in "String contentHtml".... User can add text and also pictures (base64...)
• "ordering" is the sorting...

with <p:repeat> you will have something like this:

<p:repeat value="#{myBean.list}" var="productTourObject">
	<pe:tourPanel forJsfId="#{productTourObject.jsfId}" height="#{productTourObject.height}" width="#{productTourObject.width}"/>

			<f:facet name="header">
        			<h:outputText value="#{productTourObject.headline}" />
    		</f:facet>

			<h:outputText value="#{productTourObject.contentHtml}" />

			<f:facet name="footer">
        			<h:outputText value="bla bla bla" />
    		</f:facet>

	</pe:tourPanel>

</p:repeat>

[tandraschko]

don't get me wrong but you are longtime user and people really often invest time in the forum with you. Maybe a good point to give something back and create the compnent by yourself and provide it here opensource?

[testing138]

agreed. if I would have the knowledge to create a component, I would do it. But I have no knowledge to do this.

[tandraschko]

thats a non-arg ;) We all started without knowledge. There enough sample components available here to dig in step by step

[commander-hp]

Oh yes! This component is awesome. Please integrate this in Primefaces.

[rider87]

Agreed, whould be very great to have this component

[melloware]

One thing that concerns me it seems there is no active development and last commit was almost 2 years ago.

[rider87]

Yes, maybe it make sense to include another JS library.

Trip.js is not the only JS library, please see here e.g.:
https://ourcodeworld.com/articles/read/328/top-10-best-tour-website-guide-javascript-and-jquery-plugins

Great, as I can see, also other people would like to have this component.

[jepsar]

See also https://discord.com/channels/787967399105134612/787967662293909524/799653854697357352

[Rapster]

A user mentionned https://shepherdjs.dev/ that I really like

[jarciano]

I also agree, the experience of using the application is much more professional.

[rider87]

what do you mean exactly? which application?

[jarciano]

what do you mean exactly? which application?

Create a manual for the use of the new functions of the application, as this will prevent numerous user tickets on how to do so.
In addition to speeding up feedback from users about features.

[jarciano]

Why should this be a component? Can't this be done with vanilla JavaScript?

JavaScript?
Component is good because everything is interconnected with Primefaces, visuals and properties to save in the bank.

[jepsar]

@rider87 @jarciano Can you give a good example of how xhtml would look with a product tour included? And yes, I've seen the list of cars example above, which does not make sense to me.

[jarciano]

@jepsar Best example to show what would be perfect to have see on this site:

https://www.trychameleon.com/tours

[jepsar]

I was not talking about the result, but how to get there. How would your xhtml look? I guess you have an idea about that, as vanilla JavaScript won't work for you.

[jarciano]

I didn't actually get an analysis on Vanilla, do you have any examples with her in practice? Because if it looks cool like the examples presented it will already be a solution.

[rider87]

Here just an example:

<pe:tourGuide model="modelFromDatabase" var="myVar">
		<pe:tourGuidePanel id="myId" for="myJsfId" closable="true|false" position="left| right| top| bottom" modal="true|false" >   
	
			<f:facet name="header">
        			My Header
    		</f:facet>

     		<h:outputText value="Text Text" />
     		// Here different content can be visible, also like video, text

    	<f:facet name="footer">
        		<p:commandButton value="Previous"  />
       			<p:commandButton value="Next"  />
       			<p:commandButton value="Skip"  />
				<p:commandButton value="Close"  />
   		 </f:facet>
    </pe:tourGuidePanel>
</pe:tourGuide>

The main point would be the for (the Id for which it should be)

[jepsar]

I don't like pe:tourGuidePanel for="..." as the components in the tour might be all over the place (different includes or tags). I think I would prefer:

<p:commandButton value="New action">
  <pe:tourPanel ...>
    ...
  </pe:tourPanel>
</p:commandButton>

...

<pe:tour .../>

What do you have in mind for modelFromDatabase? I think I would prefer attributes for common settings and maybe an extender for the more uncommon stuff (whatever that may be).

[github-actions]

This issue is marked as stale because there was no activity on it for the last 2 years. Remove stale label or comment or this will be closed in 30 days