norvutec/userguide

Tool for creating userguides for your application inside of the page.

1.0.1 2025-01-06 07:49 UTC

Requires

• php: >=8.2
• symfony/console: 7.*
• symfony/flex: ^2
• symfony/form: 7.*
• symfony/framework-bundle: 7.*
• symfony/runtime: 7.*
• symfony/serializer: 7.*
• symfony/translation: 7.*
• symfony/twig-bundle: 7.*
• symfony/yaml: 7.*
• twig/extra-bundle: ^2.12|^3.0
• twig/twig: ^2.12|^3.0

Conflicts

• symfony/symfony: *

proprietary

• NorvuTec UG (haftungsbeschränkt)

README

Bundle for Symfony for creating user guides inside your application.
The user guides are displayed inside the application inside the template.

Requirements

The bundle requires assets to be installed in the public directory.

Installation

1. Install the bundle using composer

composer require norvutec/userguide

1. Add the bundle to the kernel (if not using symfony/flex)

// config/bundles.php
return [
    // ...
    Norvutec\UserguideBundle\NorvutecUserguideBundle::class => ['all' => true],
];

1. Add the styles and scripts to your template

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/norvutecuserguide/css/userguide.css') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ userGuideJavascript() }}
{% endblock %}

1. Add user guide classes to your application

class InvoiceFormUserGuide extends UserGuide {

    public function name(): string
    {
        return "invoiceform";
    }

    public function configure(UserGuideBuilder $builder): void {
        $builder
            ->route("app_accounting_invoice_new") # Main Route for the guide
            ->alternateRoute("app_accounting_invoice_edit") # Alternate Route for the guide
            ->add("[id$=form_invoiceNo]", "Insert Number of invoice here") # Add a step to the guide
            ->add("[id$=form_customer]", "Select customer here"); # Add a step to the guide
    }
}

The add(Selector, Content, Options)-Method have to be called in the correct order for the guide. The Selector is a javascript selector to select the element in the DOM. You can use all available syntaxes for querySelector. The guide will use the first element found for the steps link.

1. Include start button inside of your template (optional) (TODO)

{{ userGuideButton() }}

Configuration / Overrides

Path Security

The user guide bundle contains a path for listing all available user guides. This path is not secured by default.
All routes are starting with /userguide/ and are named with userguide_.

Templates

javascript_loader.html.twig Holds the Script-Tag for the userguide.js and the auto-continue of the userguide. (Loaded by userGuideJavascript())
tooltip.html.twig Is the displayed tooltip of the userguide

Styles

All styles are located in the css/userguide.css file. Just override the styles in your own css file.
Alternatively you can override the template and include your own styles.

TODO INFOS FÜR MICH

endswith: [id$=foo] startswith[id^=foo]

override tooltip.html.twig