Activities of "nabass"

Hi, I remove this @page directive from First page and second page ,the main screen like that no data viewed

Hi, this is the illustration of my example first i have this structure

1- this is the html of wizard screen and this is the code of the screen and OnGetAsync() function

2- this is the html of First Page screen and this is the code of first page

3- this is the html of Second Page screen and this is the code of Second page

I want to navigate between first page and second page by press next button and previous button in wizard screen and i using Partial tag to render the page according to current step but it gives me error when i view first step

please advice all i want that i have index screen "wizard" and want to navigate between another existing pages through press next button

• ABP Framework version: v8.2
• UI Type:MVC
• Database System: EF Core (SQL Server)
• Tiered (for MVC) or Auth Server Separated (for Angular): yes/no
• Exception message and full stack trace:
• Steps to reproduce the issue: I have screen called wizard and has two existing pages firstPage and second Page (these pages already working)
• but when i want to view one of them in the wizard screen using

• <partial name="@Model.CurrentStep.ViewPath"
          model="@Model.CurrentStep.Model"
          view-data="@Model.CurrentStep.ViewData" />
  

but it is not working and gives me error  

![image.png](/QA/files/3a1780e102e79ed019979009d519cc25.png)

i know there is AbpViewComponent and i already used it in another thing,
but here i want to use pages already done before to avoide recode again in viewComponent 

forget every thing i want to avoid that behavior :) https://streamable.com/4r550a

hi thanks for replay layout = null; not work my structure is the page in the menu for example (employee) user can go to it and create edit delete...etc my second page is (Hr) within it same page(employee) is partial view so what all i want is just hide (.lpx-sidebar-container, .lpx-toolbar-container) of this partial view i tried to put this in global the sidebar, toolbar of all project disappear if i put the style within (employee) screen so it will render in my partial view correct but if i open it via menu style will make sidebar disapper so i want to hide the sidebar & toolbar for employee page just in partial view for example (nth-child(2))

here is the result of layout:null;

hi i am trying to create partial view screen i almost done but i got some problem if abp framework can solve it by using injection,class inherit or something else i attached video to see behavior i want avoid that sidebar && toolbar are visible for almost 4 || 5 sec then disappear they are disappear till page has rendering i want to make them always display: none i used js code => not work created new methods for checking if screen display or not then do the style => not work so if you can help or abp gives simple solution please share it here is the behavior video https://streamable.com/4r550a

here is my code

@page
@model Horizon.HorizonERP.Web.Pages.WizardSrs.IndexModel
@using Horizon.CoreSetting.Permissions
@using Horizon.HorizonERP.Web.Menus
@using Horizon.MainAccounting.Localization
@using Horizon.MainAccounting.Permissions
@using Horizon.MainAccounting.Web.Menus
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Extensions.Localization
@using System.Net
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@inject IStringLocalizer<MainAccountingResource> L
@inject IAuthorizationService Authorization
@inject IPageLayout PageLayout

@{
    PageLayout.Content.Title = L["Wizard Steps"].Value;
    PageLayout.Content.MenuItemName = HorizonERPMenus.MainWizard;
}

@section styles
{
    <abp-style src="/Pages/WizardSrs/style.css" />
}



 <form method="post" id="wizardForm">
    <abp-container>
        <div class="wizard-header d-flex justify-content-center align-items-center mb-4 flex-wrap" id="wizardHeader"></div>

        <abp-card>
            <div class="wizard-content" id="wizardContent">
                <abp-card-body id="cardBody" class="wizard_body"></abp-card-body>
            </div>
        </abp-card>

        <div class="d-flex justify-content-between mt-1">
            <div class="wizard-navigation">
                <button class="btn btn-secondary" id="prev-btn" type="button" disabled>Previous</button>
                <button class="btn btn-primary" id="next-btn" type="button">Next</button>
            </div>
        </div>
    </abp-container>
</form> 

 <script>
    document.addEventListener("DOMContentLoaded", function () {
        let currentStepIndex = 0;
        let wizardSteps = [];

        // Fetch steps from the server
        async function getWizardSteps() {
            try {
                const response = await fetch("/api/CoreSetting/Wizard/getsteps");
                if (!response.ok) throw new Error(`Failed to fetch steps: ${response.statusText}`);

                const data = await response.json();
                if (!Array.isArray(data)) throw new Error("Invalid steps format.");

                wizardSteps = data;
                renderWizardSteps();
                loadWizardContent();
            } catch (error) {
                console.error("Error fetching wizard steps:", error);
            }
        }

        function renderWizardSteps() {
            const wizardHeader = document.getElementById("wizardHeader");
            wizardHeader.innerHTML = "";

            wizardSteps.forEach((step, index) => {
                const stepElement = document.createElement("div");
                stepElement.classList.add("wizard-step");
                if (index === currentStepIndex) stepElement.classList.add("active");

                stepElement.innerHTML = `
                    &lt;div class=&quot;circle&quot;&gt;${step.stepsSort}&lt;/div&gt;
                    &lt;a href=&quot;${step.url || &quot;#&quot;}&quot; class=&quot;label&quot;&gt;${step.program}&lt;/a&gt;
                    ${index &lt; wizardSteps.length - 1 ? &#39;&lt;div class=&quot;wizard-line&quot;&gt;&lt;/div&gt;' : ""}
                `;

                wizardHeader.appendChild(stepElement);

                const linkElement = stepElement.querySelector("a");
                if (linkElement) {
                    linkElement.classList.remove("lpx-sidebar-container", "lpx-toolbar-container");
                }
            });

            updateButtonStates();
        }

        function updateButtonStates() {
            document.getElementById("prev-btn").disabled = currentStepIndex === 0;
            document.getElementById("next-btn").disabled = currentStepIndex === wizardSteps.length - 1;
        }

        function loadWizardContent() {
            const currentStep = wizardSteps[currentStepIndex];
            const wizardContent = document.getElementById("wizardContent");

            wizardContent.innerHTML = `
                &lt;iframe src=&quot;${currentStep.url || &quot;#&quot;}&quot; style=&quot;width: 100%; height: 500px; border: none;&quot;&gt;&lt;/iframe&gt;
            `;

            const iframe = wizardContent.querySelector("iframe");

            // Apply styles immediately while the iframe is loading
            iframe.onload = () => applyStylesToIframe(iframe);

            iframe.addEventListener("loadstart", () => {
                try {
                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                    injectStyles(iframeDoc); // Apply styles as soon as possible
                } catch (error) {
                    console.error("Could not inject styles immediately:", error);
                }
            });
        }

        function applyStylesToIframe(iframe) {
            try {
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                injectStyles(iframeDoc); // Apply styles when iframe is fully loaded
            } catch (error) {
                console.error("Could not apply styles to iframe:", error);
            }
        }

        function injectStyles(iframeDoc) {
            // Add the styles dynamically
            const style = iframeDoc.createElement("style");
            style.textContent = `
                .lpx-sidebar-container,
                .lpx-toolbar-container
                 {
                    display: none !important;
                }
 {
                    display: none !important;
                }
            `;
            iframeDoc.head.appendChild(style);
        }

        // Button Click Handlers
        document.getElementById("prev-btn").addEventListener("click", () => {
            if (currentStepIndex > 0) {
                currentStepIndex--;
                renderWizardSteps();
                loadWizardContent();
            }
        });

        document.getElementById("next-btn").addEventListener("click", () => {
            if (currentStepIndex < wizardSteps.length - 1) {
                currentStepIndex++;
                renderWizardSteps();
                loadWizardContent();
            }
        });

        // Initialize Wizard
        getWizardSteps();
    });

</script> 

• ABP Framework version: v8.0.2
• UI Type: MVC
• Database System: EF Core (SQL Server)

hi sir i got the problem my code is working but i must add module name before permission name like img below thanks for your hard efforts

hi sorry i can not share the code it's a company project i didn't do any thing except this class i shared with you and video you see no code for this case into any place just it... so you can take my code i shared and try it as i mentioned before if i use only //================================================== var multiTenancySide = CurrentTenant.GetMultiTenancySide(); var allPermissionNames = (await PermissionDefinitionManager.GetPermissionsAsync()) .Where(p => p.MultiTenancySide.HasFlag(multiTenancySide)) .Select(p => p.Name) .ToArray(); //================================================== so Accounting role and Cashier role will get all permissions as admin i do not want this i want specific permissions for each of them

hi all permissions is for admin correct i want the permission i selected in my code for Accounting and Cashier role if i only used //================================================== var multiTenancySide = CurrentTenant.GetMultiTenancySide(); var allPermissionNames = (await PermissionDefinitionManager.GetPermissionsAsync()) .Where(p => p.MultiTenancySide.HasFlag(multiTenancySide)) .Select(p => p.Name) .ToArray(); //================================================== so Accounting role and Cashier role will get all permissions as admin i do not want this i want specific permissions for each of them

hi can you check this video https://streamable.com/6jc5vx

thanks