Layout question

How-to Discussions
1

Hi!

I would like to create a 2 column timeline similar to that one:

any ideas on how to UX it ?

2

Hi, I’d give you a suggestion on how you do it but combined js and ux so here we goes :

1- you need to differentiate the left elements from the right ones in your timeline.

so you need to get your array and add to each odd object in your array for example value called “left” : “true”
you can do that manually if your in control of the json data, but if you are getting it from API you need to run this function before adding each item to your observable.
to achieve that before you add your objects into your observable :

  for (var i=0;i<dataArr.length;i++){
     if(i%2==0){
      //even index
         
       }
       else{
      //odd index
    
      var item = dataArr[i];
       item["left"] = true
      }
    }

then your array of objects will be like every odd object has a value called “Left” : “true”

2- then in your ux markup:

<Each Items="{yourObservable}">
      <panel ClipToBounds="true">
           <Rectangle Width="1" Color="#dedede" Layer="Background"/>
         <WhileFalse Value="{left}">
          <Grid ColumnCount="2" Columns="1*,1*">
          <Rectangle/>
          <Panel>
              <!--Your data goes here if you want this to be on the right -->
          </Panel>
     </Grid>
     </WhileFalse>
   <WhileTrue Value="{left}">
       <Grid ColumnCount="2" Columns="1*,1*">
          <Panel>
              <!--Your data goes here if you want this to be on the left -->
          </Panel>
         <Rectangle/>
     </Grid>
    </WhileTrue>
     </panel>
</Each>
3

Hi,

finally i did something like:

uxHomePageResults --> contains the header + observable array with results

<StackPanel ClipToBounds="true">  
    <Panel Height="10"/>
    <Each Items="{uxHomePageResults}">
        <DockPanel> 
            <Rectangle CornerRadius="8" Dock="Top" Fill="#fff" Alignment="Center">
                <TextStd Value="{timeHeader}" TextColor="#000" Margin="7,2,7,2" FontSize="14"/>
            </Rectangle>
            <Panel>
                <!-- Vertical line -->
                <Rectangle Width="2" Fill="#fff"/>
                <StackPanel>
                    <ColumnLayout ColumnCount="2"/>  
                    <Each Items="{uxHomePageResultsChildren}">
                    </Each>
                </StackPanel>
            </Panel>
        </DockPanel>
    </Each>
</StackPanel>