Is it possible to customize the output of the FAQ with Accordion template?

Comments

17 comments

  • Official comment
    Avatar
    Thomas Morin

    Hello Jake Leeman,

    If you want to change the link that redirects users, you need to change the link contains in this column:

    Because, as you can see in your template sheet, this link is called in your a href attribute:

    You can also change the text that displays the link in your template sheet:

    I suggest you consult this tutorial to understand the use of a template when you use Awesome Table. It should be useful.

    Kind regards.

    Thomas

  • Avatar
    Jacopo Spinelli

    Hello, 

    I ask my questions here as the topic is the same. I'm configuring the FAQ template and I would like to implement the following solution:

    1. how can I remove the "more info about it" in case of there is no link dedicated? In principle I would like to have the hyperlink only if there is something to show otherwise I would like to have nothing.
    2. Is there any possibility by clicking on the link to show on the same page a PDF which is now normally opening clicking on it?
    3. Furthermore, it appears also the on the bottom right the below link, how could I remove it?
    4. In the Google spreadsheet the body of the FAQ is below the column answer, could be possibile to split it in 2 sections? I mean, clicking on the item it will drill down text, I would like to show it divided in 2 parts, the cause of the problem and the solution of the problem itself.

    Thanks a lot for your support!

     

  • Avatar
    Thomas Morin

    Hello Jacopo,

    Here are my answers.

    1. It is possible to remove the data you want directly from the Google Spreadsheet data source. In your case, I suggest you consult this article if you want to use conditions with your CSS code.

    2. I'm not sure to understand what you want to achieve. If you want to open your PDF document inside your Awesome Table view, it is not possible to achieve that.

    3. In this example, you just need to remove the image from your FAQ column in your template sheet. In your case, the images is displayed with this line of code:

    <img src="https://sites.google.com/a/revevol.eu/images-base/faq-open-new-window.png"/>

    4. If you want to change your data, you need to change the place of your markers. In your example, you need to put your markers in this div:

    <div data-toggle-visibility="controller" class="question">

    For example, if you want to add your data from your theme column in your data sheet, you should have this code in your FAQ column in your template sheet:

    <div data-toggle-visibility="controller" class="question">
         <img src="https://sites.google.com/a/revevol.eu/images-base/arrow-faq.png" class="image">
         {{Question}} - {{Theme}}
    </div>

    You just need to know that if you want to change your data, you are able to change the data contained in your Google Spreadsheet data source.

    Kind regards.

    Thomas

  • Avatar
    Jacopo Spinelli

    Hello Thomas,

    thanks a lot for your answer. Unfortunaly I'm really a beginner therefore I have to ask you additional questions and more details.

    1. How can I setup the CSS code directly in the datasheet in order to do not show any link in case of no link is present in the column "More information"?
    2. You got the point, no problem, I will managed differently
    3. I tried to follow your indications, removing that piece of code unfortunately did not changed the bottom part of the FAQ body, I still see the link
    4. thanks for the hint, I will try to do it little by little

    Have a nice day!

    Thanks.

  • Avatar
    Randolph Abelardo

    Hi @Jacopo. 

    My name is Randy, a deputized Awesome Table support, and I'll be helping you with this case.

    Please share your:

    AwesomeTable link
    Share with us your AwesomeTable & Google Sheets datasource so we can pinpoint where the problem is and provide the right solution at the soonest possible time. Detailed instructions here.

    Google Sheets datasource
    It's best to set the sharing settings to Anyone with the link. Click here to learn more.

    * You can opt to anonymize your content by using dummy data (fake, but realistic) if your Sheets contains confidential info.


    - Randy

  • Avatar
    Jacopo Spinelli

    Hello Randy,

    unfortunately I can't share the Google Spreadsheet as it's not allowed within my organization to share a link to anyone. Do you have any alternative suggestion?

    Thanks.

  • Avatar
    Randolph Abelardo

    Hi Jacopo.

    * You can opt to anonymize your content by using dummy data (fake, but realistic) if your Sheets contains confidential info.

    Just create a replica, of your GSheets datasource and enter 5 rows of fake data.

    - Randy

  • Avatar
    Jacopo Spinelli

    Hello Randy,

    when I say it it's not because of the content but because Google's sharing rules, my company is not allowing by default settings to share links to someone outside the company (I can't even select the "share with anyone" option).

    Thanks.

  • Avatar
    Randolph Abelardo

    Thanks for the clarification, Jacopo.

    Unfortunately, for us to tweak the settings you specified, we need to have access to the datasource (datasheet + template) and work on it directly (to resolve the issue at the soonest possible time). A plausible workaround is to export the GSheets datasource to a MS Excel format (File > Download as) and share it here or email it to me.

    Please understand that it will be very challenging to explain what needs to be done without referencing the actual datasource (since the issue revolves around customization of the HTML & CSS templates).


    - Randy

  • Avatar
    Jacopo Spinelli

    Hello Randy,

    I shared on your email the required links. Let me know is something is not working.

    Thanks a lot.

  • Avatar
    Randolph Abelardo

    Hi Jacopo.

    I emailed you the modified view following your specifications (screenshot below). 

    Below are the status and clarifications:

    1) ...remove the "more info about it" in case of there is no link dedicated? In principle I would like to have the hyperlink only if there is something to show otherwise I would like to have nothing.

    - DONE
    -------------------------------------------

    2) Is there any possibility by clicking on the link to show on the same page a PDF which is now normally opening clicking on it?

    > To clarify, you want a PDF to load on the same window (tab) when you click a link? If yes, just replace the sample links in your datasheet with those of the PDF files (needs to be online).

    Note: This will not work with the New Google Sites. more about this here.

    - DONE
    -------------------------------------------

    3) ...on the bottom right the below link, how could I remove it?

    - DONE
    -------------------------------------------

    4) In the Google spreadsheet the body of the FAQ is below the column answer, could be possibile to split it in 2 sections? I mean, clicking on the item it will drill down text, I would like to show it divided in 2 parts, the cause of the problem and the solution of the problem itself.

    > Please provide a simple picture or diagram explaining this.

    -------------------------------------------

     

    - Randy

     

  • Avatar
    Jacopo Spinelli

    Hello Randy, 

    thanks a lot for your support.

    Regarding the need of more claririfcation on item 4, I would like to split the boby of the FAQ into 2 part marking in bold the question and the answer (see screenshot), how could I do it in AwesomeTable?

    Regarding the other solutions provided, thanks a lot, really. I have one question about item 1, where can I find the code you used? I'm asking because if I want to add more lines with the same feature I know what to do.

    Thanks

  • Avatar
    Randolph Abelardo

    Hi @Jacopo.

    The splitting of the Q&A section is now reflected on the updated view (from the email I sent earlier).
    As for the code, just open the GSheets datasource and click the Template tab (screenshot below).
    You'll be able to further customize it as needed.

    Hoping that we were able to resolve all of your issues accordingly.
     

    - Randy

     

     

  • Avatar
    Jacopo Spinelli

    Very last question after your valuable support in fixing the modification I needed, which piece of code should I modify in order to customize the upper banner (as per screenshot attached) with a logo or custom colorous?

    Thanks again for your efforts!

  • Avatar
    Randolph Abelardo

    Glad to be of service, @Jacopo :)

    That screenshot-section you shared is part of the Awesome Table web app and it cannot be changed. But please know that when you embed your view on any website builders or CMS, that section won't be displayed. You can learn more about it here.

    But if you want to add some logo of your own, our Tips & Tricks post on this topic might be of help to you.

    Don't hesitate to reach out to us if you need help on these additional topics.
    Just  create a separate post and we'll answer you as best we can. 

    I also invite you to read our useful Getting Started tutorial to jumpstart your Awesome Table journey.


    - Randy

     

  • Avatar
    Jacopo Spinelli

    Hello Randy, just to thank you for the support in order to achieve what I needed to setup the AwesomeTable.

    Thanks!

  • Avatar
    Randolph Abelardo

    The pleasure's all mine, Jacopo :) 
    Have a great day !

Please sign in to leave a comment.