How to get the current page of Vmware clarity wizard? - vmware-clarity

We are using VMware clarity wizard to render wizard pages dynamically and we need to have custom logic to access the current page id/step id of the wizard for validation and other functionalities.
When trying to access page of the wizard, using pagesCollectionService and navService, we are getting the id's correctly for the first time e.g clr-wizard-page-0, clr-wizard-page-1 etc.
But the Problem is on click of cancel/submit from the wizard, the wizard id's are not getting reset, that is when we again open the same wizard the wizard page id's are in continuation to the previous id's
e.g :clr-wizard-page-4, clr-wizard-page-5 etc.
Is there a way by which we can access the page of the wizard by using any other property.
Note: Wizard pages are dynamically rendered using json
Attaching image : page id's that come up when we open the wizard for second time
enter image description here
Adding more information,
Please find the stackblitz link for more details:
https://clarity-light-theme-v013-phyhyk.stackblitz.io
Here we are rendering wizard pages, driven by config
For every wizard page we are displaying angular dynamic forms, where config contains all the information for the form fields .
Since is being called inside a for loop, we need to have a function where on click of next/back or on click of step of the wizard we should be able to validate the current form fields and store the current form fields value.
I have added (clrWizardCurrentPageChanged)="resetFormValidity()" and on every page change i am trying to retrieve the page id using wizard.currentPage.id, but the id's are not getting reset and when i access the multiple times, i am getting incremental id's : clr-wizard-page-4, clr-wizard-page-5 etc.
We are using the below versions :
"#clr/angular": "0.11.30",
"#clr/icons": "0.11.30",
"#clr/ui": "0.11.30",
Is there any other way where i can determine which page it is currently, so that i can compare that with config and continue with validation and form submission.

The Wizard has a property called currentPage which will tell you the current page. The public methods of the Wizard are at https://v2.clarity.design/wizards under the Wizard Deep Dive section, which might replace the need to inject and use the internal services which aren't meant to be used directly in applications (from what I understood in your message, an isolated demo would help greatly).
#ViewChild() wizard: ClrWizard;
get currentPage() {
return this.wizard.currentPage;
}

Related

Sitecore - Webforms for Marketers 2.3 - Inserting a new form into a page

I'm trying to insert a new form I created in Webforms for Marketers 2.3. I go to the page I want to insert the form on, presentation tab, form, Insert. I select the form I created but then get a message - "There are no allowed placeholders in order to insert a new form".
I then went to Layout-Placeholder Settings-Content and added Layout-Renderings-Modules-Webforms for Marketeres - Form.
No success.
I've also tried adding the form while it was and was not in the Webforms for Marketers restricting placeholders settings.
No success.
So, anyone know what I'm missing? Do I need to add a specific sitecore placeholder in the sublayout to hold the form?
To expand upon Zach's answer.
I had not been binding the placeholder settings to the page correctly. To do this I went to the Presentation tab and hit details.
I then went to the placeholder settings, and added a new entry here.
Make sure to enter the correct place holder where the form will be entered. Then go and add the form on the page. Once you choose your form and have added the placeholder correctly, it should show up here. (This was my original problem).
You need to set up which placeholders a form may be added to using the Restricted Placeholders window accessible from the Sitecore Desktop.
Steps
First, open the sitecore desktop and go to All Applications -> Web Forms for Marketers -> Restricting Placeholders:
Next, use the resulting window to configure the placeholders to which forms may be added. At least one of the selected placeholders must be present for you to add a form to the item.
I hope this helps. Good luck! :)
There is another edge case where this dialog may fail to display your available WFFM placeholders.
If you have the SSL Redirector module installed, and the form page in HTTPS mode, the dialog will fail to display the list of placeholders.
The solution is to modify the SSL Redirector to only perform redirection when Context.PageMode.IsNormal is true, and the current site name != "shell".

how create shared web from in asp.net

I am working on asp.net application for reporting. I need to develop round about 50+ reports. On each report I need selection criteria that may contain start-date , end-date, name , company etc on almost every .aspx page. these controls can be of type like dropdown, textbox or calender etc .
Any idea to use one editable + shared (not 100% same) web form on every page.
Using ASP.NET custom controls will allow you to create a module that you can insert into all of your pages.
You can also check this out to get you started more quickly.
http://www.codeproject.com/Articles/1739/User-controls-in-ASP-NET
If you want to make it similar but not 100% same for all apps then just create public properties that you can use to adjust control properties on different pages. For example if some text box should be visible on some page and not visible on other just create a public property in your control named something like EnableTextBoxABC
You can create ASP.NET Custom Controls.

ASP.Net Load Data from another page

i am facing one problem..
I have a page which has some templates related to user..
User use this template to send email..
User can have option to save this template and then he can load the saved templates...
What i want is on click on "Load Template" link. a new page appears which will display all the saved templates for logged in user. this page can contain grid. on select i want to close this load template page. and pass the text data back to previous page. which will display this template into text field. so that user can use saved templates.
How to do this using Asp.Net
You can do this using JavaScript, assuming the template selection window is opened with a call to window.open(). When the template is selected you can communicate and invoke methods (such as passing back the selected template ID) with code similar to this:
window.opener.templateSelected(selectedTemplateID);
window.close();
Here is information about window.opener
I believe that this may be what you're looking for. It's pretty straight forward and is in C#. It is done in .Net as opposed to client side JS.

FindControl won't find my dynamically added UserControl

I'm working on a project where the page load certain controls depending on the index available. The loading occurs in the page load where the method PopulateSearchField is called.
Within this method, all the UserControl are added on the page using : Page.LoadControl("path");
The page load and all the required controls are on the page. My problem is when the user click on the Search button the event is triggered and a query is built based on the user input int those controls. Unfortunately, the method isn't able to produce a proper query as it is unable to find any of the controls on the page.
With a temporary ControlCollection variable, I've been able to see that the number of controls on my page is 3 when it should be something from 4 to 10. Those 3 controls in the collection are the static label and buttons on the page.
I don't know if something is wrong with the code or if it's a page cycle problem as this solution used to work on framework 1.1. Yeah, I know this isn't the best thing to do so, but they did it this way and I gotta make it work.
I'm not sure if it is the migration that has caused the problem or not.
Thanks a lot, David!
When you click the button, the controls are no longer available server side when your click handler is being processed. The page, server side, has no knowledge of the controls you created dynamically since there are no server side controls for the posted values to map to. If you want to find the values, you need to inspect the posted control data and not rely on the server side asp.net control heirarchy.
You could also write all the data you require to a hidden field via javascript and then read the hidden data server side since it will will be posted.
The following is occuring:
Creating controls dynamically
Posting controls data on click
ASP.NET maps the data to the existing controls it knows about.
Your controls are not found so the data is no mapped to anything.
You need to add your controls before the mapping occurs (in PreInit). Check out the Page Lifecycle and you will see how it ties all the controls and data together.
Are you re-adding the controls to the new page when the user clicks search?
Remember... every time the user hits your server for that page... a new Page object is created. If you're dynamically adding controls, you have to do it every time the page loads.
Additionally, since you seem to want to get values out of the controls, you're going to have to make sure that the controls are created with the exact same ID property every time, and created before viewstate is loaded, if you want them to retain their values.

I have a need to give the users the ability to update a dropdown and apply that to their submission

I have an application that I am writing in ASP.NET MVC 2 following the Nerd Dinner tutorial. I am very much a beginner and was looking for examples/tutorials I could follow that would enable me to learn how to code the following scenario:
A user has the option to select an option from a dropdown.
If the option is not there then they can enter a new option and add it to the database and list in the dropdown.
I would like this to be done without the user leaving the page and what they have entered so far.
I am using a simple Entity Framework 4.0 model which I have built a repository on top of so I have methods I can call to save the filled in user information.
If the entry already exists in the database then I would like to offer the user the chance to either select that entry or to continue adding the entry they request because it can be a list of names and of course you can have more than one person with the same name.
I have implemeted this and it follows the following workflow:
1) Provide a button next to the select list to add items
2) Populate the drop-downlist when the page loads
3) When the add button is clicked, implement the UI as you like, we use a jquery dialog box.
4) Post the value to a view (via jQuery Ajax) The view should return a JsonResult
5) Check to see if the item exists, get existing id if exists or add and get new id
6) Returns a JsonResult that contains the new list and the id
7) In the reply to the ajax post, repopulate the select list using jquery and select the item.
HTH

Resources